From 8f42aa60d71c34802cc4f626834252195672a591 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 6 Oct 2021 09:19:51 +0200
Subject: [PATCH 01/35] repair branch
 707-Separate-Account-Overview-from-Send-Form from
 937-Frontend-style-documentation

---
 frontend/package.json                         |   4 +-
 frontend/src/components/Charts/BarChart.js    |  13 ++
 frontend/src/components/Charts/LineChart.js   |  13 ++
 frontend/src/locales/de.json                  |   1 +
 frontend/src/locales/en.json                  |   1 +
 frontend/src/main.js                          |   3 +-
 frontend/src/routes/routes.js                 |   7 +
 .../src/views/Layout/DashboardLayout_gdd.vue  |   9 +-
 frontend/src/views/Pages/AccountOverview.vue  | 146 ++++++++++++------
 frontend/src/views/Pages/SendOverview.vue     | 120 ++++++++++++++
 frontend/yarn.lock                            |  30 +---
 11 files changed, 269 insertions(+), 78 deletions(-)
 create mode 100644 frontend/src/components/Charts/BarChart.js
 create mode 100644 frontend/src/components/Charts/LineChart.js
 create mode 100644 frontend/src/views/Pages/SendOverview.vue

diff --git a/frontend/package.json b/frontend/package.json
index 5827baa5e..b6862d117 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,7 +26,7 @@
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.3.1",
     "bootstrap-vue": "^2.5.0",
-    "chart.js": "^2.9.3",
+    "chart.js": "^3.5.1",
     "d3": "^5.7.0",
     "datamaps": "^0.5.9",
     "date-fns": "^1.30.1",
@@ -64,7 +64,7 @@
     "vue": "^2.6.11",
     "vue-apollo": "^3.0.7",
     "vue-bootstrap-typeahead": "^0.2.6",
-    "vue-chartjs": "^3.5.0",
+    "vue-chartjs": "^3.5.1",
     "vue-cli-plugin-i18n": "^1.0.1",
     "vue-clickaway": "^2.2.2",
     "vue-clipboard2": "^0.3.0",
diff --git a/frontend/src/components/Charts/BarChart.js b/frontend/src/components/Charts/BarChart.js
new file mode 100644
index 000000000..c36d8ba53
--- /dev/null
+++ b/frontend/src/components/Charts/BarChart.js
@@ -0,0 +1,13 @@
+import { Bar, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: Bar,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
+    this.renderChart(this.chartData, this.options)
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/components/Charts/LineChart.js b/frontend/src/components/Charts/LineChart.js
new file mode 100644
index 000000000..a0733c320
--- /dev/null
+++ b/frontend/src/components/Charts/LineChart.js
@@ -0,0 +1,13 @@
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default {
+  extends: Line,
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
+    this.renderChart(this.chartData, this.options)
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index baf86c747..ad0cf9335 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -103,6 +103,7 @@
   "members_area": "Mitgliederbereich",
   "message": "hallo gradido !!",
   "privacy_policy": "Datenschutzerklärung",
+  "overview": "Übersicht",
   "send": "Senden",
   "settings": {
     "coinanimation": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index e0e0aa292..454f34dbd 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -103,6 +103,7 @@
   "members_area": "Member's area",
   "message": "hello gradido !!",
   "privacy_policy": "Privacy policy",
+  "overview": "Overview",
   "send": "Send",
   "settings": {
     "coinanimation": {
diff --git a/frontend/src/main.js b/frontend/src/main.js
index ba7015049..f71441924 100755
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,7 +6,7 @@ import { loadAllRules } from './validation-rules'
 import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
 import VueApollo from 'vue-apollo'
 import CONFIG from './config'
-
+import VueCharts from 'vue-chartjs'
 import { store } from './store/store'
 
 import router from './routes/router'
@@ -64,5 +64,6 @@ new Vue({
   store,
   i18n,
   apolloProvider,
+  VueCharts,
   render: (h) => h(App),
 })
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index 34d7a9d70..a662de10d 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -14,6 +14,13 @@ const routes = [
       requiresAuth: true,
     },
   },
+  {
+    path: '/send',
+    component: () => import('../views/Pages/SendOverview.vue'),
+    meta: {
+      requiresAuth: true,
+    },
+  },
   {
     path: '/profile',
     component: () => import('../views/Pages/UserProfileOverview.vue'),
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 2b63bf417..8273685bd 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -2,11 +2,16 @@
   <div>
     <side-bar @logout="logout" :balance="balance" :pending="pending">
       <template slot="links">
-        <p></p>
+        <sidebar-item
+          :link="{
+            name: $t('overview'),
+            path: '/overview',
+          }"
+        ></sidebar-item>
         <sidebar-item
           :link="{
             name: $t('send'),
-            path: '/overview',
+            path: '/send',
           }"
         ></sidebar-item>
         <sidebar-item
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 6a056510b..d92ddc5d8 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -8,28 +8,33 @@
         :gdt-balance="GdtBalance"
       />
       <br />
-      <gdd-send :currentTransactionStep="currentTransactionStep">
-        <template #transaction-form>
-          <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
-        </template>
-        <template #transaction-confirmation>
-          <transaction-confirmation
-            :email="transactionData.email"
-            :amount="transactionData.amount"
-            :memo="transactionData.memo"
-            :loading="loading"
-            @send-transaction="sendTransaction"
-            @on-reset="onReset"
-          ></transaction-confirmation>
-        </template>
-        <template #transaction-result>
-          <transaction-result
-            :error="error"
-            :errorResult="errorResult"
-            @on-reset="onReset"
-          ></transaction-result>
-        </template>
-      </gdd-send>
+      <hr>
+      GDD Statistik
+     
+    <div class="small">
+    <line-chart :chart-data="datacollectionGdd"  :options="chartOptions"></line-chart>
+    </div>
+
+    <div class="small">
+    <bar-chart :chart-data="datacollectionGdd" ></bar-chart>
+    </div>
+
+      <hr>
+      GDT Statistik
+     
+    <div class="small">
+    <line-chart :chart-data="datacollectionGdt"></line-chart>
+    </div>
+
+    <div class="small">
+    <bar-chart :chart-data="datacollectionGdt" ></bar-chart>
+    </div>
+
+      <template #transaction-form>
+        <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
+      </template>
+
+<!--
       <hr />
       <gdd-transaction-list
         v-if="showContext"
@@ -40,18 +45,27 @@
         @update-transactions="updateTransactions"
       />
       <gdd-transaction-list-footer v-if="showContext" :count="transactionCount" />
+-->
+         <hr>
+      UserAccount Statistik
+     
+    <div class="small">
+    <line-chart :chart-data="datacollectionUser" ></line-chart>
+    </div>
+
+ <div class="small">
+    <bar-chart :chart-data="datacollectionUser" ></bar-chart>
+    </div>
     </b-container>
   </div>
 </template>
 <script>
+
 import GddStatus from './AccountOverview/GddStatus.vue'
-import GddSend from './AccountOverview/GddSend.vue'
+import LineChart from '../../components/Charts/LineChart.js'
+import BarChart from '../../components/Charts/BarChart.js'
 import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
-import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
-import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
-import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
-import { sendCoins } from '../../graphql/mutations.js'
 
 const EMPTY_TRANSACTION_DATA = {
   email: '',
@@ -63,12 +77,10 @@ export default {
   name: 'Overview',
   components: {
     GddStatus,
-    GddSend,
+    LineChart,
+    BarChart,
     GddTransactionList,
     GddTransactionListFooter,
-    TransactionForm,
-    TransactionConfirmation,
-    TransactionResult,
   },
   data() {
     return {
@@ -78,6 +90,8 @@ export default {
       errorResult: '',
       currentTransactionStep: 0,
       loading: false,
+      datacollectionGdd: null,
+      datacollectionGdt: null,
     }
   },
   props: {
@@ -102,24 +116,7 @@ export default {
       this.transactionData = { ...data }
       this.currentTransactionStep = 1
     },
-    async sendTransaction() {
-      this.loading = true
-      this.$apollo
-        .mutate({
-          mutation: sendCoins,
-          variables: this.transactionData,
-        })
-        .then(() => {
-          this.error = false
-          this.$emit('update-balance', this.transactionData.amount)
-        })
-        .catch((err) => {
-          this.errorResult = err.message
-          this.error = true
-        })
-      this.currentTransactionStep = 2
-      this.loading = false
-    },
+
     onReset() {
       this.transactionData = { ...EMPTY_TRANSACTION_DATA }
       this.currentTransactionStep = 0
@@ -127,6 +124,57 @@ export default {
     updateTransactions(pagination) {
       this.$emit('update-transactions', pagination)
     },
+     fillData () {
+        this.datacollectionGdd = {
+          labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'gesendet',
+              backgroundColor: '#ffd600',
+              data: [345, 490, 218, 2000, 490, 745, 1113]
+            }, {
+              label: 'empfangen',
+              backgroundColor: '#f3a4b5',
+               data: [700, 395, 100, 405, 39, 805, 423]
+            }, {
+              label: 'geschöpft',
+              backgroundColor: '#2bffc6',
+               data: [400, 1000, 600, 1000, 900, 800, 1000]
+            }
+          ]
+        },
+        this.datacollectionGdt = {
+          labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'Euro',
+              backgroundColor: '#ffd600',
+              data: [200, 500, 100, 200, 300, 500, 100]
+            }, {
+              label: 'GDT',
+              backgroundColor: '#2bffc6',
+               data: [2000, 5000, 1100, 2200, 3300, 5500, 1500]
+            }
+          ]
+        },
+        this.datacollectionUser = {
+          labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'Angemeldete User',
+              backgroundColor: '#525f7f',
+              data: [200, 220, 330, 420, 480, 500, 784]
+            }, {
+              label: 'User im Schöpfungsprozess',
+              backgroundColor: '#2bffc6',
+               data: [80, 133, 155, 220, 280, 320, 421]
+            }
+          ]
+        }
+      },
   },
+  mounted () {
+      this.fillData()
+    },
 }
 </script>
diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
new file mode 100644
index 000000000..d90dc6adc
--- /dev/null
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <b-container fluid>
+      <gdd-status
+        v-if="showContext"
+        :pending="pending"
+        :balance="balance"
+        :gdt-balance="GdtBalance"
+      />
+      <br />
+      <gdd-send :currentTransactionStep="currentTransactionStep">
+        <template #transaction-form>
+          <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
+        </template>
+        <template #transaction-confirmation>
+          <transaction-confirmation
+            :email="transactionData.email"
+            :amount="transactionData.amount"
+            :memo="transactionData.memo"
+            :loading="loading"
+            @send-transaction="sendTransaction"
+            @on-reset="onReset"
+          ></transaction-confirmation>
+        </template>
+        <template #transaction-result>
+          <transaction-result
+            :error="error"
+            :errorResult="errorResult"
+            @on-reset="onReset"
+          ></transaction-result>
+        </template>
+      </gdd-send>
+      <hr />
+    </b-container>
+  </div>
+</template>
+<script>
+import GddStatus from './AccountOverview/GddStatus.vue'
+import GddSend from './AccountOverview/GddSend.vue'
+
+import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
+import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
+import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
+import { sendCoins } from '../../graphql/mutations.js'
+
+const EMPTY_TRANSACTION_DATA = {
+  email: '',
+  amount: 0,
+  memo: '',
+}
+
+export default {
+  name: 'Overview',
+  components: {
+    GddStatus,
+    GddSend,
+
+    TransactionForm,
+    TransactionConfirmation,
+    TransactionResult,
+  },
+  data() {
+    return {
+      transactionData: { ...EMPTY_TRANSACTION_DATA },
+      error: false,
+      errorResult: '',
+      currentTransactionStep: 0,
+      loading: false,
+    }
+  },
+  props: {
+    balance: { type: Number, default: 0 },
+    GdtBalance: { type: Number, default: 0 },
+    transactions: {
+      default: () => [],
+    },
+
+    pending: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    showContext() {
+      return this.currentTransactionStep === 0
+    },
+  },
+  methods: {
+    setTransaction(data) {
+      this.transactionData = { ...data }
+      this.currentTransactionStep = 1
+    },
+    async sendTransaction() {
+      this.loading = true
+      this.$apollo
+        .mutate({
+          mutation: sendCoins,
+          variables: this.transactionData,
+        })
+        .then(() => {
+          this.error = false
+          this.$emit('update-balance', this.transactionData.amount)
+        })
+        .catch((err) => {
+          this.errorResult = err.message
+          this.error = true
+        })
+      this.currentTransactionStep = 2
+      this.loading = false
+    },
+    onReset() {
+      this.transactionData = { ...EMPTY_TRANSACTION_DATA }
+      this.currentTransactionStep = 0
+    },
+    updateTransactions(pagination) {
+      this.$emit('update-transactions', pagination)
+    },
+  },
+}
+</script>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index b52b6b670..047ac28e0 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3808,28 +3808,10 @@ chardet@^0.4.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
   integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
 
-chart.js@^2.9.3:
-  version "2.9.4"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
-  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
-  dependencies:
-    chartjs-color "^2.1.0"
-    moment "^2.10.2"
-
-chartjs-color-string@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
-  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
-  dependencies:
-    color-name "^1.0.0"
-
-chartjs-color@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
-  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
-  dependencies:
-    chartjs-color-string "^0.6.0"
-    color-convert "^1.9.3"
+chart.js@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
+  integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
 
 check-types@^8.0.3:
   version "8.0.3"
@@ -4058,7 +4040,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
+color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -13421,7 +13403,7 @@ vue-bootstrap-typeahead@^0.2.6:
     resize-observer-polyfill "^1.5.0"
     vue "^2.5.17"
 
-vue-chartjs@^3.5.0:
+vue-chartjs@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.5.1.tgz#d25e845708f7744ae51bed9d23a975f5f8fc6529"
   integrity sha512-foocQbJ7FtveICxb4EV5QuVpo6d8CmZFmAopBppDIGKY+esJV8IJgwmEW0RexQhxqXaL/E1xNURsgFFYyKzS/g==

From 8b45d0da5806a007a0cee85c12787fccd1d11113 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 6 Oct 2021 14:10:11 +0200
Subject: [PATCH 02/35] removevue-chartjs chart.js

---
 frontend/package.json                        |  2 -
 frontend/src/components/Charts/BarChart.js   | 13 ---
 frontend/src/components/Charts/LineChart.js  | 13 ---
 frontend/src/views/Pages/AccountOverview.vue | 91 +++-----------------
 frontend/yarn.lock                           | 21 +----
 5 files changed, 11 insertions(+), 129 deletions(-)
 delete mode 100644 frontend/src/components/Charts/BarChart.js
 delete mode 100644 frontend/src/components/Charts/LineChart.js

diff --git a/frontend/package.json b/frontend/package.json
index b6862d117..3dde845f4 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,7 +26,6 @@
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.3.1",
     "bootstrap-vue": "^2.5.0",
-    "chart.js": "^3.5.1",
     "d3": "^5.7.0",
     "datamaps": "^0.5.9",
     "date-fns": "^1.30.1",
@@ -64,7 +63,6 @@
     "vue": "^2.6.11",
     "vue-apollo": "^3.0.7",
     "vue-bootstrap-typeahead": "^0.2.6",
-    "vue-chartjs": "^3.5.1",
     "vue-cli-plugin-i18n": "^1.0.1",
     "vue-clickaway": "^2.2.2",
     "vue-clipboard2": "^0.3.0",
diff --git a/frontend/src/components/Charts/BarChart.js b/frontend/src/components/Charts/BarChart.js
deleted file mode 100644
index c36d8ba53..000000000
--- a/frontend/src/components/Charts/BarChart.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Bar, mixins } from 'vue-chartjs'
-const { reactiveProp } = mixins
-
-export default {
-  extends: Bar,
-  mixins: [reactiveProp],
-  props: ['options'],
-  mounted () {
-    // this.chartData is created in the mixin.
-    // If you want to pass options please create a local options object
-    this.renderChart(this.chartData, this.options)
-  }
-}
\ No newline at end of file
diff --git a/frontend/src/components/Charts/LineChart.js b/frontend/src/components/Charts/LineChart.js
deleted file mode 100644
index a0733c320..000000000
--- a/frontend/src/components/Charts/LineChart.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Line, mixins } from 'vue-chartjs'
-const { reactiveProp } = mixins
-
-export default {
-  extends: Line,
-  mixins: [reactiveProp],
-  props: ['options'],
-  mounted () {
-    // this.chartData is created in the mixin.
-    // If you want to pass options please create a local options object
-    this.renderChart(this.chartData, this.options)
-  }
-}
\ No newline at end of file
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index d92ddc5d8..41d75a27c 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -10,31 +10,19 @@
       <br />
       <hr>
       GDD Statistik
-     
-    <div class="small">
-    <line-chart :chart-data="datacollectionGdd"  :options="chartOptions"></line-chart>
-    </div>
-
-    <div class="small">
-    <bar-chart :chart-data="datacollectionGdd" ></bar-chart>
-    </div>
+      
 
       <hr>
       GDT Statistik
      
-    <div class="small">
-    <line-chart :chart-data="datacollectionGdt"></line-chart>
-    </div>
-
-    <div class="small">
-    <bar-chart :chart-data="datacollectionGdt" ></bar-chart>
-    </div>
+   
+ 
 
       <template #transaction-form>
         <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
       </template>
 
-<!--
+ 
       <hr />
       <gdd-transaction-list
         v-if="showContext"
@@ -45,25 +33,16 @@
         @update-transactions="updateTransactions"
       />
       <gdd-transaction-list-footer v-if="showContext" :count="transactionCount" />
--->
-         <hr>
+    <hr>
       UserAccount Statistik
-     
-    <div class="small">
-    <line-chart :chart-data="datacollectionUser" ></line-chart>
-    </div>
-
- <div class="small">
-    <bar-chart :chart-data="datacollectionUser" ></bar-chart>
-    </div>
+   
     </b-container>
   </div>
 </template>
 <script>
 
 import GddStatus from './AccountOverview/GddStatus.vue'
-import LineChart from '../../components/Charts/LineChart.js'
-import BarChart from '../../components/Charts/BarChart.js'
+ 
 import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
 
@@ -77,8 +56,7 @@ export default {
   name: 'Overview',
   components: {
     GddStatus,
-    LineChart,
-    BarChart,
+   
     GddTransactionList,
     GddTransactionListFooter,
   },
@@ -124,57 +102,8 @@ export default {
     updateTransactions(pagination) {
       this.$emit('update-transactions', pagination)
     },
-     fillData () {
-        this.datacollectionGdd = {
-          labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-          datasets: [
-            {
-              label: 'gesendet',
-              backgroundColor: '#ffd600',
-              data: [345, 490, 218, 2000, 490, 745, 1113]
-            }, {
-              label: 'empfangen',
-              backgroundColor: '#f3a4b5',
-               data: [700, 395, 100, 405, 39, 805, 423]
-            }, {
-              label: 'geschöpft',
-              backgroundColor: '#2bffc6',
-               data: [400, 1000, 600, 1000, 900, 800, 1000]
-            }
-          ]
-        },
-        this.datacollectionGdt = {
-          labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-          datasets: [
-            {
-              label: 'Euro',
-              backgroundColor: '#ffd600',
-              data: [200, 500, 100, 200, 300, 500, 100]
-            }, {
-              label: 'GDT',
-              backgroundColor: '#2bffc6',
-               data: [2000, 5000, 1100, 2200, 3300, 5500, 1500]
-            }
-          ]
-        },
-        this.datacollectionUser = {
-          labels:['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-          datasets: [
-            {
-              label: 'Angemeldete User',
-              backgroundColor: '#525f7f',
-              data: [200, 220, 330, 420, 480, 500, 784]
-            }, {
-              label: 'User im Schöpfungsprozess',
-              backgroundColor: '#2bffc6',
-               data: [80, 133, 155, 220, 280, 320, 421]
-            }
-          ]
-        }
-      },
+ 
   },
-  mounted () {
-      this.fillData()
-    },
+  
 }
 </script>
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 047ac28e0..490927518 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1730,13 +1730,6 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/chart.js@^2.7.55":
-  version "2.9.30"
-  resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.9.30.tgz#34b99897f4f5ef0f74c8fe4ced70ac52b4d752dd"
-  integrity sha512-EgjxUUZFvf6ls3kW2CwyrnSJhgyKxgwrlp/W5G9wqyPEO9iFatO63zAA7L24YqgMxiDjQ+tG7ODU+2yWH91lPg==
-  dependencies:
-    moment "^2.10.2"
-
 "@types/d3@3.5.38":
   version "3.5.38"
   resolved "https://registry.yarnpkg.com/@types/d3/-/d3-3.5.38.tgz#76f8f2e9159ae562965b2fa0e6fbee1aa643a1bc"
@@ -3808,11 +3801,6 @@ chardet@^0.4.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
   integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
 
-chart.js@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
-  integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
-
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
@@ -9575,7 +9563,7 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-moment@^2.10.2, moment@^2.19.2:
+moment@^2.19.2:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
@@ -13403,13 +13391,6 @@ vue-bootstrap-typeahead@^0.2.6:
     resize-observer-polyfill "^1.5.0"
     vue "^2.5.17"
 
-vue-chartjs@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.5.1.tgz#d25e845708f7744ae51bed9d23a975f5f8fc6529"
-  integrity sha512-foocQbJ7FtveICxb4EV5QuVpo6d8CmZFmAopBppDIGKY+esJV8IJgwmEW0RexQhxqXaL/E1xNURsgFFYyKzS/g==
-  dependencies:
-    "@types/chart.js" "^2.7.55"
-
 vue-cli-plugin-i18n@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-i18n/-/vue-cli-plugin-i18n-1.0.1.tgz#5a3077de5d62c9b4068e486db1fc97fce9fa0072"

From db1124da3f7cced87c889cf528ec4c7fc6508e1c Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 13 Oct 2021 16:13:28 +0200
Subject: [PATCH 03/35] separate pages: overview and send. apexcharts library
 inserted. example charts created: lienen and bar charts. example charts
 inserted

---
 frontend/package.json                         |   2 +
 .../src/components/charts/ChartExample.vue    | 112 +++++++++
 frontend/src/components/charts/series.js      | 224 ++++++++++++++++++
 frontend/src/i18n.js                          |   5 +
 frontend/src/locales/de.json                  |   2 +-
 frontend/src/locales/en.json                  |   2 +-
 frontend/src/main.js                          |   6 +-
 .../views/Layout/DashboardLayout_gdd.spec.js  |  36 ++-
 .../src/views/Pages/AccountOverview.spec.js   | 110 +--------
 frontend/src/views/Pages/AccountOverview.vue  | 107 ++++++---
 .../views/Pages/AccountOverview/GddStatus.vue |  30 ---
 ...GddStatus.spec.js => GddGdtStatus.spec.js} |  10 +-
 frontend/src/views/Pages/GddGdtStatus.vue     |  32 +++
 frontend/src/views/Pages/SendOverview.spec.js | 135 +++++++++++
 frontend/src/views/Pages/SendOverview.vue     |  30 ++-
 .../GddSend.spec.js                           |   0
 .../GddSend.vue                               |   0
 .../GddSend/QrCode.vue                        |   0
 .../GddSend/TransactionConfirmation.vue       |   0
 .../GddSend/TransactionForm.spec.js           |   0
 .../GddSend/TransactionForm.vue               |   0
 .../GddSend/TransactionResult.vue             |   0
 frontend/test/testSetup.js                    |   2 +
 frontend/yarn.lock                            |  72 ++++++
 24 files changed, 715 insertions(+), 202 deletions(-)
 create mode 100644 frontend/src/components/charts/ChartExample.vue
 create mode 100644 frontend/src/components/charts/series.js
 delete mode 100644 frontend/src/views/Pages/AccountOverview/GddStatus.vue
 rename frontend/src/views/Pages/{AccountOverview/GddStatus.spec.js => GddGdtStatus.spec.js} (70%)
 create mode 100644 frontend/src/views/Pages/GddGdtStatus.vue
 create mode 100644 frontend/src/views/Pages/SendOverview.spec.js
 rename frontend/src/views/Pages/{AccountOverview => SendOverview}/GddSend.spec.js (100%)
 rename frontend/src/views/Pages/{AccountOverview => SendOverview}/GddSend.vue (100%)
 rename frontend/src/views/Pages/{AccountOverview => SendOverview}/GddSend/QrCode.vue (100%)
 rename frontend/src/views/Pages/{AccountOverview => SendOverview}/GddSend/TransactionConfirmation.vue (100%)
 rename frontend/src/views/Pages/{AccountOverview => SendOverview}/GddSend/TransactionForm.spec.js (100%)
 rename frontend/src/views/Pages/{AccountOverview => SendOverview}/GddSend/TransactionForm.vue (100%)
 rename frontend/src/views/Pages/{AccountOverview => SendOverview}/GddSend/TransactionResult.vue (100%)

diff --git a/frontend/package.json b/frontend/package.json
index 3dde845f4..d45c29e34 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,7 @@
     "@babel/preset-env": "^7.13.12",
     "@vue/cli-plugin-unit-jest": "^4.5.12",
     "@vue/test-utils": "^1.1.3",
+    "apexcharts": "^3.28.3",
     "apollo-boost": "^0.4.9",
     "axios": "^0.21.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -61,6 +62,7 @@
     "sweetalert2": "^9.5.4",
     "vee-validate": "^3.4.5",
     "vue": "^2.6.11",
+    "vue-apexcharts": "^1.6.2",
     "vue-apollo": "^3.0.7",
     "vue-bootstrap-typeahead": "^0.2.6",
     "vue-cli-plugin-i18n": "^1.0.1",
diff --git a/frontend/src/components/charts/ChartExample.vue b/frontend/src/components/charts/ChartExample.vue
new file mode 100644
index 000000000..7c740f512
--- /dev/null
+++ b/frontend/src/components/charts/ChartExample.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="appChartExample">
+    <apexchart width="100%" height="400" type="line" :options="chartOptions" :series="series" />
+    <apexchart
+      width="100%"
+      height="150"
+      type="area"
+      :options="chartOptionsMinimap"
+      :series="series"
+    />
+    <div></div>
+  </div>
+</template>
+
+<script>
+import { series } from './series.js'
+
+export default {
+  data: function () {
+    const chartId = 'priceHistoryChart' + Date.now()
+    const chartIdMinimap = 'priceHistoryChartMinimap' + Date.now()
+
+    const dateFrom = new Date('2018-09-26')
+    const dateTo = new Date('2018-10-01')
+
+    const chartOptions = {
+      chart: {
+        background: '#efe',
+        id: chartId,
+        animations: {
+          enabled: false,
+        },
+        toolbar: {
+          autoSelected: 'pan',
+          show: false,
+        },
+      },
+      legend: {
+        position: 'right',
+      },
+      stroke: {
+        curve: 'smooth',
+        width: [4],
+        dashArray: [10],
+      },
+      tooltip: {
+        followCursor: true,
+        x: {
+          show: false,
+        },
+      },
+      xaxis: {
+        type: 'datetime',
+      },
+    }
+
+    const chartOptionsMinimap = {
+      chart: {
+        id: chartIdMinimap,
+        animations: {
+          enabled: false,
+        },
+        brush: {
+          enabled: true,
+          target: chartId,
+        },
+        selection: {
+          xaxis: {
+            min: dateFrom.getTime(),
+            max: dateTo.getTime(),
+          },
+        },
+        type: 'line',
+      },
+      fill: {
+        gradient: {
+          enabled: true,
+          opacityFrom: 0.91,
+          opacityTo: 0.1,
+        },
+      },
+      legend: {
+        show: false,
+      },
+      xaxis: {
+        type: 'datetime',
+      },
+    }
+
+    return {
+      chartOptions,
+      chartOptionsMinimap,
+      series,
+    }
+  },
+  methods: {
+    updateChart() {
+      this.chartOptionsMinimap = {
+        chart: {
+          foreColor: '#' + Math.floor(Math.random() * 16777215).toString(16),
+          selection: {
+            xaxis: {
+              min: new Date('2018-09-28').getTime(),
+              max: new Date('2018-09-30').getTime(),
+            },
+          },
+        },
+      }
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/charts/series.js b/frontend/src/components/charts/series.js
new file mode 100644
index 000000000..759a2d401
--- /dev/null
+++ b/frontend/src/components/charts/series.js
@@ -0,0 +1,224 @@
+export const series = [
+  {
+    name: 'obb.docker',
+    data: [
+      {
+        x: '2018-09-25',
+        y: 900,
+      },
+      {
+        x: '2018-09-26',
+        y: 900,
+      },
+      {
+        x: '2018-09-27',
+        y: 900,
+      },
+      {
+        x: '2018-09-28',
+        y: 900,
+      },
+      {
+        x: '2018-09-29',
+        y: 900,
+      },
+      {
+        x: '2018-09-30',
+        y: 900,
+      },
+      {
+        x: '2018-10-01',
+        y: 900,
+      },
+      {
+        x: '2018-10-02',
+        y: 1125,
+      },
+    ],
+  },
+  {
+    name: 'filato.dk',
+    data: [
+      {
+        x: '2018-09-25',
+        y: 1251.45,
+      },
+      {
+        x: '2018-09-26',
+        y: 984.94,
+      },
+      {
+        x: '2018-09-27',
+        y: 1170.34,
+      },
+      {
+        x: '2018-09-28',
+        y: 1193.51,
+      },
+      {
+        x: '2018-09-29',
+        y: 1251.45,
+      },
+      {
+        x: '2018-09-30',
+        y: 1147.16,
+      },
+      {
+        x: '2018-10-01',
+        y: 1263.04,
+      },
+      {
+        x: '2018-10-02',
+        y: 1158.75,
+      },
+    ],
+  },
+  {
+    name: 'rito.dk',
+    data: [
+      {
+        x: '2018-09-25',
+        y: 1193.06,
+      },
+      {
+        x: '2018-09-26',
+        y: 1193.06,
+      },
+      {
+        x: '2018-09-27',
+        y: 1068.08,
+      },
+      {
+        x: '2018-09-28',
+        y: 909,
+      },
+      {
+        x: '2018-09-29',
+        y: 965.81,
+      },
+      {
+        x: '2018-09-30',
+        y: 965.81,
+      },
+      {
+        x: '2018-10-01',
+        y: 1022.63,
+      },
+      {
+        x: '2018-10-02',
+        y: 1136.25,
+      },
+    ],
+  },
+  {
+    name: 'fruhyasinth.dk',
+    data: [
+      {
+        x: '2018-09-25',
+        y: 1064.7,
+      },
+      {
+        x: '2018-09-26',
+        y: 1146.6,
+      },
+      {
+        x: '2018-09-27',
+        y: 1216.8,
+      },
+      {
+        x: '2018-09-28',
+        y: 959.4,
+      },
+      {
+        x: '2018-09-29',
+        y: 1193.4,
+      },
+      {
+        x: '2018-09-30',
+        y: 1017.9,
+      },
+      {
+        x: '2018-10-01',
+        y: 1275.3,
+      },
+      {
+        x: '2018-10-02',
+        y: 1170,
+      },
+    ],
+  },
+  {
+    name: 'bilka.dk',
+    data: [
+      {
+        x: '2018-09-25',
+        y: 973.35,
+      },
+      {
+        x: '2018-09-26',
+        y: 1147.16,
+      },
+      {
+        x: '2018-09-27',
+        y: 1263.04,
+      },
+      {
+        x: '2018-09-28',
+        y: 927,
+      },
+      {
+        x: '2018-09-29',
+        y: 950.18,
+      },
+      {
+        x: '2018-09-30',
+        y: 1123.99,
+      },
+      {
+        x: '2018-10-01',
+        y: 1158.75,
+      },
+      {
+        x: '2018-10-02',
+        y: 1158.75,
+      },
+    ],
+  },
+  {
+    name: 'hobbii.dk',
+    data: [
+      {
+        x: '2018-09-25',
+        y: 963.9,
+      },
+      {
+        x: '2018-09-26',
+        y: 1136.03,
+      },
+      {
+        x: '2018-09-27',
+        y: 1216.35,
+      },
+      {
+        x: '2018-09-28',
+        y: 1067.18,
+      },
+      {
+        x: '2018-09-29',
+        y: 952.43,
+      },
+      {
+        x: '2018-09-30',
+        y: 929.48,
+      },
+      {
+        x: '2018-10-01',
+        y: 1204.88,
+      },
+      {
+        x: '2018-10-02',
+        y: 1147.5,
+      },
+    ],
+  },
+]
diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
index 98e4ec971..946507c82 100644
--- a/frontend/src/i18n.js
+++ b/frontend/src/i18n.js
@@ -4,6 +4,9 @@ import VueI18n from 'vue-i18n'
 import en from 'vee-validate/dist/locale/en'
 import de from 'vee-validate/dist/locale/de'
 
+import enCharts from 'apexcharts/dist/locales/en'
+import deCharts from 'apexcharts/dist/locales/de'
+
 Vue.use(VueI18n)
 
 function loadLocaleMessages() {
@@ -17,12 +20,14 @@ function loadLocaleMessages() {
       if (locale === 'de') {
         messages[locale] = {
           validations: de,
+          charts: deCharts,
           ...messages[locale],
         }
       }
       if (locale === 'en') {
         messages[locale] = {
           validations: en,
+          charts: enCharts,
           ...messages[locale],
         }
       }
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index ad0cf9335..93b70318c 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -102,8 +102,8 @@
   "logout": "Abmelden",
   "members_area": "Mitgliederbereich",
   "message": "hallo gradido !!",
-  "privacy_policy": "Datenschutzerklärung",
   "overview": "Übersicht",
+  "privacy_policy": "Datenschutzerklärung",
   "send": "Senden",
   "settings": {
     "coinanimation": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 454f34dbd..d082a7133 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -102,8 +102,8 @@
   "logout": "Logout",
   "members_area": "Member's area",
   "message": "hello gradido !!",
-  "privacy_policy": "Privacy policy",
   "overview": "Overview",
+  "privacy_policy": "Privacy policy",
   "send": "Send",
   "settings": {
     "coinanimation": {
diff --git a/frontend/src/main.js b/frontend/src/main.js
index f71441924..5ca40591e 100755
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -6,7 +6,7 @@ import { loadAllRules } from './validation-rules'
 import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
 import VueApollo from 'vue-apollo'
 import CONFIG from './config'
-import VueCharts from 'vue-chartjs'
+import VueApexCharts from 'vue-apexcharts'
 import { store } from './store/store'
 
 import router from './routes/router'
@@ -57,6 +57,9 @@ router.beforeEach((to, from, next) => {
   }
 })
 
+Vue.use(VueApexCharts)
+Vue.component('apexchart', VueApexCharts)
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
@@ -64,6 +67,5 @@ new Vue({
   store,
   i18n,
   apolloProvider,
-  VueCharts,
   render: (h) => h(App),
 })
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index 6555d1dda..d737407dd 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -84,33 +84,43 @@ describe('DashboardLayoutGdd', () => {
         navbar = wrapper.findAll('ul.navbar-nav').at(0)
       })
 
-      it('has three items in the navbar', () => {
-        expect(navbar.findAll('ul > a')).toHaveLength(3)
+      it('has four items in the navbar', () => {
+        expect(navbar.findAll('ul > a')).toHaveLength(4)
       })
 
-      it('has first item "send" in navbar', () => {
-        expect(navbar.findAll('ul > a').at(0).text()).toEqual('send')
+      it('has first item "overview" in navbar', () => {
+        expect(navbar.findAll('ul > a').at(0).text()).toEqual('overview')
       })
 
-      it('has first item "send" linked to overview in navbar', () => {
+      it('has first item "overview" linked to overview in navbar', () => {
         navbar.findAll('ul > a').at(0).trigger('click')
-        expect(wrapper.findComponent(RouterLinkStub).props().to).toBe('/overview')
+        expect(wrapper.findComponent(RouterLinkStub).props(0).to).toBe('/overview')
       })
 
-      it('has second item "transactions" in navbar', () => {
-        expect(navbar.findAll('ul > a').at(1).text()).toEqual('transactions')
+      it('has second item "send" in navbar', () => {
+        expect(navbar.findAll('ul > a').at(1).text()).toEqual('send')
       })
 
-      it('has second item "transactions" linked to transactions in navbar', async () => {
-        expect(wrapper.findAll('a').at(3).attributes('href')).toBe('/transactions')
+      it('has second item "send" linked to sendoverview in navbar', () => {
+        navbar.findAll('ul > a').at(1).trigger('click')
+        expect(wrapper.findAll('a').at(3).attributes('href')).toBe('/send')
       })
 
-      it('has three items in the navbar', () => {
-        expect(navbar.findAll('ul > a')).toHaveLength(3)
+      it('has three item "transactions" in navbar', () => {
+        expect(navbar.findAll('ul > a').at(2).text()).toEqual('transactions')
+      })
+
+      it('has three item "transactions" linked to transactions in navbar', async () => {
+        navbar.findAll('ul > a').at(2).trigger('click')
+        expect(wrapper.findAll('a').at(5).attributes('href')).toBe('/transactions')
+      })
+
+      it('has three item "profil" in navbar', () => {
+        expect(navbar.findAll('ul > a').at(3).text()).toEqual('site.navbar.my-profil')
       })
 
       it('has third item "My profile" linked to profile in navbar', async () => {
-        expect(wrapper.findAll('a').at(5).attributes('href')).toBe('/profile')
+        expect(wrapper.findAll('a').at(7).attributes('href')).toBe('/profile')
       })
 
       it('has a link to the members area', () => {
diff --git a/frontend/src/views/Pages/AccountOverview.spec.js b/frontend/src/views/Pages/AccountOverview.spec.js
index 9d876f3ac..0ea413fa7 100644
--- a/frontend/src/views/Pages/AccountOverview.spec.js
+++ b/frontend/src/views/Pages/AccountOverview.spec.js
@@ -1,9 +1,6 @@
 import { mount } from '@vue/test-utils'
 import AccountOverview from './AccountOverview'
 
-const sendMock = jest.fn()
-sendMock.mockResolvedValue('success')
-
 const localVue = global.localVue
 
 window.scrollTo = jest.fn()
@@ -11,26 +8,17 @@ window.scrollTo = jest.fn()
 describe('AccountOverview', () => {
   let wrapper
 
-  const propsData = {
-    balance: 123.45,
-    transactionCount: 1,
-  }
-
   const mocks = {
     $t: jest.fn((t) => t),
-    $n: jest.fn((n) => String(n)),
-    $store: {
-      state: {
-        email: 'sender@example.org',
-      },
-    },
-    $apollo: {
-      mutate: sendMock,
-    },
+    $n: jest.fn(),
   }
 
   const Wrapper = () => {
-    return mount(AccountOverview, { localVue, mocks, propsData })
+    return mount(AccountOverview, {
+      localVue,
+      mocks,
+      stubs: ['apexchart'],
+    })
   }
 
   describe('mount', () => {
@@ -42,94 +30,8 @@ describe('AccountOverview', () => {
       expect(wrapper.find('div.gdd-status').exists()).toBeTruthy()
     })
 
-    it('has a send field', () => {
-      expect(wrapper.find('div.gdd-send').exists()).toBeTruthy()
-    })
-
     it('has a transactions table', () => {
       expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
     })
-
-    describe('transaction form', () => {
-      it('steps forward in the dialog', async () => {
-        await wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
-          email: 'user@example.org',
-          amount: 23.45,
-          memo: 'Make the best of it!',
-        })
-        expect(wrapper.findComponent({ name: 'TransactionConfirmation' }).exists()).toBeTruthy()
-      })
-    })
-
-    describe('confirm transaction', () => {
-      beforeEach(() => {
-        wrapper.setData({
-          currentTransactionStep: 1,
-          transactionData: {
-            email: 'user@example.org',
-            amount: 23.45,
-            memo: 'Make the best of it!',
-          },
-        })
-      })
-
-      it('resets the transaction process when on-reset is emitted', async () => {
-        await wrapper.findComponent({ name: 'TransactionConfirmation' }).vm.$emit('on-reset')
-        expect(wrapper.findComponent({ name: 'TransactionForm' }).exists()).toBeTruthy()
-        expect(wrapper.vm.transactionData).toEqual({
-          email: '',
-          amount: 0,
-          memo: '',
-        })
-      })
-
-      describe('transaction is confirmed and server response is success', () => {
-        beforeEach(async () => {
-          jest.clearAllMocks()
-          await wrapper
-            .findComponent({ name: 'TransactionConfirmation' })
-            .vm.$emit('send-transaction')
-        })
-
-        it('calls the API when send-transaction is emitted', async () => {
-          expect(sendMock).toBeCalledWith(
-            expect.objectContaining({
-              variables: {
-                email: 'user@example.org',
-                amount: 23.45,
-                memo: 'Make the best of it!',
-              },
-            }),
-          )
-        })
-
-        it('emits update-balance', () => {
-          expect(wrapper.emitted('update-balance')).toBeTruthy()
-          expect(wrapper.emitted('update-balance')).toEqual([[23.45]])
-        })
-
-        it('shows the succes page', () => {
-          expect(wrapper.find('div.card-body').text()).toContain('form.send_transaction_success')
-        })
-      })
-
-      describe('transaction is confirmed and server response is error', () => {
-        beforeEach(async () => {
-          jest.clearAllMocks()
-          sendMock.mockRejectedValue({ message: 'receiver not found' })
-          await wrapper
-            .findComponent({ name: 'TransactionConfirmation' })
-            .vm.$emit('send-transaction')
-        })
-
-        it('shows the error page', () => {
-          expect(wrapper.find('div.card-body').text()).toContain('form.send_transaction_error')
-        })
-
-        it('shows recipient not found', () => {
-          expect(wrapper.text()).toContain('transaction.receiverNotFound')
-        })
-      })
-    })
   })
 })
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 41d75a27c..1064fedaf 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -1,29 +1,56 @@
 <template>
   <div>
     <b-container fluid>
-      <gdd-status
-        v-if="showContext"
-        :pending="pending"
-        :balance="balance"
-        :gdt-balance="GdtBalance"
-      />
+      <b-row>
+        <b-col class="col-6">
+          <b-row>
+            <b-col class="col-11 bg-gray text-white p-3">
+              <gdd-status
+                v-if="showContext"
+                :pending="pending"
+                :balance="balance"
+                :gdt-balance="GdtBalance"
+                :gdt="false"
+              />
+            </b-col>
+          </b-row>
+        </b-col>
+        <b-col class="col-6 text-right">
+          <b-row>
+            <b-col class="bg-white text-gray p-3">
+              <gdd-status
+                v-if="showContext"
+                :pending="pending"
+                :balance="balance"
+                :gdt-balance="GdtBalance"
+                :gdd="false"
+              />
+            </b-col>
+          </b-row>
+        </b-col>
+      </b-row>
       <br />
-      <hr>
-      GDD Statistik
-      
 
-      <hr>
-      GDT Statistik
-     
-   
- 
+      <b-row>
+        <b-col class="col-12 col-md-6">
+          GDD Bar
+          <div>
+            <apexchart type="bar" :options="chartOptions" :series="series"></apexchart>
+          </div>
+        </b-col>
+        <b-col class="col-12 col-md-6">
+          GDD Line
+          <div>
+            <apexchart type="line" :options="chartOptions" :series="series"></apexchart>
+          </div>
+        </b-col>
+      </b-row>
+      <hr />
 
       <template #transaction-form>
         <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
       </template>
 
- 
-      <hr />
       <gdd-transaction-list
         v-if="showContext"
         :transactions="transactions"
@@ -33,43 +60,58 @@
         @update-transactions="updateTransactions"
       />
       <gdd-transaction-list-footer v-if="showContext" :count="transactionCount" />
-    <hr>
-      UserAccount Statistik
-   
     </b-container>
+    <hr />
+    example
+    <chart-example />
   </div>
 </template>
 <script>
-
-import GddStatus from './AccountOverview/GddStatus.vue'
- 
+import GddStatus from './GddGdtStatus.vue'
 import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
-
-const EMPTY_TRANSACTION_DATA = {
-  email: '',
-  amount: 0,
-  memo: '',
-}
+import ChartExample from '../../components/charts/ChartExample.vue'
 
 export default {
   name: 'Overview',
   components: {
     GddStatus,
-   
     GddTransactionList,
     GddTransactionListFooter,
+    ChartExample,
   },
   data() {
     return {
       timestamp: Date.now(),
-      transactionData: { ...EMPTY_TRANSACTION_DATA },
       error: false,
       errorResult: '',
       currentTransactionStep: 0,
       loading: false,
       datacollectionGdd: null,
       datacollectionGdt: null,
+
+      chartOptions: {
+        chart: {
+          id: 'vuechart-example',
+        },
+        xaxis: {
+          categories: ['Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt'],
+        },
+      },
+      series: [
+        {
+          name: 'Einnahmen',
+          data: [30, 40, 35, 50, 49, 60, 70, 91],
+        },
+        {
+          name: 'Ausgaben',
+          data: [20, 10, 45, 60, 59, 30, 50, 81],
+        },
+        {
+          name: 'geschöpft',
+          data: [1000, 500, 700, 1000, 800, 500, 1000, 810],
+        },
+      ],
     }
   },
   props: {
@@ -91,19 +133,16 @@ export default {
   },
   methods: {
     setTransaction(data) {
-      this.transactionData = { ...data }
       this.currentTransactionStep = 1
     },
 
     onReset() {
-      this.transactionData = { ...EMPTY_TRANSACTION_DATA }
       this.currentTransactionStep = 0
     },
+
     updateTransactions(pagination) {
       this.$emit('update-transactions', pagination)
     },
- 
   },
-  
 }
 </script>
diff --git a/frontend/src/views/Pages/AccountOverview/GddStatus.vue b/frontend/src/views/Pages/AccountOverview/GddStatus.vue
deleted file mode 100644
index 4ab675485..000000000
--- a/frontend/src/views/Pages/AccountOverview/GddStatus.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div class="gdd-status">
-    <b-row>
-      <b-col class="p-0">
-        <b-card class="p-0" style="background-color: #ebebeba3 !important">
-          {{ pending ? '—' : $n(balance, 'decimal') }} GDD
-        </b-card>
-      </b-col>
-      <b-col class="pr-0">
-        <b-card class="p-0 text-right" style="background-color: #ebebeba3 !important">
-          {{ pending ? '—' : $n(GdtBalance, 'decimal') }} GDT
-        </b-card>
-      </b-col>
-    </b-row>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'GddStatus',
-  props: {
-    balance: { type: Number, default: 0 },
-    GdtBalance: { type: Number, default: 0 },
-    pending: {
-      type: Boolean,
-      default: true,
-    },
-  },
-}
-</script>
diff --git a/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js b/frontend/src/views/Pages/GddGdtStatus.spec.js
similarity index 70%
rename from frontend/src/views/Pages/AccountOverview/GddStatus.spec.js
rename to frontend/src/views/Pages/GddGdtStatus.spec.js
index b414f4e93..02b8d8574 100644
--- a/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js
+++ b/frontend/src/views/Pages/GddGdtStatus.spec.js
@@ -1,5 +1,5 @@
 import { mount } from '@vue/test-utils'
-import GddStatus from './GddStatus'
+import GddStatus from './GddGdtStatus'
 
 const localVue = global.localVue
 
@@ -26,11 +26,11 @@ describe('GddStatus', () => {
 
     describe('balance is loading', () => {
       it('it displays em-dash as the ammount of GDD', () => {
-        expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('— GDD')
+        expect(wrapper.find('div.gdd-status-gdd').text()).toEqual('— GDD')
       })
 
       it('it displays em-dash as the ammount of GDT', () => {
-        expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('— GDT')
+        expect(wrapper.find('div.gdd-status-gdt').text()).toEqual('— GDT')
       })
     })
 
@@ -42,11 +42,11 @@ describe('GddStatus', () => {
       })
 
       it('it displays the ammount of GDD', () => {
-        expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('1234 GDD')
+        expect(wrapper.find('div.gdd-status-gdd').text()).toEqual('1234 GDD')
       })
 
       it('it displays the ammount of GDT', () => {
-        expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('9876 GDT')
+        expect(wrapper.find('div.gdd-status-gdt').text()).toEqual('9876 GDT')
       })
     })
   })
diff --git a/frontend/src/views/Pages/GddGdtStatus.vue b/frontend/src/views/Pages/GddGdtStatus.vue
new file mode 100644
index 000000000..11a3019c5
--- /dev/null
+++ b/frontend/src/views/Pages/GddGdtStatus.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="gdd-status">
+    <div class="p-0 gdd-status-gdd" v-if="gdd">
+      {{ pending ? '—' : $n(balance, 'decimal') }} GDD
+    </div>
+    <div :class="gdd ? 'p-0 text-right gdd-status-gdt' : 'p-0 gdd-status-gdt'" v-if="gdt">
+      {{ pending ? '—' : $n(GdtBalance, 'decimal') }} GDT
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GddStatus',
+  props: {
+    balance: { type: Number, default: 0 },
+    GdtBalance: { type: Number, default: 0 },
+    pending: {
+      type: Boolean,
+      default: true,
+    },
+    gdd: {
+      type: Boolean,
+      default: true,
+    },
+    gdt: {
+      type: Boolean,
+      default: true,
+    },
+  },
+}
+</script>
diff --git a/frontend/src/views/Pages/SendOverview.spec.js b/frontend/src/views/Pages/SendOverview.spec.js
new file mode 100644
index 000000000..0bd43ba2d
--- /dev/null
+++ b/frontend/src/views/Pages/SendOverview.spec.js
@@ -0,0 +1,135 @@
+import { mount } from '@vue/test-utils'
+import SendOverview from './SendOverview'
+
+const sendMock = jest.fn()
+sendMock.mockResolvedValue('success')
+
+const localVue = global.localVue
+
+// window.scrollTo = jest.fn()
+
+describe('SendOverview', () => {
+  let wrapper
+
+  const propsData = {
+    balance: 123.45,
+    transactionCount: 1,
+  }
+
+  const mocks = {
+    $t: jest.fn((t) => t),
+    $n: jest.fn((n) => String(n)),
+    $store: {
+      state: {
+        email: 'sender@example.org',
+      },
+    },
+    $apollo: {
+      mutate: sendMock,
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(SendOverview, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a status GDD line', () => {
+      expect(wrapper.find('div.gdd-status-gdd').exists()).toBeTruthy()
+    })
+
+    it('has a send field', () => {
+      expect(wrapper.find('div.gdd-send').exists()).toBeTruthy()
+    })
+
+    // it('has a transactions table', () => {
+    //  expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
+    // })
+
+    describe('transaction form', () => {
+      it('steps forward in the dialog', async () => {
+        await wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
+          email: 'user@example.org',
+          amount: 23.45,
+          memo: 'Make the best of it!',
+        })
+        expect(wrapper.findComponent({ name: 'TransactionConfirmation' }).exists()).toBeTruthy()
+      })
+    })
+
+    describe('confirm transaction', () => {
+      beforeEach(() => {
+        wrapper.setData({
+          currentTransactionStep: 1,
+          transactionData: {
+            email: 'user@example.org',
+            amount: 23.45,
+            memo: 'Make the best of it!',
+          },
+        })
+      })
+
+      it('resets the transaction process when on-reset is emitted', async () => {
+        await wrapper.findComponent({ name: 'TransactionConfirmation' }).vm.$emit('on-reset')
+        expect(wrapper.findComponent({ name: 'TransactionForm' }).exists()).toBeTruthy()
+        expect(wrapper.vm.transactionData).toEqual({
+          email: '',
+          amount: 0,
+          memo: '',
+        })
+      })
+
+      describe('transaction is confirmed and server response is success', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          await wrapper
+            .findComponent({ name: 'TransactionConfirmation' })
+            .vm.$emit('send-transaction')
+        })
+
+        it('calls the API when send-transaction is emitted', async () => {
+          expect(sendMock).toBeCalledWith(
+            expect.objectContaining({
+              variables: {
+                email: 'user@example.org',
+                amount: 23.45,
+                memo: 'Make the best of it!',
+              },
+            }),
+          )
+        })
+
+        it('emits update-balance', () => {
+          expect(wrapper.emitted('update-balance')).toBeTruthy()
+          expect(wrapper.emitted('update-balance')).toEqual([[23.45]])
+        })
+
+        it('shows the succes page', () => {
+          expect(wrapper.find('div.card-body').text()).toContain('form.send_transaction_success')
+        })
+      })
+
+      describe('transaction is confirmed and server response is error', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          sendMock.mockRejectedValue({ message: 'receiver not found' })
+          await wrapper
+            .findComponent({ name: 'TransactionConfirmation' })
+            .vm.$emit('send-transaction')
+        })
+
+        it('shows the error page', () => {
+          expect(wrapper.find('div.card-body').text()).toContain('form.send_transaction_error')
+        })
+
+        it('shows recipient not found', () => {
+          expect(wrapper.text()).toContain('transaction.receiverNotFound')
+        })
+      })
+    })
+  })
+})
diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index d90dc6adc..aaa16b550 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -1,12 +1,18 @@
 <template>
   <div>
     <b-container fluid>
-      <gdd-status
-        v-if="showContext"
-        :pending="pending"
-        :balance="balance"
-        :gdt-balance="GdtBalance"
-      />
+      <b-row>
+        <b-col class="bg-gray text-white text-center p-3">
+          <gdd-status
+            v-if="showContext"
+            :pending="pending"
+            :balance="balance"
+            :gdt-balance="GdtBalance"
+            :gdt="false"
+          />
+        </b-col>
+      </b-row>
+
       <br />
       <gdd-send :currentTransactionStep="currentTransactionStep">
         <template #transaction-form>
@@ -35,12 +41,12 @@
   </div>
 </template>
 <script>
-import GddStatus from './AccountOverview/GddStatus.vue'
-import GddSend from './AccountOverview/GddSend.vue'
+import GddStatus from './GddGdtStatus.vue'
+import GddSend from './SendOverview/GddSend.vue'
 
-import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
-import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
-import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
+import TransactionForm from './SendOverview/GddSend/TransactionForm.vue'
+import TransactionConfirmation from './SendOverview/GddSend/TransactionConfirmation.vue'
+import TransactionResult from './SendOverview/GddSend/TransactionResult.vue'
 import { sendCoins } from '../../graphql/mutations.js'
 
 const EMPTY_TRANSACTION_DATA = {
@@ -50,7 +56,7 @@ const EMPTY_TRANSACTION_DATA = {
 }
 
 export default {
-  name: 'Overview',
+  name: 'SendOverview',
   components: {
     GddStatus,
     GddSend,
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.spec.js b/frontend/src/views/Pages/SendOverview/GddSend.spec.js
similarity index 100%
rename from frontend/src/views/Pages/AccountOverview/GddSend.spec.js
rename to frontend/src/views/Pages/SendOverview/GddSend.spec.js
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.vue b/frontend/src/views/Pages/SendOverview/GddSend.vue
similarity index 100%
rename from frontend/src/views/Pages/AccountOverview/GddSend.vue
rename to frontend/src/views/Pages/SendOverview/GddSend.vue
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/QrCode.vue b/frontend/src/views/Pages/SendOverview/GddSend/QrCode.vue
similarity index 100%
rename from frontend/src/views/Pages/AccountOverview/GddSend/QrCode.vue
rename to frontend/src/views/Pages/SendOverview/GddSend/QrCode.vue
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionConfirmation.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
similarity index 100%
rename from frontend/src/views/Pages/AccountOverview/GddSend/TransactionConfirmation.vue
rename to frontend/src/views/Pages/SendOverview/GddSend/TransactionConfirmation.vue
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js b/frontend/src/views/Pages/SendOverview/GddSend/TransactionForm.spec.js
similarity index 100%
rename from frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js
rename to frontend/src/views/Pages/SendOverview/GddSend/TransactionForm.spec.js
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionForm.vue
similarity index 100%
rename from frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue
rename to frontend/src/views/Pages/SendOverview/GddSend/TransactionForm.vue
diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionResult.vue b/frontend/src/views/Pages/SendOverview/GddSend/TransactionResult.vue
similarity index 100%
rename from frontend/src/views/Pages/AccountOverview/GddSend/TransactionResult.vue
rename to frontend/src/views/Pages/SendOverview/GddSend/TransactionResult.vue
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
index daf862548..04ebb2492 100644
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@@ -12,6 +12,7 @@ import SideBar from '@/components/SidebarPlugin'
 import VueQrcode from 'vue-qrcode'
 
 import VueMoment from 'vue-moment'
+import VueApexCharts from 'vue-apexcharts'
 
 import clickOutside from '@/directives/click-ouside.js'
 import { focus } from 'vue-focus'
@@ -44,6 +45,7 @@ global.localVue.use(RegeneratorRuntime)
 global.localVue.use(SideBar)
 global.localVue.use(VueQrcode)
 global.localVue.use(VueMoment)
+global.localVue.use(VueApexCharts)
 global.localVue.component('validation-provider', ValidationProvider)
 global.localVue.component('validation-observer', ValidationObserver)
 global.localVue.directive('click-outside', clickOutside)
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 490927518..e0ac70818 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2615,6 +2615,18 @@ anymatch@^3.0.3, anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
+apexcharts@^3.28.3:
+  version "3.28.3"
+  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.28.3.tgz#22a6d9b234c82f6c2e1dd4aebba05b7603e2b1d2"
+  integrity sha512-EhghB2P27/Gjhwct8sSS0V63mdpRMx/ikH34dwUTqZQnkAEyOS/RKDmYjXBNA7zsAKBE/pThOdoTya6ADyk6zQ==
+  dependencies:
+    svg.draggable.js "^2.2.2"
+    svg.easing.js "^2.0.0"
+    svg.filter.js "^2.0.2"
+    svg.pathmorphing.js "^0.1.3"
+    svg.resize.js "^1.4.3"
+    svg.select.js "^3.0.1"
+
 apollo-boost@^0.4.9:
   version "0.4.9"
   resolved "https://registry.yarnpkg.com/apollo-boost/-/apollo-boost-0.4.9.tgz#ab3ba539c2ca944e6fd156583a1b1954b17a6791"
@@ -12600,6 +12612,61 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
+svg.draggable.js@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
+  integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
+  dependencies:
+    svg.js "^2.0.1"
+
+svg.easing.js@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
+  integrity sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=
+  dependencies:
+    svg.js ">=2.3.x"
+
+svg.filter.js@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
+  integrity sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
+  integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
+
+svg.pathmorphing.js@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
+  integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
+  dependencies:
+    svg.js "^2.4.0"
+
+svg.resize.js@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
+  integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
+  dependencies:
+    svg.js "^2.6.5"
+    svg.select.js "^2.1.2"
+
+svg.select.js@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
+  integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.select.js@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
+  integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
+  dependencies:
+    svg.js "^2.6.5"
+
 svgo@^1.0.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
@@ -13374,6 +13441,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+vue-apexcharts@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/vue-apexcharts/-/vue-apexcharts-1.6.2.tgz#0547826067f97e8ea67ca9423e524eb6669746ad"
+  integrity sha512-9HS3scJwWgKjmkcWIf+ndNDR0WytUJD8Ju0V2ZYcjYtlTLwJAf2SKUlBZaQTkDmwje/zMgulvZRi+MXmi+WkKw==
+
 vue-apollo@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/vue-apollo/-/vue-apollo-3.0.7.tgz#97a031d45641faa4888a6d5a7f71c40834359704"

From b2363198c2f805ffd3074306aac3ea7959d8cfaa Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 13 Oct 2021 16:47:37 +0200
Subject: [PATCH 04/35] router.test.js fix SendOverview

---
 frontend/src/routes/router.test.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/router.test.js b/frontend/src/routes/router.test.js
index 5e2e16005..433707131 100644
--- a/frontend/src/routes/router.test.js
+++ b/frontend/src/routes/router.test.js
@@ -56,7 +56,7 @@ describe('router', () => {
       })
 
       it('has twelve routes defined', () => {
-        expect(routes).toHaveLength(12)
+        expect(routes).toHaveLength(13)
       })
 
       describe('overview', () => {
@@ -70,6 +70,17 @@ describe('router', () => {
         })
       })
 
+      describe('send', () => {
+        it('requires authorization', () => {
+          expect(routes.find((r) => r.path === '/send').meta.requiresAuth).toBeTruthy()
+        })
+
+        it('loads the "Send" component', async () => {
+          const component = await routes.find((r) => r.path === '/send').component()
+          expect(component.default.name).toBe('SendOverview')
+        })
+      })
+
       describe('profile', () => {
         it('requires authorization', () => {
           expect(routes.find((r) => r.path === '/profile').meta.requiresAuth).toBeTruthy()

From d103da40544d3184f28a376e5e866a0cfe643fc7 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Thu, 14 Oct 2021 10:09:00 +0200
Subject: [PATCH 05/35] Update
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
---
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index d737407dd..c4f0f2a70 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -106,7 +106,7 @@ describe('DashboardLayoutGdd', () => {
         expect(wrapper.findAll('a').at(3).attributes('href')).toBe('/send')
       })
 
-      it('has three item "transactions" in navbar', () => {
+      it('has third item "transactions" in navbar', () => {
         expect(navbar.findAll('ul > a').at(2).text()).toEqual('transactions')
       })
 

From 35af053f19f8814931c4c6880806ab0527d75d75 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Thu, 14 Oct 2021 10:09:24 +0200
Subject: [PATCH 06/35] Update
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
---
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index c4f0f2a70..55cbe457c 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -115,7 +115,7 @@ describe('DashboardLayoutGdd', () => {
         expect(wrapper.findAll('a').at(5).attributes('href')).toBe('/transactions')
       })
 
-      it('has three item "profil" in navbar', () => {
+      it('has fourth item "M profile" in navbar', () => {
         expect(navbar.findAll('ul > a').at(3).text()).toEqual('site.navbar.my-profil')
       })
 

From d64055a78f4bd13e51b738ee7c12843560c91295 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Thu, 14 Oct 2021 10:09:40 +0200
Subject: [PATCH 07/35] Update
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
---
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index 55cbe457c..30719e4bd 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -110,7 +110,7 @@ describe('DashboardLayoutGdd', () => {
         expect(navbar.findAll('ul > a').at(2).text()).toEqual('transactions')
       })
 
-      it('has three item "transactions" linked to transactions in navbar', async () => {
+      it('has third item "transactions" linked to transactions in navbar', async () => {
         navbar.findAll('ul > a').at(2).trigger('click')
         expect(wrapper.findAll('a').at(5).attributes('href')).toBe('/transactions')
       })

From 1c57473d4ae0695d68da33c9a7b0c17c7878f2f1 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Thu, 14 Oct 2021 10:09:47 +0200
Subject: [PATCH 08/35] Update
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
---
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index 30719e4bd..255f67339 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -119,7 +119,7 @@ describe('DashboardLayoutGdd', () => {
         expect(navbar.findAll('ul > a').at(3).text()).toEqual('site.navbar.my-profil')
       })
 
-      it('has third item "My profile" linked to profile in navbar', async () => {
+      it('has fourth item "My profile" linked to profile in navbar', async () => {
         expect(wrapper.findAll('a').at(7).attributes('href')).toBe('/profile')
       })
 

From 3728b4ff0ca4bff46fe56cd80f6f8276d03263f1 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 14 Oct 2021 15:38:34 +0200
Subject: [PATCH 09/35] apexchats step work

---
 frontend/src/views/Pages/AccountOverview.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 1064fedaf..9a26caac6 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -92,23 +92,24 @@ export default {
 
       chartOptions: {
         chart: {
-          id: 'vuechart-example',
+          class: 'vuechart',
         },
         xaxis: {
           categories: ['Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt'],
         },
       },
+   
       series: [
         {
-          name: 'Einnahmen',
+          name: this.$t('decay.received'),
           data: [30, 40, 35, 50, 49, 60, 70, 91],
         },
         {
-          name: 'Ausgaben',
+          name: this.$t('decay.sent'),
           data: [20, 10, 45, 60, 59, 30, 50, 81],
         },
         {
-          name: 'geschöpft',
+          name: this.$t('decay.created'),
           data: [1000, 500, 700, 1000, 800, 500, 1000, 810],
         },
       ],

From c182b713580d93d2da6d893b41fbdff9b5fb0dff Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 15 Oct 2021 09:41:52 +0200
Subject: [PATCH 10/35] ink to the funding contributions of gradido.net
 memberships

---
 frontend/src/locales/de.json                                 | 3 ++-
 frontend/src/locales/en.json                                 | 5 +++--
 .../src/views/Pages/AccountOverview/GdtTransactionList.vue   | 3 +++
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 4801d5e4b..ef51ff75b 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -101,7 +101,8 @@
     "no-transactions": "Du hast zur Zeit keine Transaktionen",
     "publisher": "Dein geworbenes Mitglied hat einen Beitrag bezahlt",
     "raise": "Erhöhung",
-    "recruited-member": "Geworbenes Mitglied"
+    "recruited-member": "Geworbenes Mitglied",
+    "funding":"Zu den Förderbeiträgen"
   },
   "imprint": "Impressum",
   "language": "Sprache",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index d3d5b05ab..8e8c471d0 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -98,10 +98,11 @@
     "factor": "Factor",
     "formula": "Calculation formula",
     "gdt-received": "Gradido Transform (GDT) received",
-    "no-transactions": "You currently have no transactions",
+    "no-transactions": "You do not have Gradido Transform (GDT) yet.",
     "publisher": "A member you referred has paid a contribution",
     "raise": "Increase",
-    "recruited-member": "Recruited Member"
+    "recruited-member": "Recruited Member",
+    "funding":"Regarding the funding contributions"
   },
   "imprint": "Legal notice",
   "language": "Language",
diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
index e69e5edec..c867209aa 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
@@ -3,6 +3,8 @@
     <div class="list-group" style="background-color: #fff">
       <div v-if="transactionGdtCount === 0">
         {{ $t('gdt.no-transactions') }}
+        <hr />
+        <b-button :href="link" target="_blank">{{ $t('gdt.funding') }}</b-button>
       </div>
       <div
         v-else
@@ -52,6 +54,7 @@ export default {
       transactionGdtCount: { type: Number, default: 0 },
       currentPage: 1,
       pageSize: 25,
+      link: 'https://gradido.net/' + this.$store.state.language + '/memberships/',
     }
   },
   methods: {

From 5c6804aea747c153fc689d18548e5d2eda346104 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 15 Oct 2021 10:38:06 +0200
Subject: [PATCH 11/35] fix locales

---
 frontend/src/locales/de.json | 4 ++--
 frontend/src/locales/en.json | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index ef51ff75b..a7b41d655 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -97,12 +97,12 @@
     "credit": "Gutschrift",
     "factor": "Faktor",
     "formula": "Berechungsformel",
+    "funding": "Zu den Förderbeiträgen",
     "gdt-received": "Gradido Transform (GDT) erhalten",
     "no-transactions": "Du hast zur Zeit keine Transaktionen",
     "publisher": "Dein geworbenes Mitglied hat einen Beitrag bezahlt",
     "raise": "Erhöhung",
-    "recruited-member": "Geworbenes Mitglied",
-    "funding":"Zu den Förderbeiträgen"
+    "recruited-member": "Geworbenes Mitglied"
   },
   "imprint": "Impressum",
   "language": "Sprache",
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 8e8c471d0..d74b8ec5b 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -97,12 +97,12 @@
     "credit": "Credit",
     "factor": "Factor",
     "formula": "Calculation formula",
+    "funding": "Regarding the funding contributions",
     "gdt-received": "Gradido Transform (GDT) received",
     "no-transactions": "You do not have Gradido Transform (GDT) yet.",
     "publisher": "A member you referred has paid a contribution",
     "raise": "Increase",
-    "recruited-member": "Recruited Member",
-    "funding":"Regarding the funding contributions"
+    "recruited-member": "Recruited Member"
   },
   "imprint": "Legal notice",
   "language": "Language",

From 2b64ca8fe03eab6f93de1f7c3ccfde5c063a1fd4 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Fri, 15 Oct 2021 14:04:05 +0200
Subject: [PATCH 12/35] fix test

---
 .../views/Pages/AccountOverview/GddTransactionList.vue    | 2 +-
 .../Pages/AccountOverview/GdtTransactionList.spec.js      | 8 ++++++++
 .../views/Pages/AccountOverview/GdtTransactionList.vue    | 4 ++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index ca4823bef..9cfe265f5 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -121,7 +121,7 @@
         :per-page="pageSize"
         :total-rows="transactionCount"
       ></pagination-buttons>
-      <div v-if="transactions.length === 0" class="mt-4 text-center">
+      <div v-if="transactionCount === 0" class="mt-4 text-center">
         <span>{{ $t('transaction.nullTransactions') }}</span>
       </div>
     </div>
diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
index fcecf63fa..8130a0d52 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
@@ -51,10 +51,18 @@ const windowScrollToMock = jest.fn()
 
 window.scrollTo = windowScrollToMock
 
+const state = {
+  language: null,
+}
+
 describe('GdtTransactionList', () => {
   let wrapper
 
   const mocks = {
+    $store: {
+      state,
+      commit: jest.fn(),
+    },
     $i18n: {
       locale: 'en',
     },
diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
index c867209aa..0b6711a4d 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="gdt-transaction-list">
-    <div class="list-group" style="background-color: #fff">
-      <div v-if="transactionGdtCount === 0">
+    <div class="list-group">
+      <div v-if="transactionGdtCount === 0" class="text-center">
         {{ $t('gdt.no-transactions') }}
         <hr />
         <b-button :href="link" target="_blank">{{ $t('gdt.funding') }}</b-button>

From cf0bd2ff56d6042ff431c1f4fe3eed901c608e81 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 20 Oct 2021 10:40:00 +0200
Subject: [PATCH 13/35] refactor: Transaction Component

---
 frontend/src/components/Transaction.spec.js |  65 ++++++++++
 frontend/src/components/Transaction.vue     | 128 ++++++++++----------
 2 files changed, 128 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/Transaction.spec.js b/frontend/src/components/Transaction.spec.js
index 43dc44782..67091c363 100644
--- a/frontend/src/components/Transaction.spec.js
+++ b/frontend/src/components/Transaction.spec.js
@@ -1,8 +1,55 @@
 import { mount } from '@vue/test-utils'
 import Transaction from './Transaction'
+import Vue from 'vue'
+
+// disable throwing Errors on warnings to catch the warning
+Vue.config.warnHandler = (w) => {
+}
 
 const localVue = global.localVue
 
+const consoleError = console.error
+const consoleErrorMock = jest.fn()
+console.error = consoleErrorMock
+
+
+/*
+      gdtEntries: [
+        {
+          amount: 100,
+          gdt: 1700,
+          factor: 17,
+          comment: '',
+          date: '2021-05-02T17:20:11+00:00',
+          gdtEntryType: GdtEntryType.FORM,
+        },
+        {
+          amount: 1810,
+          gdt: 362,
+          factor: 0.2,
+          comment: 'Dezember 20',
+          date: '2020-12-31T12:00:00+00:00',
+          gdtEntryType: GdtEntryType.GLOBAL_MODIFICATOR,
+        },
+        {
+          amount: 100,
+          gdt: 1700,
+          factor: 17,
+          comment: '',
+          date: '2020-05-07T17:00:00+00:00',
+          gdtEntryType: GdtEntryType.FORM,
+        },
+        {
+          amount: 100,
+          gdt: 110,
+          factor: 22,
+          comment: '',
+          date: '2020-04-10T13:28:00+00:00',
+          gdtEntryType: GdtEntryType.ELOPAGE_PUBLISHER,
+        },
+      ],
+*/
+
 describe('Transaction', () => {
   let wrapper
 
@@ -27,5 +74,23 @@ describe('Transaction', () => {
     it('renders the component', () => {
       expect(wrapper.find('div.gdt-transaction-list-item').exists()).toBeTruthy()
     })
+
+    describe('no valid GDT entry type', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({ gdtEntryType: 'NOT_VALID'  })
+      })
+      
+      it('throws an error', () => {
+        expect(consoleErrorMock).toBeCalledWith(expect.objectContaining({ message: 'no lines for this type: NOT_VALID' }))
+      })
+    })
+
+    describe('default entry type FORM', () => {
+      beforeEach((async ()
+      it('has the heart icon', () => {
+        console.log(wrapper.html())
+        expect(wrapper.vm.getLinesByType.icon).toBe('heart')
+      })
+    })
   })
 })
diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index cc027306b..41bd54b42 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -5,8 +5,8 @@
         <!-- icon  -->
         <div class="text-right" style="position: absolute">
           <b-icon
-            :icon="getLinesByType(gdtEntryType).icon"
-            :class="getLinesByType(gdtEntryType).iconclasses"
+            :icon="getLinesByType.icon"
+            :class="getLinesByType.iconclasses"
           ></b-icon>
         </div>
 
@@ -20,10 +20,10 @@
         <!-- type  -->
         <b-row>
           <b-col cols="6" class="text-right">
-            {{ getLinesByType(gdtEntryType).description }}
+            {{ getLinesByType.description }}
           </b-col>
           <b-col cols="6">
-            {{ getLinesByType(gdtEntryType).descriptiontext }}
+            {{ getLinesByType.descriptiontext }}
           </b-col>
         </b-row>
 
@@ -33,7 +33,7 @@
             {{ $t('gdt.credit') }}
           </b-col>
           <b-col cols="6">
-            {{ getLinesByType(gdtEntryType).credittext }}
+            {{ getLinesByType.credittext }}
           </b-col>
         </b-row>
 
@@ -71,65 +71,63 @@
   </div>
 </template>
 <script>
-import TransactionCollapse from './TransactionCollapse.vue'
-import { GdtEntryType } from '../graphql/enums'
+ import TransactionCollapse from './TransactionCollapse.vue'
+ import { GdtEntryType } from '../graphql/enums'
 
-export default {
-  name: 'Transaction',
-  components: {
-    TransactionCollapse,
-  },
-  props: {
-    amount: { type: Number },
-    date: { type: String },
-    comment: { type: String },
-    gdtEntryType: { type: String, default: GdtEntryType.FORM },
-    factor: { type: Number },
-    gdt: { type: Number },
-  },
-  computed: {
-    isGlobalModificator: function () {
-      return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR
-    },
-  },
-  methods: {
-    getLinesByType(givenType) {
-      switch (givenType) {
-        case GdtEntryType.FORM:
-        case GdtEntryType.CVS:
-        case GdtEntryType.ELOPAGE:
-        case GdtEntryType.DIGISTORE:
-        case GdtEntryType.CVS2: {
-          return {
-            icon: 'heart',
-            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-            description: this.$t('gdt.contribution'),
-            descriptiontext: this.$n(this.amount, 'decimal') + ' €',
-            credittext: this.$n(this.gdt, 'decimal') + ' GDT',
-          }
-        }
-        case GdtEntryType.ELOPAGE_PUBLISHER: {
-          return {
-            icon: 'person-check',
-            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-            description: this.$t('gdt.recruited-member'),
-            descriptiontext: '5%',
-            credittext: this.$n(this.amount, 'decimal') + ' GDT',
-          }
-        }
-        case GdtEntryType.GLOBAL_MODIFICATOR: {
-          return {
-            icon: 'gift',
-            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-            description: this.$t('gdt.gdt-received'),
-            descriptiontext: this.comment,
-            credittext: this.$n(this.gdt, 'decimal') + ' GDT',
-          }
-        }
-        default:
-          throw new Error('no lines for this type: ' + givenType)
-      }
-    },
-  },
-}
+ export default {
+   name: 'Transaction',
+   components: {
+     TransactionCollapse,
+   },
+   props: {
+     amount: { type: Number },
+     date: { type: String },
+     comment: { type: String },
+     gdtEntryType: { type: String, default: GdtEntryType.FORM },
+     factor: { type: Number },
+     gdt: { type: Number },
+   },
+   computed: {
+     isGlobalModificator() {
+       return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR
+     },
+     getLinesByType() {
+       switch (this.gdtEntryType) {
+         case GdtEntryType.FORM:
+         case GdtEntryType.CVS:
+         case GdtEntryType.ELOPAGE:
+         case GdtEntryType.DIGISTORE:
+         case GdtEntryType.CVS2: {
+           return {
+             icon: 'heart',
+             iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+             description: this.$t('gdt.contribution'),
+             descriptiontext: this.$n(this.amount, 'decimal') + ' €',
+             credittext: this.$n(this.gdt, 'decimal') + ' GDT',
+           }
+         }
+         case GdtEntryType.ELOPAGE_PUBLISHER: {
+           return {
+             icon: 'person-check',
+             iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+             description: this.$t('gdt.recruited-member'),
+             descriptiontext: '5%',
+             credittext: this.$n(this.amount, 'decimal') + ' GDT',
+           }
+         }
+         case GdtEntryType.GLOBAL_MODIFICATOR: {
+           return {
+             icon: 'gift',
+             iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+             description: this.$t('gdt.gdt-received'),
+             descriptiontext: this.comment,
+             credittext: this.$n(this.gdt, 'decimal') + ' GDT',
+           }
+         }
+         default:
+           throw new Error('no lines for this type: ' + this.gdtEntryType)
+       }
+     },
+   },
+ }
 </script>

From cf07dc15a08677ab8dab7d3923c674dbb213a97d Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 20 Oct 2021 13:18:50 +0200
Subject: [PATCH 14/35] use id as collapse id. complete test

---
 frontend/src/components/Transaction.spec.js   | 235 ++++++++++++++----
 frontend/src/components/Transaction.vue       | 129 +++++-----
 .../AccountOverview/GdtTransactionList.vue    |  13 +-
 3 files changed, 256 insertions(+), 121 deletions(-)

diff --git a/frontend/src/components/Transaction.spec.js b/frontend/src/components/Transaction.spec.js
index 67091c363..d0bb009b7 100644
--- a/frontend/src/components/Transaction.spec.js
+++ b/frontend/src/components/Transaction.spec.js
@@ -3,53 +3,15 @@ import Transaction from './Transaction'
 import Vue from 'vue'
 
 // disable throwing Errors on warnings to catch the warning
-Vue.config.warnHandler = (w) => {
-}
+Vue.config.warnHandler = (w) => {}
 
 const localVue = global.localVue
 
-const consoleError = console.error
 const consoleErrorMock = jest.fn()
+
+// eslint-disable-next-line no-console
 console.error = consoleErrorMock
 
-
-/*
-      gdtEntries: [
-        {
-          amount: 100,
-          gdt: 1700,
-          factor: 17,
-          comment: '',
-          date: '2021-05-02T17:20:11+00:00',
-          gdtEntryType: GdtEntryType.FORM,
-        },
-        {
-          amount: 1810,
-          gdt: 362,
-          factor: 0.2,
-          comment: 'Dezember 20',
-          date: '2020-12-31T12:00:00+00:00',
-          gdtEntryType: GdtEntryType.GLOBAL_MODIFICATOR,
-        },
-        {
-          amount: 100,
-          gdt: 1700,
-          factor: 17,
-          comment: '',
-          date: '2020-05-07T17:00:00+00:00',
-          gdtEntryType: GdtEntryType.FORM,
-        },
-        {
-          amount: 100,
-          gdt: 110,
-          factor: 22,
-          comment: '',
-          date: '2020-04-10T13:28:00+00:00',
-          gdtEntryType: GdtEntryType.ELOPAGE_PUBLISHER,
-        },
-      ],
-*/
-
 describe('Transaction', () => {
   let wrapper
 
@@ -75,21 +37,200 @@ describe('Transaction', () => {
       expect(wrapper.find('div.gdt-transaction-list-item').exists()).toBeTruthy()
     })
 
+    it('has a collapse button', () => {
+      expect(wrapper.find('button[type="button"].btn-secondary').text()).toBe('i')
+    })
+
     describe('no valid GDT entry type', () => {
       beforeEach(async () => {
-        await wrapper.setProps({ gdtEntryType: 'NOT_VALID'  })
+        await wrapper.setProps({ gdtEntryType: 'NOT_VALID' })
       })
-      
+
       it('throws an error', () => {
-        expect(consoleErrorMock).toBeCalledWith(expect.objectContaining({ message: 'no lines for this type: NOT_VALID' }))
+        expect(consoleErrorMock).toBeCalledWith(
+          expect.objectContaining({ message: 'no lines for this type: NOT_VALID' }),
+        )
       })
     })
 
     describe('default entry type FORM', () => {
-      beforeEach((async ()
+      beforeEach(async () => {
+        await wrapper.setProps({
+          amount: 100,
+          date: '2021-05-02T17:20:11+00:00',
+          comment: 'This is a comment',
+          factor: 17,
+          gdt: 1700,
+          id: 42,
+        })
+      })
+
       it('has the heart icon', () => {
-        console.log(wrapper.html())
-        expect(wrapper.vm.getLinesByType.icon).toBe('heart')
+        expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy()
+      })
+
+      it('has the description gdt.contribution', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('gdt.contribution')
+      })
+
+      it('renders the amount of euros', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('100 €')
+      })
+
+      it('renders the amount of GDT', () => {
+        expect(wrapper.findAll('div.row').at(1).text()).toContain('1700 GDT')
+      })
+
+      it('renders the comment message', () => {
+        expect(wrapper.findAll('div.row').at(2).text()).toContain('This is a comment')
+      })
+
+      it('renders the date', () => {
+        expect(wrapper.findAll('div.row').at(3).text()).toContain('Sun May 02 2021')
+      })
+
+      it('does not show the collapse by default', () => {
+        expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeFalsy()
+      })
+
+      describe('without comment', () => {
+        it('does not render the message row', async () => {
+          await wrapper.setProps({ comment: undefined })
+          expect(wrapper.findAll('div.row').at(2).text()).toContain('form.date')
+        })
+      })
+      /* how to open the collapse ????? 
+      describe('collapse is open', () => {
+        beforeEach(async () => {
+          //console.log(wrapper.html())
+          await wrapper.find('div#gdt-collapse-42').trigger('click')
+          await wrapper.vm.$nextTick()
+          await flushPromises()
+          await wrapper.vm.$nextTick()
+          await flushPromises()
+          //console.log(wrapper.find('[enteractiveclass="collapsing"]').html())
+        })
+
+        it('shows the collapse', () => {
+          //console.log(wrapper.html())
+          expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeTruthy()
+        })
+      })
+      */
+    })
+
+    describe('GdtEntryType.CVS', () => {
+      it('behaves as default FORM', async () => {
+        await wrapper.setProps({ gdtEntryType: 'CVS' })
+        expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy()
+      })
+    })
+
+    describe('GdtEntryType.ELOPAGE', () => {
+      it('behaves as default FORM', async () => {
+        await wrapper.setProps({ gdtEntryType: 'ELOPAGE' })
+        expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy()
+      })
+    })
+
+    describe('GdtEntryType.DIGISTORE', () => {
+      it('behaves as default FORM', async () => {
+        await wrapper.setProps({ gdtEntryType: 'DIGISTORE' })
+        expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy()
+      })
+    })
+
+    describe('GdtEntryType.CVS2', () => {
+      it('behaves as default FORM', async () => {
+        await wrapper.setProps({ gdtEntryType: 'CVS2' })
+        expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy()
+      })
+    })
+
+    describe('GdtEntryType.ELOPAGE_PUBLISHER', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          amount: 365.67,
+          date: '2020-04-10T13:28:00+00:00',
+          comment: 'This is a comment',
+          gdtEntryType: 'ELOPAGE_PUBLISHER',
+          factor: 22,
+          gdt: 967.65,
+          id: 42,
+        })
+      })
+
+      it('has the person-check icon', () => {
+        expect(wrapper.find('svg.bi-person-check').exists()).toBeTruthy()
+      })
+
+      it('has the description gdt.recruited-member', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('gdt.recruited-member')
+      })
+
+      it('renders the percentage', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('5%')
+      })
+
+      it('renders the amount of GDT', () => {
+        expect(wrapper.findAll('div.row').at(1).text()).toContain('365.67 GDT')
+      })
+
+      it('renders the comment message', () => {
+        expect(wrapper.findAll('div.row').at(2).text()).toContain('This is a comment')
+      })
+
+      it('renders the date', () => {
+        expect(wrapper.findAll('div.row').at(3).text()).toContain('Fri Apr 10 2020')
+      })
+
+      it('does not show the collapse by default', () => {
+        expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeFalsy()
+      })
+
+      describe('without comment', () => {
+        it('does not render the message row', async () => {
+          await wrapper.setProps({ comment: undefined })
+          expect(wrapper.findAll('div.row').at(2).text()).toContain('form.date')
+        })
+      })
+    })
+
+    describe('GdtEntryType.GLOBAL_MODIFICATOR', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          amount: 123.45,
+          date: '2020-03-12T13:28:00+00:00',
+          comment: 'This is a comment',
+          gdtEntryType: 'GLOBAL_MODIFICATOR',
+          factor: 19,
+          gdt: 61.23,
+          id: 42,
+        })
+      })
+
+      it('has the gift icon', () => {
+        expect(wrapper.find('svg.bi-gift').exists()).toBeTruthy()
+      })
+
+      it('has the description gdt.gdt-received', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('gdt.gdt-received')
+      })
+
+      it('renders the comment', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('This is a comment')
+      })
+
+      it('renders the amount of GDT', () => {
+        expect(wrapper.findAll('div.row').at(1).text()).toContain('61.23 GDT')
+      })
+
+      it('renders the date', () => {
+        expect(wrapper.findAll('div.row').at(2).text()).toContain('Thu Mar 12 2020')
+      })
+
+      it('does not show the collapse by default', () => {
+        expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeFalsy()
       })
     })
   })
diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index 41bd54b42..f1deca565 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -1,13 +1,10 @@
 <template>
   <div>
     <div class="list-group">
-      <div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
+      <div class="list-group-item gdt-transaction-list-item" v-b-toggle="collapseId">
         <!-- icon  -->
         <div class="text-right" style="position: absolute">
-          <b-icon
-            :icon="getLinesByType.icon"
-            :class="getLinesByType.iconclasses"
-          ></b-icon>
+          <b-icon :icon="getLinesByType.icon" :class="getLinesByType.iconclasses"></b-icon>
         </div>
 
         <!-- collaps Button  -->
@@ -58,7 +55,7 @@
         </b-row>
 
         <!-- collaps trancaction info-->
-        <b-collapse :id="'a' + date + ''" class="mt-2 pb-4">
+        <b-collapse :id="collapseId" class="mt-2 pb-4">
           <transaction-collapse
             :amount="amount"
             :gdtEntryType="gdtEntryType"
@@ -71,63 +68,67 @@
   </div>
 </template>
 <script>
- import TransactionCollapse from './TransactionCollapse.vue'
- import { GdtEntryType } from '../graphql/enums'
+import TransactionCollapse from './TransactionCollapse.vue'
+import { GdtEntryType } from '../graphql/enums'
 
- export default {
-   name: 'Transaction',
-   components: {
-     TransactionCollapse,
-   },
-   props: {
-     amount: { type: Number },
-     date: { type: String },
-     comment: { type: String },
-     gdtEntryType: { type: String, default: GdtEntryType.FORM },
-     factor: { type: Number },
-     gdt: { type: Number },
-   },
-   computed: {
-     isGlobalModificator() {
-       return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR
-     },
-     getLinesByType() {
-       switch (this.gdtEntryType) {
-         case GdtEntryType.FORM:
-         case GdtEntryType.CVS:
-         case GdtEntryType.ELOPAGE:
-         case GdtEntryType.DIGISTORE:
-         case GdtEntryType.CVS2: {
-           return {
-             icon: 'heart',
-             iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-             description: this.$t('gdt.contribution'),
-             descriptiontext: this.$n(this.amount, 'decimal') + ' €',
-             credittext: this.$n(this.gdt, 'decimal') + ' GDT',
-           }
-         }
-         case GdtEntryType.ELOPAGE_PUBLISHER: {
-           return {
-             icon: 'person-check',
-             iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-             description: this.$t('gdt.recruited-member'),
-             descriptiontext: '5%',
-             credittext: this.$n(this.amount, 'decimal') + ' GDT',
-           }
-         }
-         case GdtEntryType.GLOBAL_MODIFICATOR: {
-           return {
-             icon: 'gift',
-             iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-             description: this.$t('gdt.gdt-received'),
-             descriptiontext: this.comment,
-             credittext: this.$n(this.gdt, 'decimal') + ' GDT',
-           }
-         }
-         default:
-           throw new Error('no lines for this type: ' + this.gdtEntryType)
-       }
-     },
-   },
- }
+export default {
+  name: 'Transaction',
+  components: {
+    TransactionCollapse,
+  },
+  props: {
+    amount: { type: Number },
+    date: { type: String },
+    comment: { type: String },
+    gdtEntryType: { type: String, default: GdtEntryType.FORM },
+    factor: { type: Number },
+    gdt: { type: Number },
+    id: { type: Number },
+  },
+  computed: {
+    collapseId() {
+      return 'gdt-collapse-' + String(this.id)
+    },
+    isGlobalModificator() {
+      return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR
+    },
+    getLinesByType() {
+      switch (this.gdtEntryType) {
+        case GdtEntryType.FORM:
+        case GdtEntryType.CVS:
+        case GdtEntryType.ELOPAGE:
+        case GdtEntryType.DIGISTORE:
+        case GdtEntryType.CVS2: {
+          return {
+            icon: 'heart',
+            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+            description: this.$t('gdt.contribution'),
+            descriptiontext: this.$n(this.amount, 'decimal') + ' €',
+            credittext: this.$n(this.gdt, 'decimal') + ' GDT',
+          }
+        }
+        case GdtEntryType.ELOPAGE_PUBLISHER: {
+          return {
+            icon: 'person-check',
+            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+            description: this.$t('gdt.recruited-member'),
+            descriptiontext: '5%',
+            credittext: this.$n(this.amount, 'decimal') + ' GDT',
+          }
+        }
+        case GdtEntryType.GLOBAL_MODIFICATOR: {
+          return {
+            icon: 'gift',
+            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+            description: this.$t('gdt.gdt-received'),
+            descriptiontext: this.comment,
+            credittext: this.$n(this.gdt, 'decimal') + ' GDT',
+          }
+        }
+        default:
+          throw new Error('no lines for this type: ' + this.gdtEntryType)
+      }
+    },
+  },
+}
 </script>
diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
index e69e5edec..fb058ca66 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
@@ -6,16 +6,8 @@
       </div>
       <div
         v-else
-        v-for="{
-          transactionId,
-          amount,
-          date,
-          comment,
-          gdtEntryType,
-          factor,
-          gdt,
-        } in transactionsGdt"
-        :key="transactionId"
+        v-for="{ id, amount, date, comment, gdtEntryType, factor, gdt } in transactionsGdt"
+        :key="id"
       >
         <transaction
           :amount="amount"
@@ -24,6 +16,7 @@
           :gdtEntryType="gdtEntryType"
           :factor="factor"
           :gdt="gdt"
+          :id="id"
         ></transaction>
       </div>
     </div>

From 80246ed70ddf6f67383d5c6748a4b7bea8633b39 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 20 Oct 2021 14:28:48 +0200
Subject: [PATCH 15/35] refactor transaction collapse component and test

---
 .../components/TransactionCollapse.spec.js    | 62 ++++++++++++++-----
 .../src/components/TransactionCollapse.vue    | 22 +++----
 2 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/TransactionCollapse.spec.js b/frontend/src/components/TransactionCollapse.spec.js
index 198ce2780..c25bb5aad 100644
--- a/frontend/src/components/TransactionCollapse.spec.js
+++ b/frontend/src/components/TransactionCollapse.spec.js
@@ -2,8 +2,18 @@ import { mount } from '@vue/test-utils'
 import TransactionCollapse from './TransactionCollapse'
 import { GdtEntryType } from '../graphql/enums'
 
+import Vue from 'vue'
+
+// disable throwing Errors on warnings to catch the warning
+Vue.config.warnHandler = (w) => {}
+
 const localVue = global.localVue
 
+const consoleErrorMock = jest.fn()
+
+// eslint-disable-next-line no-console
+console.error = consoleErrorMock
+
 describe('TransactionCollapse', () => {
   let wrapper
 
@@ -16,6 +26,27 @@ describe('TransactionCollapse', () => {
     return mount(TransactionCollapse, { localVue, mocks, propsData })
   }
 
+  describe('no valid GDT entry type', () => {
+    beforeEach(async () => {
+      const propsData = {
+        amount: 100,
+        gdt: 110,
+        factor: 22,
+        gdtEntryType: GdtEntryType.FORM,
+      }
+      wrapper = Wrapper(propsData)
+      await wrapper.setProps({ gdtEntryType: 'NOT_VALID' })
+    })
+
+    it('throws an error', () => {
+      expect(consoleErrorMock).toBeCalledWith(
+        expect.objectContaining({
+          message: 'no additional transaction info for this type: NOT_VALID',
+        }),
+      )
+    })
+  })
+
   describe('mount with gdtEntryType: FORM', () => {
     beforeEach(() => {
       const propsData = {
@@ -24,7 +55,6 @@ describe('TransactionCollapse', () => {
         factor: 22,
         gdtEntryType: GdtEntryType.FORM,
       }
-
       wrapper = Wrapper(propsData)
     })
 
@@ -41,23 +71,23 @@ describe('TransactionCollapse', () => {
     })
 
     it('renders the component collapse-headline', () => {
-      expect(wrapper.find('#collapse-headline').text()).toBe('gdt.calculation')
+      expect(wrapper.find('.collapse-headline').text()).toBe('gdt.calculation')
     })
 
     it('renders the component collapse-first', () => {
-      expect(wrapper.find('#collapse-first').text()).toBe('gdt.factor')
+      expect(wrapper.find('.collapse-first').text()).toBe('gdt.factor')
     })
 
     it('renders the component collapse-second', () => {
-      expect(wrapper.find('#collapse-second').text()).toBe('gdt.formula')
+      expect(wrapper.find('.collapse-second').text()).toBe('gdt.formula')
     })
 
     it('renders the component collapse-firstMath', () => {
-      expect(wrapper.find('#collapse-firstMath').text()).toBe('22 GDT pro €')
+      expect(wrapper.find('.collapse-firstMath').text()).toBe('22 GDT pro €')
     })
 
     it('renders the component collapse-secondMath', () => {
-      expect(wrapper.find('#collapse-secondMath').text()).toBe('100 € * 22 GDT / € = 110 GDT')
+      expect(wrapper.find('.collapse-secondMath').text()).toBe('100 € * 22 GDT / € = 110 GDT')
     })
   })
 
@@ -86,23 +116,23 @@ describe('TransactionCollapse', () => {
     })
 
     it('renders the component collapse-headline', () => {
-      expect(wrapper.find('#collapse-headline').text()).toBe('gdt.conversion-gdt-euro')
+      expect(wrapper.find('.collapse-headline').text()).toBe('gdt.conversion-gdt-euro')
     })
 
     it('renders the component collapse-first', () => {
-      expect(wrapper.find('#collapse-first').text()).toBe('gdt.raise')
+      expect(wrapper.find('.collapse-first').text()).toBe('gdt.raise')
     })
 
     it('renders the component collapse-second', () => {
-      expect(wrapper.find('#collapse-second').text()).toBe('gdt.conversion')
+      expect(wrapper.find('.collapse-second').text()).toBe('gdt.conversion')
     })
 
     it('renders the component collapse-firstMath', () => {
-      expect(wrapper.find('#collapse-firstMath').text()).toBe('2200 %')
+      expect(wrapper.find('.collapse-firstMath').text()).toBe('2200 %')
     })
 
     it('renders the component collapse-secondMath', () => {
-      expect(wrapper.find('#collapse-secondMath').text()).toBe('100 GDT * 2200 % = 2200 GDT')
+      expect(wrapper.find('.collapse-secondMath').text()).toBe('100 GDT * 2200 % = 2200 GDT')
     })
   })
 
@@ -131,23 +161,23 @@ describe('TransactionCollapse', () => {
     })
 
     it('renders the component collapse-headline', () => {
-      expect(wrapper.find('#collapse-headline').text()).toBe('gdt.publisher')
+      expect(wrapper.find('.collapse-headline').text()).toBe('gdt.publisher')
     })
 
     it('renders the component collapse-first', () => {
-      expect(wrapper.find('#collapse-first').text()).toBe('')
+      expect(wrapper.find('.collapse-first').text()).toBe('')
     })
 
     it('renders the component collapse-second', () => {
-      expect(wrapper.find('#collapse-second').text()).toBe('')
+      expect(wrapper.find('.collapse-second').text()).toBe('')
     })
 
     it('renders the component collapse-firstMath', () => {
-      expect(wrapper.find('#collapse-firstMath').text()).toBe('')
+      expect(wrapper.find('.collapse-firstMath').text()).toBe('')
     })
 
     it('renders the component collapse-secondMath', () => {
-      expect(wrapper.find('#collapse-secondMath').text()).toBe('')
+      expect(wrapper.find('.collapse-secondMath').text()).toBe('')
     })
   })
 })
diff --git a/frontend/src/components/TransactionCollapse.vue b/frontend/src/components/TransactionCollapse.vue
index f1eb57aa0..45af607d5 100644
--- a/frontend/src/components/TransactionCollapse.vue
+++ b/frontend/src/components/TransactionCollapse.vue
@@ -4,19 +4,19 @@
     style="border: 0px; background-color: #f1f1f1"
   >
     <b-row class="gdt-list-collapse-header-text text-center pb-3">
-      <b-col id="collapse-headline">
-        <b>{{ getLinesByType(gdtEntryType).headline }}</b>
+      <b-col class="collapse-headline">
+        <b>{{ getLinesByType.headline }}</b>
       </b-col>
     </b-row>
     <b-row class="gdt-list-collapse-box--all">
       <b-col cols="6" class="text-right collapse-col-left">
-        <div id="collapse-first">{{ getLinesByType(gdtEntryType).first }}</div>
-        <div id="collapse-second">{{ getLinesByType(gdtEntryType).second }}</div>
+        <div class="collapse-first">{{ getLinesByType.first }}</div>
+        <div class="collapse-second">{{ getLinesByType.second }}</div>
       </b-col>
       <b-col cols="6" class="collapse-col-right">
-        <div id="collapse-firstMath">{{ getLinesByType(gdtEntryType).firstMath }}</div>
-        <div id="collapse-secondMath">
-          {{ getLinesByType(gdtEntryType).secondMath }}
+        <div class="collapse-firstMath">{{ getLinesByType.firstMath }}</div>
+        <div class="collapse-secondMath">
+          {{ getLinesByType.secondMath }}
         </div>
       </b-col>
     </b-row>
@@ -33,9 +33,9 @@ export default {
     factor: { type: Number },
     gdt: { type: Number },
   },
-  methods: {
-    getLinesByType(givenType) {
-      switch (givenType) {
+  computed: {
+    getLinesByType() {
+      switch (this.gdtEntryType) {
         case GdtEntryType.FORM:
         case GdtEntryType.CVS:
         case GdtEntryType.ELOPAGE:
@@ -80,7 +80,7 @@ export default {
           }
         }
         default:
-          throw new Error('no additional transaction info for this type: ' + givenType)
+          throw new Error('no additional transaction info for this type: ' + this.gdtEntryType)
       }
     },
   },

From a09b2200fc0d9066ac07c1360955e5b0f942785d Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 20 Oct 2021 14:42:17 +0200
Subject: [PATCH 16/35] coverage frontend unit tests to 83%

---
 .github/workflows/test.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 1efaf19d2..b9c6d5495 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -344,7 +344,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 82
+          min_coverage: 83
           token: ${{ github.token }}
   
   ##############################################################################

From 16f3901eebb7505be7e92019cff7476647f704b4 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 20 Oct 2021 15:07:18 +0200
Subject: [PATCH 17/35] remove statistik example, statistics examples removed,
 status display revised

---
 frontend/package.json                         |   2 -
 .../src/components/charts/ChartExample.vue    | 112 ---------
 frontend/src/components/charts/series.js      | 224 ------------------
 frontend/src/i18n.js                          |   5 -
 frontend/src/main.js                          |   5 -
 .../src/views/Pages/AccountOverview.spec.js   |   8 +-
 frontend/src/views/Pages/AccountOverview.vue  |  55 +----
 frontend/src/views/Pages/GddGdtStatus.spec.js |  18 +-
 frontend/src/views/Pages/GddGdtStatus.vue     |  18 +-
 frontend/src/views/Pages/SendOverview.spec.js |   2 +-
 frontend/src/views/Pages/SendOverview.vue     |   4 +-
 frontend/test/testSetup.js                    |   2 -
 frontend/yarn.lock                            |  72 ------
 13 files changed, 20 insertions(+), 507 deletions(-)
 delete mode 100644 frontend/src/components/charts/ChartExample.vue
 delete mode 100644 frontend/src/components/charts/series.js

diff --git a/frontend/package.json b/frontend/package.json
index d45c29e34..3dde845f4 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,7 +18,6 @@
     "@babel/preset-env": "^7.13.12",
     "@vue/cli-plugin-unit-jest": "^4.5.12",
     "@vue/test-utils": "^1.1.3",
-    "apexcharts": "^3.28.3",
     "apollo-boost": "^0.4.9",
     "axios": "^0.21.1",
     "babel-core": "^7.0.0-bridge.0",
@@ -62,7 +61,6 @@
     "sweetalert2": "^9.5.4",
     "vee-validate": "^3.4.5",
     "vue": "^2.6.11",
-    "vue-apexcharts": "^1.6.2",
     "vue-apollo": "^3.0.7",
     "vue-bootstrap-typeahead": "^0.2.6",
     "vue-cli-plugin-i18n": "^1.0.1",
diff --git a/frontend/src/components/charts/ChartExample.vue b/frontend/src/components/charts/ChartExample.vue
deleted file mode 100644
index 7c740f512..000000000
--- a/frontend/src/components/charts/ChartExample.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div class="appChartExample">
-    <apexchart width="100%" height="400" type="line" :options="chartOptions" :series="series" />
-    <apexchart
-      width="100%"
-      height="150"
-      type="area"
-      :options="chartOptionsMinimap"
-      :series="series"
-    />
-    <div></div>
-  </div>
-</template>
-
-<script>
-import { series } from './series.js'
-
-export default {
-  data: function () {
-    const chartId = 'priceHistoryChart' + Date.now()
-    const chartIdMinimap = 'priceHistoryChartMinimap' + Date.now()
-
-    const dateFrom = new Date('2018-09-26')
-    const dateTo = new Date('2018-10-01')
-
-    const chartOptions = {
-      chart: {
-        background: '#efe',
-        id: chartId,
-        animations: {
-          enabled: false,
-        },
-        toolbar: {
-          autoSelected: 'pan',
-          show: false,
-        },
-      },
-      legend: {
-        position: 'right',
-      },
-      stroke: {
-        curve: 'smooth',
-        width: [4],
-        dashArray: [10],
-      },
-      tooltip: {
-        followCursor: true,
-        x: {
-          show: false,
-        },
-      },
-      xaxis: {
-        type: 'datetime',
-      },
-    }
-
-    const chartOptionsMinimap = {
-      chart: {
-        id: chartIdMinimap,
-        animations: {
-          enabled: false,
-        },
-        brush: {
-          enabled: true,
-          target: chartId,
-        },
-        selection: {
-          xaxis: {
-            min: dateFrom.getTime(),
-            max: dateTo.getTime(),
-          },
-        },
-        type: 'line',
-      },
-      fill: {
-        gradient: {
-          enabled: true,
-          opacityFrom: 0.91,
-          opacityTo: 0.1,
-        },
-      },
-      legend: {
-        show: false,
-      },
-      xaxis: {
-        type: 'datetime',
-      },
-    }
-
-    return {
-      chartOptions,
-      chartOptionsMinimap,
-      series,
-    }
-  },
-  methods: {
-    updateChart() {
-      this.chartOptionsMinimap = {
-        chart: {
-          foreColor: '#' + Math.floor(Math.random() * 16777215).toString(16),
-          selection: {
-            xaxis: {
-              min: new Date('2018-09-28').getTime(),
-              max: new Date('2018-09-30').getTime(),
-            },
-          },
-        },
-      }
-    },
-  },
-}
-</script>
diff --git a/frontend/src/components/charts/series.js b/frontend/src/components/charts/series.js
deleted file mode 100644
index 759a2d401..000000000
--- a/frontend/src/components/charts/series.js
+++ /dev/null
@@ -1,224 +0,0 @@
-export const series = [
-  {
-    name: 'obb.docker',
-    data: [
-      {
-        x: '2018-09-25',
-        y: 900,
-      },
-      {
-        x: '2018-09-26',
-        y: 900,
-      },
-      {
-        x: '2018-09-27',
-        y: 900,
-      },
-      {
-        x: '2018-09-28',
-        y: 900,
-      },
-      {
-        x: '2018-09-29',
-        y: 900,
-      },
-      {
-        x: '2018-09-30',
-        y: 900,
-      },
-      {
-        x: '2018-10-01',
-        y: 900,
-      },
-      {
-        x: '2018-10-02',
-        y: 1125,
-      },
-    ],
-  },
-  {
-    name: 'filato.dk',
-    data: [
-      {
-        x: '2018-09-25',
-        y: 1251.45,
-      },
-      {
-        x: '2018-09-26',
-        y: 984.94,
-      },
-      {
-        x: '2018-09-27',
-        y: 1170.34,
-      },
-      {
-        x: '2018-09-28',
-        y: 1193.51,
-      },
-      {
-        x: '2018-09-29',
-        y: 1251.45,
-      },
-      {
-        x: '2018-09-30',
-        y: 1147.16,
-      },
-      {
-        x: '2018-10-01',
-        y: 1263.04,
-      },
-      {
-        x: '2018-10-02',
-        y: 1158.75,
-      },
-    ],
-  },
-  {
-    name: 'rito.dk',
-    data: [
-      {
-        x: '2018-09-25',
-        y: 1193.06,
-      },
-      {
-        x: '2018-09-26',
-        y: 1193.06,
-      },
-      {
-        x: '2018-09-27',
-        y: 1068.08,
-      },
-      {
-        x: '2018-09-28',
-        y: 909,
-      },
-      {
-        x: '2018-09-29',
-        y: 965.81,
-      },
-      {
-        x: '2018-09-30',
-        y: 965.81,
-      },
-      {
-        x: '2018-10-01',
-        y: 1022.63,
-      },
-      {
-        x: '2018-10-02',
-        y: 1136.25,
-      },
-    ],
-  },
-  {
-    name: 'fruhyasinth.dk',
-    data: [
-      {
-        x: '2018-09-25',
-        y: 1064.7,
-      },
-      {
-        x: '2018-09-26',
-        y: 1146.6,
-      },
-      {
-        x: '2018-09-27',
-        y: 1216.8,
-      },
-      {
-        x: '2018-09-28',
-        y: 959.4,
-      },
-      {
-        x: '2018-09-29',
-        y: 1193.4,
-      },
-      {
-        x: '2018-09-30',
-        y: 1017.9,
-      },
-      {
-        x: '2018-10-01',
-        y: 1275.3,
-      },
-      {
-        x: '2018-10-02',
-        y: 1170,
-      },
-    ],
-  },
-  {
-    name: 'bilka.dk',
-    data: [
-      {
-        x: '2018-09-25',
-        y: 973.35,
-      },
-      {
-        x: '2018-09-26',
-        y: 1147.16,
-      },
-      {
-        x: '2018-09-27',
-        y: 1263.04,
-      },
-      {
-        x: '2018-09-28',
-        y: 927,
-      },
-      {
-        x: '2018-09-29',
-        y: 950.18,
-      },
-      {
-        x: '2018-09-30',
-        y: 1123.99,
-      },
-      {
-        x: '2018-10-01',
-        y: 1158.75,
-      },
-      {
-        x: '2018-10-02',
-        y: 1158.75,
-      },
-    ],
-  },
-  {
-    name: 'hobbii.dk',
-    data: [
-      {
-        x: '2018-09-25',
-        y: 963.9,
-      },
-      {
-        x: '2018-09-26',
-        y: 1136.03,
-      },
-      {
-        x: '2018-09-27',
-        y: 1216.35,
-      },
-      {
-        x: '2018-09-28',
-        y: 1067.18,
-      },
-      {
-        x: '2018-09-29',
-        y: 952.43,
-      },
-      {
-        x: '2018-09-30',
-        y: 929.48,
-      },
-      {
-        x: '2018-10-01',
-        y: 1204.88,
-      },
-      {
-        x: '2018-10-02',
-        y: 1147.5,
-      },
-    ],
-  },
-]
diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
index 946507c82..98e4ec971 100644
--- a/frontend/src/i18n.js
+++ b/frontend/src/i18n.js
@@ -4,9 +4,6 @@ import VueI18n from 'vue-i18n'
 import en from 'vee-validate/dist/locale/en'
 import de from 'vee-validate/dist/locale/de'
 
-import enCharts from 'apexcharts/dist/locales/en'
-import deCharts from 'apexcharts/dist/locales/de'
-
 Vue.use(VueI18n)
 
 function loadLocaleMessages() {
@@ -20,14 +17,12 @@ function loadLocaleMessages() {
       if (locale === 'de') {
         messages[locale] = {
           validations: de,
-          charts: deCharts,
           ...messages[locale],
         }
       }
       if (locale === 'en') {
         messages[locale] = {
           validations: en,
-          charts: enCharts,
           ...messages[locale],
         }
       }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 67863daff..fd06bf9c0 100755
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -7,8 +7,6 @@ import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
 import VueApollo from 'vue-apollo'
 import CONFIG from './config'
 
-import VueApexCharts from 'vue-apexcharts'
-
 import addNavigationGuards from './routes/guards'
 
 import { store } from './store/store'
@@ -55,9 +53,6 @@ loadAllRules(i18n)
 
 addNavigationGuards(router, store)
 
-Vue.use(VueApexCharts)
-Vue.component('apexchart', VueApexCharts)
-
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
diff --git a/frontend/src/views/Pages/AccountOverview.spec.js b/frontend/src/views/Pages/AccountOverview.spec.js
index 0ea413fa7..785a2b372 100644
--- a/frontend/src/views/Pages/AccountOverview.spec.js
+++ b/frontend/src/views/Pages/AccountOverview.spec.js
@@ -26,10 +26,12 @@ describe('AccountOverview', () => {
       wrapper = Wrapper()
     })
 
-    it('has a status line', () => {
-      expect(wrapper.find('div.gdd-status').exists()).toBeTruthy()
+    it('has a status gdd-status-gdd', () => {
+      expect(wrapper.find('div.gdd-status-gdd').exists()).toBeTruthy()
+    })
+    it('has a status gdd-status-gdt', () => {
+      expect(wrapper.find('div.gdd-status-gdt').exists()).toBeTruthy()
     })
-
     it('has a transactions table', () => {
       expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
     })
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 9a26caac6..d8ccfa638 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -6,11 +6,11 @@
           <b-row>
             <b-col class="col-11 bg-gray text-white p-3">
               <gdd-status
+                class="gdd-status-gdd"
                 v-if="showContext"
                 :pending="pending"
                 :balance="balance"
-                :gdt-balance="GdtBalance"
-                :gdt="false"
+                status-text="GDD"
               />
             </b-col>
           </b-row>
@@ -19,11 +19,11 @@
           <b-row>
             <b-col class="bg-white text-gray p-3">
               <gdd-status
+                class="gdd-status-gdt"
                 v-if="showContext"
                 :pending="pending"
-                :balance="balance"
-                :gdt-balance="GdtBalance"
-                :gdd="false"
+                :balance="GdtBalance"
+                status-text="GDT"
               />
             </b-col>
           </b-row>
@@ -31,22 +31,6 @@
       </b-row>
       <br />
 
-      <b-row>
-        <b-col class="col-12 col-md-6">
-          GDD Bar
-          <div>
-            <apexchart type="bar" :options="chartOptions" :series="series"></apexchart>
-          </div>
-        </b-col>
-        <b-col class="col-12 col-md-6">
-          GDD Line
-          <div>
-            <apexchart type="line" :options="chartOptions" :series="series"></apexchart>
-          </div>
-        </b-col>
-      </b-row>
-      <hr />
-
       <template #transaction-form>
         <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
       </template>
@@ -61,16 +45,12 @@
       />
       <gdd-transaction-list-footer v-if="showContext" :count="transactionCount" />
     </b-container>
-    <hr />
-    example
-    <chart-example />
   </div>
 </template>
 <script>
 import GddStatus from './GddGdtStatus.vue'
 import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
-import ChartExample from '../../components/charts/ChartExample.vue'
 
 export default {
   name: 'Overview',
@@ -78,7 +58,6 @@ export default {
     GddStatus,
     GddTransactionList,
     GddTransactionListFooter,
-    ChartExample,
   },
   data() {
     return {
@@ -89,30 +68,6 @@ export default {
       loading: false,
       datacollectionGdd: null,
       datacollectionGdt: null,
-
-      chartOptions: {
-        chart: {
-          class: 'vuechart',
-        },
-        xaxis: {
-          categories: ['Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt'],
-        },
-      },
-   
-      series: [
-        {
-          name: this.$t('decay.received'),
-          data: [30, 40, 35, 50, 49, 60, 70, 91],
-        },
-        {
-          name: this.$t('decay.sent'),
-          data: [20, 10, 45, 60, 59, 30, 50, 81],
-        },
-        {
-          name: this.$t('decay.created'),
-          data: [1000, 500, 700, 1000, 800, 500, 1000, 810],
-        },
-      ],
     }
   },
   props: {
diff --git a/frontend/src/views/Pages/GddGdtStatus.spec.js b/frontend/src/views/Pages/GddGdtStatus.spec.js
index 02b8d8574..8a16310c6 100644
--- a/frontend/src/views/Pages/GddGdtStatus.spec.js
+++ b/frontend/src/views/Pages/GddGdtStatus.spec.js
@@ -12,7 +12,7 @@ describe('GddStatus', () => {
 
   const propsData = {
     balance: 1234,
-    GdtBalance: 9876,
+    statusText: 'GDD',
   }
 
   const Wrapper = () => {
@@ -24,16 +24,6 @@ describe('GddStatus', () => {
       wrapper = Wrapper()
     })
 
-    describe('balance is loading', () => {
-      it('it displays em-dash as the ammount of GDD', () => {
-        expect(wrapper.find('div.gdd-status-gdd').text()).toEqual('— GDD')
-      })
-
-      it('it displays em-dash as the ammount of GDT', () => {
-        expect(wrapper.find('div.gdd-status-gdt').text()).toEqual('— GDT')
-      })
-    })
-
     describe('balance is loaded', () => {
       beforeEach(() => {
         wrapper.setProps({
@@ -42,11 +32,7 @@ describe('GddStatus', () => {
       })
 
       it('it displays the ammount of GDD', () => {
-        expect(wrapper.find('div.gdd-status-gdd').text()).toEqual('1234 GDD')
-      })
-
-      it('it displays the ammount of GDT', () => {
-        expect(wrapper.find('div.gdd-status-gdt').text()).toEqual('9876 GDT')
+        expect(wrapper.find('div.gdd-status-div').text()).toEqual('1234 GDD')
       })
     })
   })
diff --git a/frontend/src/views/Pages/GddGdtStatus.vue b/frontend/src/views/Pages/GddGdtStatus.vue
index 11a3019c5..20308690a 100644
--- a/frontend/src/views/Pages/GddGdtStatus.vue
+++ b/frontend/src/views/Pages/GddGdtStatus.vue
@@ -1,10 +1,7 @@
 <template>
   <div class="gdd-status">
-    <div class="p-0 gdd-status-gdd" v-if="gdd">
-      {{ pending ? '—' : $n(balance, 'decimal') }} GDD
-    </div>
-    <div :class="gdd ? 'p-0 text-right gdd-status-gdt' : 'p-0 gdd-status-gdt'" v-if="gdt">
-      {{ pending ? '—' : $n(GdtBalance, 'decimal') }} GDT
+    <div class="p-0 gdd-status-div">
+      {{ pending ? '—' : $n(balance, 'decimal') }} {{ statusText }}
     </div>
   </div>
 </template>
@@ -14,18 +11,13 @@ export default {
   name: 'GddStatus',
   props: {
     balance: { type: Number, default: 0 },
-    GdtBalance: { type: Number, default: 0 },
     pending: {
       type: Boolean,
       default: true,
     },
-    gdd: {
-      type: Boolean,
-      default: true,
-    },
-    gdt: {
-      type: Boolean,
-      default: true,
+    statusText: {
+      type: String,
+      default: '',
     },
   },
 }
diff --git a/frontend/src/views/Pages/SendOverview.spec.js b/frontend/src/views/Pages/SendOverview.spec.js
index 0bd43ba2d..f1a367c59 100644
--- a/frontend/src/views/Pages/SendOverview.spec.js
+++ b/frontend/src/views/Pages/SendOverview.spec.js
@@ -38,7 +38,7 @@ describe('SendOverview', () => {
       wrapper = Wrapper()
     })
 
-    it('has a status GDD line', () => {
+    it('has a status GDD line gdd-status-gdd', () => {
       expect(wrapper.find('div.gdd-status-gdd').exists()).toBeTruthy()
     })
 
diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index aaa16b550..165039765 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -4,11 +4,11 @@
       <b-row>
         <b-col class="bg-gray text-white text-center p-3">
           <gdd-status
+            class="gdd-status-gdd"
             v-if="showContext"
             :pending="pending"
             :balance="balance"
-            :gdt-balance="GdtBalance"
-            :gdt="false"
+            status-text="GDD"
           />
         </b-col>
       </b-row>
diff --git a/frontend/test/testSetup.js b/frontend/test/testSetup.js
index 4d8273723..9ae5777ec 100644
--- a/frontend/test/testSetup.js
+++ b/frontend/test/testSetup.js
@@ -12,7 +12,6 @@ import SideBar from '@/components/SidebarPlugin'
 import VueQrcode from 'vue-qrcode'
 
 import VueMoment from 'vue-moment'
-import VueApexCharts from 'vue-apexcharts'
 
 // import clickOutside from '@/directives/click-ouside.js'
 import { focus } from 'vue-focus'
@@ -45,7 +44,6 @@ global.localVue.use(RegeneratorRuntime)
 global.localVue.use(SideBar)
 global.localVue.use(VueQrcode)
 global.localVue.use(VueMoment)
-global.localVue.use(VueApexCharts)
 global.localVue.component('validation-provider', ValidationProvider)
 global.localVue.component('validation-observer', ValidationObserver)
 // global.localVue.directive('click-outside', clickOutside)
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index e0ac70818..490927518 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -2615,18 +2615,6 @@ anymatch@^3.0.3, anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-apexcharts@^3.28.3:
-  version "3.28.3"
-  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.28.3.tgz#22a6d9b234c82f6c2e1dd4aebba05b7603e2b1d2"
-  integrity sha512-EhghB2P27/Gjhwct8sSS0V63mdpRMx/ikH34dwUTqZQnkAEyOS/RKDmYjXBNA7zsAKBE/pThOdoTya6ADyk6zQ==
-  dependencies:
-    svg.draggable.js "^2.2.2"
-    svg.easing.js "^2.0.0"
-    svg.filter.js "^2.0.2"
-    svg.pathmorphing.js "^0.1.3"
-    svg.resize.js "^1.4.3"
-    svg.select.js "^3.0.1"
-
 apollo-boost@^0.4.9:
   version "0.4.9"
   resolved "https://registry.yarnpkg.com/apollo-boost/-/apollo-boost-0.4.9.tgz#ab3ba539c2ca944e6fd156583a1b1954b17a6791"
@@ -12612,61 +12600,6 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
-svg.draggable.js@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
-  integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
-  dependencies:
-    svg.js "^2.0.1"
-
-svg.easing.js@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
-  integrity sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=
-  dependencies:
-    svg.js ">=2.3.x"
-
-svg.filter.js@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
-  integrity sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=
-  dependencies:
-    svg.js "^2.2.5"
-
-svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
-  integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
-
-svg.pathmorphing.js@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
-  integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
-  dependencies:
-    svg.js "^2.4.0"
-
-svg.resize.js@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
-  integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
-  dependencies:
-    svg.js "^2.6.5"
-    svg.select.js "^2.1.2"
-
-svg.select.js@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
-  integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
-  dependencies:
-    svg.js "^2.2.5"
-
-svg.select.js@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
-  integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
-  dependencies:
-    svg.js "^2.6.5"
-
 svgo@^1.0.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
@@ -13441,11 +13374,6 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
-vue-apexcharts@^1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/vue-apexcharts/-/vue-apexcharts-1.6.2.tgz#0547826067f97e8ea67ca9423e524eb6669746ad"
-  integrity sha512-9HS3scJwWgKjmkcWIf+ndNDR0WytUJD8Ju0V2ZYcjYtlTLwJAf2SKUlBZaQTkDmwje/zMgulvZRi+MXmi+WkKw==
-
 vue-apollo@^3.0.7:
   version "3.0.7"
   resolved "https://registry.yarnpkg.com/vue-apollo/-/vue-apollo-3.0.7.tgz#97a031d45641faa4888a6d5a7f71c40834359704"

From fb4e0d849fd838d33dbd7f6385fcff679c9e7999 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 21 Oct 2021 02:22:45 +0200
Subject: [PATCH 18/35] fix test for router

---
 frontend/src/routes/router.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/router.test.js b/frontend/src/routes/router.test.js
index 8ec67373e..df4f9c229 100644
--- a/frontend/src/routes/router.test.js
+++ b/frontend/src/routes/router.test.js
@@ -49,8 +49,8 @@ describe('router', () => {
         expect(routes.find((r) => r.path === '/').redirect()).toEqual({ path: '/login' })
       })
 
-      it('has twelve routes defined', () => {
-        expect(routes).toHaveLength(13)
+      it('has fourteen routes defined', () => {
+        expect(routes).toHaveLength(14)
       })
 
       describe('overview', () => {

From d23ee1a6b4cee98274be9589ad496ee6b4ff4725 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 21 Oct 2021 02:30:32 +0200
Subject: [PATCH 19/35] clean up account overview

---
 frontend/src/views/Pages/AccountOverview.vue | 24 +-------------------
 1 file changed, 1 insertion(+), 23 deletions(-)

diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index d8ccfa638..f6c869379 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -7,7 +7,6 @@
             <b-col class="col-11 bg-gray text-white p-3">
               <gdd-status
                 class="gdd-status-gdd"
-                v-if="showContext"
                 :pending="pending"
                 :balance="balance"
                 status-text="GDD"
@@ -20,7 +19,6 @@
             <b-col class="bg-white text-gray p-3">
               <gdd-status
                 class="gdd-status-gdt"
-                v-if="showContext"
                 :pending="pending"
                 :balance="GdtBalance"
                 status-text="GDT"
@@ -30,20 +28,14 @@
         </b-col>
       </b-row>
       <br />
-
-      <template #transaction-form>
-        <transaction-form :balance="balance" @set-transaction="setTransaction"></transaction-form>
-      </template>
-
       <gdd-transaction-list
-        v-if="showContext"
         :transactions="transactions"
         :pageSize="5"
         :timestamp="timestamp"
         :transaction-count="transactionCount"
         @update-transactions="updateTransactions"
       />
-      <gdd-transaction-list-footer v-if="showContext" :count="transactionCount" />
+      <gdd-transaction-list-footer :count="transactionCount" />
     </b-container>
   </div>
 </template>
@@ -64,7 +56,6 @@ export default {
       timestamp: Date.now(),
       error: false,
       errorResult: '',
-      currentTransactionStep: 0,
       loading: false,
       datacollectionGdd: null,
       datacollectionGdt: null,
@@ -82,20 +73,7 @@ export default {
       default: true,
     },
   },
-  computed: {
-    showContext() {
-      return this.currentTransactionStep === 0
-    },
-  },
   methods: {
-    setTransaction(data) {
-      this.currentTransactionStep = 1
-    },
-
-    onReset() {
-      this.currentTransactionStep = 0
-    },
-
     updateTransactions(pagination) {
       this.$emit('update-transactions', pagination)
     },

From 5a931d62b0a16a64a6e1706d76ce05cf52009c4e Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 21 Oct 2021 09:48:03 +0200
Subject: [PATCH 20/35] test When no transactions are loaded, fix lint, fix
 locales

---
 frontend/src/locales/de.json                  |  2 +-
 .../GdtTransactionList.spec.js                | 54 ++++++++++++++++++-
 .../AccountOverview/GdtTransactionList.vue    |  4 +-
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index a7b41d655..d2042e941 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -99,7 +99,7 @@
     "formula": "Berechungsformel",
     "funding": "Zu den Förderbeiträgen",
     "gdt-received": "Gradido Transform (GDT) erhalten",
-    "no-transactions": "Du hast zur Zeit keine Transaktionen",
+    "no-transactions": "Du hast noch keine Gradido Transform (GDT).",
     "publisher": "Dein geworbenes Mitglied hat einen Beitrag bezahlt",
     "raise": "Erhöhung",
     "recruited-member": "Geworbenes Mitglied"
diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
index 8130a0d52..9b7e0a60f 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
@@ -4,6 +4,15 @@ import GdtTransactionList from './GdtTransactionList'
 
 const localVue = global.localVue
 
+const apolloMockNull = jest.fn().mockResolvedValue({
+  data: {
+    listGDTEntries: {
+      count: 0,
+      gdtEntries: [],
+    },
+  },
+})
+
 const apolloMock = jest.fn().mockResolvedValue({
   data: {
     listGDTEntries: {
@@ -52,9 +61,46 @@ const windowScrollToMock = jest.fn()
 window.scrollTo = windowScrollToMock
 
 const state = {
-  language: null,
+  language: 'en',
 }
 
+describe('GdtTransactionList ', () => {
+  let wrapper
+
+  const mocks = {
+    $store: {
+      state,
+      commit: jest.fn(),
+    },
+    $i18n: {
+      locale: 'en',
+    },
+    $t: jest.fn((t) => t),
+    $n: jest.fn((n) => n),
+    $d: jest.fn((d) => d),
+    $toasted: {
+      error: toastErrorMock,
+    },
+    $apollo: {
+      query: apolloMockNull,
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(GdtTransactionList, { localVue, mocks })
+  }
+
+  describe('mount - When no transactions are loaded', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the funding button ', () => {
+      expect(wrapper.find('.gdt-funding').exists()).toBe(true)
+    })
+  })
+})
+
 describe('GdtTransactionList', () => {
   let wrapper
 
@@ -81,7 +127,7 @@ describe('GdtTransactionList', () => {
     return mount(GdtTransactionList, { localVue, mocks })
   }
 
-  describe('mount', () => {
+  describe('mount - When transactions are loaded', () => {
     beforeEach(() => {
       wrapper = Wrapper()
     })
@@ -90,6 +136,10 @@ describe('GdtTransactionList', () => {
       expect(wrapper.find('div.gdt-transaction-list').exists()).toBeTruthy()
     })
 
+    it('renders the not funding button ', () => {
+      expect(wrapper.find('.gdt-funding').exists()).toBe(false)
+    })
+
     describe('server returns valid data', () => {
       it('calls the API', async () => {
         await wrapper.vm.$nextTick()
diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
index 0b6711a4d..f727d6297 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
@@ -4,7 +4,9 @@
       <div v-if="transactionGdtCount === 0" class="text-center">
         {{ $t('gdt.no-transactions') }}
         <hr />
-        <b-button :href="link" target="_blank">{{ $t('gdt.funding') }}</b-button>
+        <b-button class="gdt-funding" :href="link" target="_blank">
+          {{ $t('gdt.funding') }}
+        </b-button>
       </div>
       <div
         v-else

From 1e15b5d31279ba02ea4a9e62361ce564dc199de4 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 21 Oct 2021 10:24:05 +0200
Subject: [PATCH 21/35] test link to gradido.net/de/memberships/

---
 .../views/Pages/AccountOverview/GdtTransactionList.spec.js   | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
index 9b7e0a60f..359260db1 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
@@ -98,6 +98,11 @@ describe('GdtTransactionList ', () => {
     it('renders the funding button ', () => {
       expect(wrapper.find('.gdt-funding').exists()).toBe(true)
     })
+
+    it('links to https://gradido.net/en/memberships/ when clicking', async () => {
+      const link = 'https://gradido.net/' + state.language + '/memberships/'
+      expect(wrapper.find('.gdt-funding').attributes('href')).toBe(link)
+    })
   })
 })
 

From 21cb3c897f95d15cdb6a11ebc4f2d45600de170c Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Thu, 21 Oct 2021 13:17:46 +0200
Subject: [PATCH 22/35] Update
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
---
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index 85cf5740f..dc933328d 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -108,7 +108,7 @@ describe('DashboardLayoutGdd', () => {
 
       it('has second item "send" linked to sendoverview in navbar', () => {
         navbar.findAll('ul > a').at(1).trigger('click')
-        expect(wrapper.findAll('a').at(3).attributes('href')).toBe('/send')
+        expect(wrapper.findAll('ul > a').at(1).attributes('href')).toBe('/send')
       })
 
       it('has third item "transactions" in navbar', () => {

From 75f20378ac68a0d67328311392fd3add33cf69d0 Mon Sep 17 00:00:00 2001
From: Alexander Friedland <ogerly@users.noreply.github.com>
Date: Thu, 21 Oct 2021 16:48:03 +0200
Subject: [PATCH 23/35] Update
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
---
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index dc933328d..499e0ee9e 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -106,7 +106,7 @@ describe('DashboardLayoutGdd', () => {
         expect(navbar.findAll('ul > a').at(1).text()).toEqual('send')
       })
 
-      it('has second item "send" linked to sendoverview in navbar', () => {
+      it('has second item "send" linked to /send in navbar', () => {
         navbar.findAll('ul > a').at(1).trigger('click')
         expect(wrapper.findAll('ul > a').at(1).attributes('href')).toBe('/send')
       })

From 8f517f1b2655a383fa427f72c62e4dbc45f16a05 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 21 Oct 2021 22:02:09 +0200
Subject: [PATCH 24/35] GddGdtStatus.vue changed to component Status.vue

---
 .../GddGdtStatus.spec.js => components/Status.spec.js}    | 6 +++---
 .../Pages/GddGdtStatus.vue => components/Status.vue}      | 2 +-
 frontend/src/views/Layout/DashboardLayout_gdd.spec.js     | 2 +-
 frontend/src/views/Pages/AccountOverview.vue              | 8 ++++----
 frontend/src/views/Pages/SendOverview.vue                 | 6 +++---
 5 files changed, 12 insertions(+), 12 deletions(-)
 rename frontend/src/{views/Pages/GddGdtStatus.spec.js => components/Status.spec.js} (82%)
 rename frontend/src/{views/Pages/GddGdtStatus.vue => components/Status.vue} (95%)

diff --git a/frontend/src/views/Pages/GddGdtStatus.spec.js b/frontend/src/components/Status.spec.js
similarity index 82%
rename from frontend/src/views/Pages/GddGdtStatus.spec.js
rename to frontend/src/components/Status.spec.js
index 8a16310c6..4e203c315 100644
--- a/frontend/src/views/Pages/GddGdtStatus.spec.js
+++ b/frontend/src/components/Status.spec.js
@@ -1,9 +1,9 @@
 import { mount } from '@vue/test-utils'
-import GddStatus from './GddGdtStatus'
+import Status from './Status'
 
 const localVue = global.localVue
 
-describe('GddStatus', () => {
+describe('Status', () => {
   let wrapper
 
   const mocks = {
@@ -16,7 +16,7 @@ describe('GddStatus', () => {
   }
 
   const Wrapper = () => {
-    return mount(GddStatus, { localVue, mocks, propsData })
+    return mount(Status, { localVue, mocks, propsData })
   }
 
   describe('mount', () => {
diff --git a/frontend/src/views/Pages/GddGdtStatus.vue b/frontend/src/components/Status.vue
similarity index 95%
rename from frontend/src/views/Pages/GddGdtStatus.vue
rename to frontend/src/components/Status.vue
index 20308690a..7900763f7 100644
--- a/frontend/src/views/Pages/GddGdtStatus.vue
+++ b/frontend/src/components/Status.vue
@@ -8,7 +8,7 @@
 
 <script>
 export default {
-  name: 'GddStatus',
+  name: 'Status',
   props: {
     balance: { type: Number, default: 0 },
     pending: {
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index 499e0ee9e..09185ee3f 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -108,7 +108,7 @@ describe('DashboardLayoutGdd', () => {
 
       it('has second item "send" linked to /send in navbar', () => {
         navbar.findAll('ul > a').at(1).trigger('click')
-        expect(wrapper.findAll('ul > a').at(1).attributes('href')).toBe('/send')
+        expect(wrapper.findAll('a').at(3).attributes('href')).toBe('/send')
       })
 
       it('has third item "transactions" in navbar', () => {
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index f6c869379..00d4249a2 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -5,7 +5,7 @@
         <b-col class="col-6">
           <b-row>
             <b-col class="col-11 bg-gray text-white p-3">
-              <gdd-status
+              <status
                 class="gdd-status-gdd"
                 :pending="pending"
                 :balance="balance"
@@ -17,7 +17,7 @@
         <b-col class="col-6 text-right">
           <b-row>
             <b-col class="bg-white text-gray p-3">
-              <gdd-status
+              <status
                 class="gdd-status-gdt"
                 :pending="pending"
                 :balance="GdtBalance"
@@ -40,14 +40,14 @@
   </div>
 </template>
 <script>
-import GddStatus from './GddGdtStatus.vue'
+import Status from '../../components/Status.vue'
 import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
 
 export default {
   name: 'Overview',
   components: {
-    GddStatus,
+    Status,
     GddTransactionList,
     GddTransactionListFooter,
   },
diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index 165039765..595aac367 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -3,7 +3,7 @@
     <b-container fluid>
       <b-row>
         <b-col class="bg-gray text-white text-center p-3">
-          <gdd-status
+          <status
             class="gdd-status-gdd"
             v-if="showContext"
             :pending="pending"
@@ -41,7 +41,7 @@
   </div>
 </template>
 <script>
-import GddStatus from './GddGdtStatus.vue'
+import Status from '../../components/Status.vue'
 import GddSend from './SendOverview/GddSend.vue'
 
 import TransactionForm from './SendOverview/GddSend/TransactionForm.vue'
@@ -58,7 +58,7 @@ const EMPTY_TRANSACTION_DATA = {
 export default {
   name: 'SendOverview',
   components: {
-    GddStatus,
+    Status,
     GddSend,
 
     TransactionForm,

From 626dde9da1c6b7e625f28ed742b2d668e426ff39 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 21 Oct 2021 22:18:22 +0200
Subject: [PATCH 25/35] remove onReset() EMPTY_TRANSACTION_DATA

---
 frontend/src/views/Pages/SendOverview.spec.js | 6 +++---
 frontend/src/views/Pages/SendOverview.vue     | 1 -
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview.spec.js b/frontend/src/views/Pages/SendOverview.spec.js
index f1a367c59..f28ec6126 100644
--- a/frontend/src/views/Pages/SendOverview.spec.js
+++ b/frontend/src/views/Pages/SendOverview.spec.js
@@ -77,9 +77,9 @@ describe('SendOverview', () => {
         await wrapper.findComponent({ name: 'TransactionConfirmation' }).vm.$emit('on-reset')
         expect(wrapper.findComponent({ name: 'TransactionForm' }).exists()).toBeTruthy()
         expect(wrapper.vm.transactionData).toEqual({
-          email: '',
-          amount: 0,
-          memo: '',
+          email: 'user@example.org',
+          amount: 23.45,
+          memo: 'Make the best of it!',
         })
       })
 
diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index 595aac367..e82516386 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -115,7 +115,6 @@ export default {
       this.loading = false
     },
     onReset() {
-      this.transactionData = { ...EMPTY_TRANSACTION_DATA }
       this.currentTransactionStep = 0
     },
     updateTransactions(pagination) {

From 90dbf15cce36322528179910d6c6fd0652a96cc8 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 22 Oct 2021 08:04:35 +0200
Subject: [PATCH 26/35] test behavior when balance is pending

---
 frontend/src/components/Status.spec.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/components/Status.spec.js b/frontend/src/components/Status.spec.js
index 4e203c315..30dab4345 100644
--- a/frontend/src/components/Status.spec.js
+++ b/frontend/src/components/Status.spec.js
@@ -24,6 +24,12 @@ describe('Status', () => {
       wrapper = Wrapper()
     })
 
+    describe('balance is pending', () => {
+      it('it displays an en-dash', () => {
+        expect(wrapper.find('div.gdd-status-div').text()).toEqual('— GDD')
+      })
+    })
+
     describe('balance is loaded', () => {
       beforeEach(() => {
         wrapper.setProps({

From eff9d9fab6fce9710634920d2b37965b4b19faee Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 22 Oct 2021 08:14:03 +0200
Subject: [PATCH 27/35] unify selectors for navbar

---
 .../src/views/Layout/DashboardLayout_gdd.spec.js    | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
index 09185ee3f..b25640e5c 100644
--- a/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.spec.js
@@ -98,8 +98,7 @@ describe('DashboardLayoutGdd', () => {
       })
 
       it('has first item "overview" linked to overview in navbar', () => {
-        navbar.findAll('ul > a').at(0).trigger('click')
-        expect(wrapper.findComponent(RouterLinkStub).props(0).to).toBe('/overview')
+        expect(navbar.findAll('ul > a > a').at(0).attributes('href')).toBe('/overview')
       })
 
       it('has second item "send" in navbar', () => {
@@ -107,8 +106,7 @@ describe('DashboardLayoutGdd', () => {
       })
 
       it('has second item "send" linked to /send in navbar', () => {
-        navbar.findAll('ul > a').at(1).trigger('click')
-        expect(wrapper.findAll('a').at(3).attributes('href')).toBe('/send')
+        expect(wrapper.findAll('ul > a > a').at(1).attributes('href')).toBe('/send')
       })
 
       it('has third item "transactions" in navbar', () => {
@@ -116,16 +114,15 @@ describe('DashboardLayoutGdd', () => {
       })
 
       it('has third item "transactions" linked to transactions in navbar', async () => {
-        navbar.findAll('ul > a').at(2).trigger('click')
-        expect(wrapper.findAll('a').at(5).attributes('href')).toBe('/transactions')
+        expect(wrapper.findAll('ul > a > a').at(2).attributes('href')).toBe('/transactions')
       })
 
-      it('has fourth item "M profile" in navbar', () => {
+      it('has fourth item "My profile" in navbar', () => {
         expect(navbar.findAll('ul > a').at(3).text()).toEqual('site.navbar.my-profil')
       })
 
       it('has fourth item "My profile" linked to profile in navbar', async () => {
-        expect(wrapper.findAll('a').at(7).attributes('href')).toBe('/profile')
+        expect(wrapper.findAll('ul > a > a').at(3).attributes('href')).toBe('/profile')
       })
 
       it('has a link to the members area', () => {

From 0e64ca444acfcd69e8e21ebf843206aa2688f455 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 22 Oct 2021 08:25:40 +0200
Subject: [PATCH 28/35] test that updating the timestamp emits update
 transactions

---
 frontend/src/views/Pages/AccountOverview.spec.js | 8 ++++++++
 frontend/src/views/Pages/AccountOverview.vue     | 5 -----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/Pages/AccountOverview.spec.js b/frontend/src/views/Pages/AccountOverview.spec.js
index 785a2b372..efec185ac 100644
--- a/frontend/src/views/Pages/AccountOverview.spec.js
+++ b/frontend/src/views/Pages/AccountOverview.spec.js
@@ -35,5 +35,13 @@ describe('AccountOverview', () => {
     it('has a transactions table', () => {
       expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
     })
+
+    describe('timestamp updates', () => {
+      it('emits update transactions', async () => {
+        expect(wrapper.emitted('update-transactions')).toHaveLength(1)
+        await wrapper.setData({ timestamp: Date.now() })
+        expect(wrapper.emitted('update-transactions')).toHaveLength(2)
+      })
+    })
   })
 })
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 00d4249a2..5512a03d8 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -54,11 +54,6 @@ export default {
   data() {
     return {
       timestamp: Date.now(),
-      error: false,
-      errorResult: '',
-      loading: false,
-      datacollectionGdd: null,
-      datacollectionGdt: null,
     }
   },
   props: {

From e3d99864da1467bd541a214f8b059fc79297a772 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 22 Oct 2021 08:29:24 +0200
Subject: [PATCH 29/35] remove unused stub

---
 frontend/src/views/Pages/AccountOverview.spec.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/views/Pages/AccountOverview.spec.js b/frontend/src/views/Pages/AccountOverview.spec.js
index efec185ac..c55317333 100644
--- a/frontend/src/views/Pages/AccountOverview.spec.js
+++ b/frontend/src/views/Pages/AccountOverview.spec.js
@@ -17,7 +17,6 @@ describe('AccountOverview', () => {
     return mount(AccountOverview, {
       localVue,
       mocks,
-      stubs: ['apexchart'],
     })
   }
 

From abfe2862b45e688ded417450a2e68f6f90933ecb Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 22 Oct 2021 08:38:54 +0200
Subject: [PATCH 30/35] remove unused method

---
 frontend/src/views/Pages/SendOverview.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/frontend/src/views/Pages/SendOverview.vue b/frontend/src/views/Pages/SendOverview.vue
index e82516386..ee8537833 100644
--- a/frontend/src/views/Pages/SendOverview.vue
+++ b/frontend/src/views/Pages/SendOverview.vue
@@ -117,9 +117,6 @@ export default {
     onReset() {
       this.currentTransactionStep = 0
     },
-    updateTransactions(pagination) {
-      this.$emit('update-transactions', pagination)
-    },
   },
 }
 </script>

From db6cea4cbdb03e077962808af8d7c41574ff660a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 22 Oct 2021 08:58:37 +0200
Subject: [PATCH 31/35] only one describe block on top level

---
 .../GdtTransactionList.spec.js                | 125 +++++++-----------
 1 file changed, 51 insertions(+), 74 deletions(-)

diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
index 359260db1..77507cb69 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.spec.js
@@ -4,7 +4,7 @@ import GdtTransactionList from './GdtTransactionList'
 
 const localVue = global.localVue
 
-const apolloMockNull = jest.fn().mockResolvedValue({
+const apolloMock = jest.fn().mockResolvedValue({
   data: {
     listGDTEntries: {
       count: 0,
@@ -13,48 +13,6 @@ const apolloMockNull = jest.fn().mockResolvedValue({
   },
 })
 
-const apolloMock = jest.fn().mockResolvedValue({
-  data: {
-    listGDTEntries: {
-      count: 4,
-      gdtEntries: [
-        {
-          amount: 100,
-          gdt: 1700,
-          factor: 17,
-          comment: '',
-          date: '2021-05-02T17:20:11+00:00',
-          gdtEntryType: GdtEntryType.FORM,
-        },
-        {
-          amount: 1810,
-          gdt: 362,
-          factor: 0.2,
-          comment: 'Dezember 20',
-          date: '2020-12-31T12:00:00+00:00',
-          gdtEntryType: GdtEntryType.GLOBAL_MODIFICATOR,
-        },
-        {
-          amount: 100,
-          gdt: 1700,
-          factor: 17,
-          comment: '',
-          date: '2020-05-07T17:00:00+00:00',
-          gdtEntryType: GdtEntryType.FORM,
-        },
-        {
-          amount: 100,
-          gdt: 110,
-          factor: 22,
-          comment: '',
-          date: '2020-04-10T13:28:00+00:00',
-          gdtEntryType: GdtEntryType.ELOPAGE_PUBLISHER,
-        },
-      ],
-    },
-  },
-})
-
 const toastErrorMock = jest.fn()
 const windowScrollToMock = jest.fn()
 
@@ -82,7 +40,7 @@ describe('GdtTransactionList ', () => {
       error: toastErrorMock,
     },
     $apollo: {
-      query: apolloMockNull,
+      query: apolloMock,
     },
   }
 
@@ -100,40 +58,59 @@ describe('GdtTransactionList ', () => {
     })
 
     it('links to https://gradido.net/en/memberships/ when clicking', async () => {
-      const link = 'https://gradido.net/' + state.language + '/memberships/'
-      expect(wrapper.find('.gdt-funding').attributes('href')).toBe(link)
+      expect(wrapper.find('.gdt-funding').attributes('href')).toBe(
+        'https://gradido.net/' + state.language + '/memberships/',
+      )
     })
   })
-})
-
-describe('GdtTransactionList', () => {
-  let wrapper
-
-  const mocks = {
-    $store: {
-      state,
-      commit: jest.fn(),
-    },
-    $i18n: {
-      locale: 'en',
-    },
-    $t: jest.fn((t) => t),
-    $n: jest.fn((n) => n),
-    $d: jest.fn((d) => d),
-    $toasted: {
-      error: toastErrorMock,
-    },
-    $apollo: {
-      query: apolloMock,
-    },
-  }
-
-  const Wrapper = () => {
-    return mount(GdtTransactionList, { localVue, mocks })
-  }
 
   describe('mount - When transactions are loaded', () => {
     beforeEach(() => {
+      apolloMock.mockResolvedValue({
+        data: {
+          listGDTEntries: {
+            count: 4,
+            gdtEntries: [
+              {
+                id: 1,
+                amount: 100,
+                gdt: 1700,
+                factor: 17,
+                comment: '',
+                date: '2021-05-02T17:20:11+00:00',
+                gdtEntryType: GdtEntryType.FORM,
+              },
+              {
+                id: 2,
+                amount: 1810,
+                gdt: 362,
+                factor: 0.2,
+                comment: 'Dezember 20',
+                date: '2020-12-31T12:00:00+00:00',
+                gdtEntryType: GdtEntryType.GLOBAL_MODIFICATOR,
+              },
+              {
+                id: 3,
+                amount: 100,
+                gdt: 1700,
+                factor: 17,
+                comment: '',
+                date: '2020-05-07T17:00:00+00:00',
+                gdtEntryType: GdtEntryType.FORM,
+              },
+              {
+                id: 4,
+                amount: 100,
+                gdt: 110,
+                factor: 22,
+                comment: '',
+                date: '2020-04-10T13:28:00+00:00',
+                gdtEntryType: GdtEntryType.ELOPAGE_PUBLISHER,
+              },
+            ],
+          },
+        },
+      })
       wrapper = Wrapper()
     })
 
@@ -141,7 +118,7 @@ describe('GdtTransactionList', () => {
       expect(wrapper.find('div.gdt-transaction-list').exists()).toBeTruthy()
     })
 
-    it('renders the not funding button ', () => {
+    it('does not render the funding button ', () => {
       expect(wrapper.find('.gdt-funding').exists()).toBe(false)
     })
 

From ba3b1dc69a3c372cb0eaf9f0a1a32bf3cf5a4b9b Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Sat, 23 Oct 2021 15:30:14 +0200
Subject: [PATCH 32/35] Withdrew blue border of safari on the gdd list items.

---
 .../src/views/Pages/AccountOverview/GddTransactionList.vue    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index 11dc6ee00..1e24c14d0 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -198,4 +198,8 @@ export default {
   padding-left: 0px;
   padding-right: 0px;
 }
+
+.gdd-transaction-list-item {
+  outline: none !important;
+}
 </style>

From 4ff13d3959750e925c76ef543170d882014b23f9 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Sat, 23 Oct 2021 15:30:25 +0200
Subject: [PATCH 33/35] Withdrew blue border of safari on the gdt list items.

---
 .../src/views/Pages/AccountOverview/GdtTransactionList.vue    | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
index f727d6297..a96e592aa 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
@@ -102,4 +102,8 @@ export default {
 .nav-tabs .nav-item.show .nav-link {
   background-color: #f8f9fe38;
 }
+
+.gdt-transaction-list-item {
+  outline: none !important;
+}
 </style>

From 0402bdbc86d7ec62d5debd3e3e99fa591e1d72bf Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Sat, 23 Oct 2021 15:30:58 +0200
Subject: [PATCH 34/35] Withdrew blue border of safari on the GDD and GDT tab.

---
 frontend/src/views/Pages/UserProfileTransactionList.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/views/Pages/UserProfileTransactionList.vue b/frontend/src/views/Pages/UserProfileTransactionList.vue
index 5f52bb540..f9240008d 100644
--- a/frontend/src/views/Pages/UserProfileTransactionList.vue
+++ b/frontend/src/views/Pages/UserProfileTransactionList.vue
@@ -62,4 +62,8 @@ export default {
   background-color: aquamarine;
   font-size: larger;
 }
+
+.nav-tabs > li > a {
+  outline: none !important;
+}
 </style>

From f482eb7db6e7ff8ccc9d1841b1689bfd6f85ecae Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 26 Oct 2021 07:52:49 +0200
Subject: [PATCH 35/35] mock console error only in the test for the error

---
 frontend/src/components/Transaction.spec.js         | 10 ++++------
 frontend/src/components/TransactionCollapse.spec.js | 10 ++++------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Transaction.spec.js b/frontend/src/components/Transaction.spec.js
index d0bb009b7..aaad023e0 100644
--- a/frontend/src/components/Transaction.spec.js
+++ b/frontend/src/components/Transaction.spec.js
@@ -2,16 +2,10 @@ import { mount } from '@vue/test-utils'
 import Transaction from './Transaction'
 import Vue from 'vue'
 
-// disable throwing Errors on warnings to catch the warning
-Vue.config.warnHandler = (w) => {}
-
 const localVue = global.localVue
 
 const consoleErrorMock = jest.fn()
 
-// eslint-disable-next-line no-console
-console.error = consoleErrorMock
-
 describe('Transaction', () => {
   let wrapper
 
@@ -43,6 +37,10 @@ describe('Transaction', () => {
 
     describe('no valid GDT entry type', () => {
       beforeEach(async () => {
+        // disable throwing Errors on warnings to catch the warning
+        Vue.config.warnHandler = (w) => {}
+        // eslint-disable-next-line no-console
+        console.error = consoleErrorMock
         await wrapper.setProps({ gdtEntryType: 'NOT_VALID' })
       })
 
diff --git a/frontend/src/components/TransactionCollapse.spec.js b/frontend/src/components/TransactionCollapse.spec.js
index c25bb5aad..58385700a 100644
--- a/frontend/src/components/TransactionCollapse.spec.js
+++ b/frontend/src/components/TransactionCollapse.spec.js
@@ -4,16 +4,10 @@ import { GdtEntryType } from '../graphql/enums'
 
 import Vue from 'vue'
 
-// disable throwing Errors on warnings to catch the warning
-Vue.config.warnHandler = (w) => {}
-
 const localVue = global.localVue
 
 const consoleErrorMock = jest.fn()
 
-// eslint-disable-next-line no-console
-console.error = consoleErrorMock
-
 describe('TransactionCollapse', () => {
   let wrapper
 
@@ -28,6 +22,10 @@ describe('TransactionCollapse', () => {
 
   describe('no valid GDT entry type', () => {
     beforeEach(async () => {
+      // disable throwing Errors on warnings to catch the warning
+      Vue.config.warnHandler = (w) => {}
+      // eslint-disable-next-line no-console
+      console.error = consoleErrorMock
       const propsData = {
         amount: 100,
         gdt: 110,