From ae75ba74872013fd70efc18a3ab4fe401699ddfd Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Tue, 1 Mar 2022 21:33:02 +0100
Subject: [PATCH] interim status of the revised transaction list

---
 frontend/src/components/DecayInformation.vue  | 207 +++++++++--------
 .../transaction-slots/TransactionCreation.vue | 147 ++++++++++++
 .../transaction-slots/TransactionDecay.vue    | 116 ++++++++++
 .../transaction-slots/TransactionReceive.vue  | 147 ++++++++++++
 .../transaction-slots/TransactionSend.vue     | 147 ++++++++++++
 frontend/src/graphql/queries.js               |   1 +
 .../AccountOverview/GddTransactionList.vue    | 211 ++++--------------
 7 files changed, 715 insertions(+), 261 deletions(-)
 create mode 100644 frontend/src/components/transaction-slots/TransactionCreation.vue
 create mode 100644 frontend/src/components/transaction-slots/TransactionDecay.vue
 create mode 100644 frontend/src/components/transaction-slots/TransactionReceive.vue
 create mode 100644 frontend/src/components/transaction-slots/TransactionSend.vue

diff --git a/frontend/src/components/DecayInformation.vue b/frontend/src/components/DecayInformation.vue
index 066eec5e1..807b9c516 100644
--- a/frontend/src/components/DecayInformation.vue
+++ b/frontend/src/components/DecayInformation.vue
@@ -5,104 +5,121 @@
     </span>
 
     <div v-if="decaytyp === 'new' || decaytyp === 'decayLastTransaction'">
-      <div class="d-flex">
-        <div style="width: 100%" class="text-center pb-3">
-          <b-icon icon="droplet-half" height="12" class="mb-2" />
-          <b>{{ $t('decay.calculation_decay') }}</b>
-        </div>
+      <!-- if decay.start === null - Wenn kein decay angegeben dan ist es die erste Transaktion -->
+      <div v-if="decay.start === null" class="mt-3 mb-3 text-center">
+        <b>{{ $t('decay.first_transaction') }}</b>
       </div>
 
-      <b-row>
-        <b-col cols="6" class="text-right">
-          <!-- <div v-if="!decay.decayStartBlock">{{ $t('decay.last_transaction') }}</div> -->
-          <div>{{ $t('decay.last_transaction') }}</div>
-        </b-col>
-        <b-col cols="6">
-          <div>
-            <span v-if="decay.start">
-              {{ $d(new Date(decay.start), 'long') }}
-              {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-            </span>
-          </div>
-        </b-col>
-      </b-row>
-      <b-row>
-        <b-col cols="6" class="text-right">
-          <!-- <div v-if="!decay.decayStartBlock">{{ $t('decay.past_time') }}</div> -->
-          <div>{{ $t('decay.past_time') }}</div>
-        </b-col>
-        <b-col cols="6">
-          <span v-if="duration">
-            <span v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</span>
-            <span v-if="duration.months > 0">{{ duration.months }} {{ $t('decay.months') }},</span>
-            <span v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</span>
-            <span v-if="duration.hours > 0">{{ duration.hours }} {{ $t('decay.hours') }},</span>
-            <span v-if="duration.minutes > 0">
-              {{ duration.minutes }} {{ $t('decay.minutes') }},
-            </span>
-            <span v-if="duration.seconds > 0">
-              {{ duration.seconds }} {{ $t('decay.seconds') }}
-            </span>
-          </span>
-        </b-col>
-      </b-row>
+      <!-- if balanceDate <  decayStartBlock - Wenn die transaktion vor dem einführen der dacay function liegt. -->
+      <div
+        v-else-if="new Date(balanceDate).getTime() < new Date(decayStartBlock).getTime()"
+        class="mt-3 mb-3 text-center"
+      >
+        <b>{{ $t('decay.befor_startblock_transaction') }}</b>
+      </div>
 
-      <!-- Decay-->
-      <b-row>
-        <b-col cols="6" class="text-right">
-          <div>{{ $t('decay.decay') }}</div>
-        </b-col>
-        <b-col cols="6">
-          <div v-if="decaytyp === 'new'">- {{ $n(decay.decay, 'decimal') }}</div>
-          <div v-if="decaytyp === 'decayLastTransaction'">
-            {{ $n(decay.decay + amount, 'decimal') }} GDD - {{ $n(decay.decay, 'decimal') }} GDD =
-            <b>{{ $n(amount, 'decimal') }} GDD</b>
+      <div v-else>
+        <div class="d-flex">
+          <div style="width: 100%" class="text-center pb-3">
+            <b-icon icon="droplet-half" height="12" class="mb-2" />
+            <b>{{ $t('decay.calculation_decay') }}</b>
           </div>
-        </b-col>
-      </b-row>
-      <hr class="mt-2 mb-2" />
-      <b-row v-if="decaytyp === 'new'">
-        <b-col class="text-center pt-3 pb-2">
-          <b>{{ $t('decay.calculation_total') }}</b>
-        </b-col>
-      </b-row>
-      <!-- Type-->
-      <b-row v-if="decaytyp === 'new'">
-        <b-col cols="6" class="text-right">
-          <div v-if="typeId === 'SEND'">{{ $t('decay.sent') }}</div>
-          <div v-if="typeId === 'RECEIVE'">{{ $t('decay.received') }}</div>
-        </b-col>
-        <b-col cols="6">
-          <div v-if="typeId === 'SEND'">{{ $n(amount, 'decimal') }}</div>
-          <div v-if="typeId === 'RECEIVE'">{{ $n(amount, 'decimal') }}</div>
-        </b-col>
-      </b-row>
-      <!-- Decay-->
-      <b-row v-if="decaytyp === 'new'">
-        <b-col cols="6" class="text-right">
-          <div>{{ $t('decay.decay') }}</div>
-        </b-col>
-        <b-col cols="6">
-          <div>{{ $n(decay.decay, 'decimal') }}</div>
-        </b-col>
-      </b-row>
-      <!-- Total-->
-      <b-row v-if="decaytyp === 'new'">
-        <b-col cols="6" class="text-right">
-          <div>{{ $t('decay.total') }}</div>
-        </b-col>
-        <b-col cols="6">
-          <div v-if="typeId === 'SEND'">
-            <b>{{ $n(amount + decay.decay, 'decimal') }}</b>
-          </div>
-          <div v-if="typeId === 'RECEIVE'">
-            <b>{{ $n(amount - decay.decay, 'decimal') }}</b>
-          </div>
-          <div v-if="typeId === 'CREATION'">
-            <b>{{ $n(amount - decay.decay, 'decimal') }}</b>
-          </div>
-        </b-col>
-      </b-row>
+        </div>
+
+        <b-row>
+          <b-col cols="6" class="text-right">
+            <!-- <div v-if="!decay.decayStartBlock">{{ $t('decay.last_transaction') }}</div> -->
+            <div>{{ $t('decay.last_transaction') }}</div>
+          </b-col>
+          <b-col cols="6">
+            <div>
+              <span v-if="decay.start">
+                {{ $d(new Date(decay.start), 'long') }}
+                {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+              </span>
+            </div>
+          </b-col>
+        </b-row>
+        <b-row>
+          <b-col cols="6" class="text-right">
+            <!-- <div v-if="!decay.decayStartBlock">{{ $t('decay.past_time') }}</div> -->
+            <div>{{ $t('decay.past_time') }}</div>
+          </b-col>
+          <b-col cols="6">
+            <span v-if="duration">
+              <span v-if="duration.years > 0">{{ duration.years }} {{ $t('decay.year') }},</span>
+              <span v-if="duration.months > 0">
+                {{ duration.months }} {{ $t('decay.months') }},
+              </span>
+              <span v-if="duration.days > 0">{{ duration.days }} {{ $t('decay.days') }},</span>
+              <span v-if="duration.hours > 0">{{ duration.hours }} {{ $t('decay.hours') }},</span>
+              <span v-if="duration.minutes > 0">
+                {{ duration.minutes }} {{ $t('decay.minutes') }},
+              </span>
+              <span v-if="duration.seconds > 0">
+                {{ duration.seconds }} {{ $t('decay.seconds') }}
+              </span>
+            </span>
+          </b-col>
+        </b-row>
+
+        <!-- Decay-->
+        <b-row>
+          <b-col cols="6" class="text-right">
+            <div>{{ $t('decay.decay') }}</div>
+          </b-col>
+          <b-col cols="6">
+            <div v-if="decaytyp === 'new'">- {{ $n(decay.decay, 'decimal') }}</div>
+            <div v-if="decaytyp === 'decayLastTransaction'">
+              {{ $n(decay.decay + amount, 'decimal') }} GDD - {{ $n(decay.decay, 'decimal') }} GDD =
+              <b>{{ $n(amount, 'decimal') }} GDD</b>
+            </div>
+          </b-col>
+        </b-row>
+        <hr class="mt-2 mb-2" />
+        <b-row v-if="decaytyp === 'new'">
+          <b-col class="text-center pt-3 pb-2">
+            <b>{{ $t('decay.calculation_total') }}</b>
+          </b-col>
+        </b-row>
+        <!-- Type-->
+        <b-row v-if="decaytyp === 'new'">
+          <b-col cols="6" class="text-right">
+            <div v-if="typeId === 'SEND'">{{ $t('decay.sent') }}</div>
+            <div v-if="typeId === 'RECEIVE'">{{ $t('decay.received') }}</div>
+          </b-col>
+          <b-col cols="6">
+            <div v-if="typeId === 'SEND'">{{ $n(amount, 'decimal') }}</div>
+            <div v-if="typeId === 'RECEIVE'">{{ $n(amount, 'decimal') }}</div>
+          </b-col>
+        </b-row>
+        <!-- Decay-->
+        <b-row v-if="decaytyp === 'new'">
+          <b-col cols="6" class="text-right">
+            <div>{{ $t('decay.decay') }}</div>
+          </b-col>
+          <b-col cols="6">
+            <div>{{ $n(decay.decay, 'decimal') }}</div>
+          </b-col>
+        </b-row>
+        <!-- Total-->
+        <b-row v-if="decaytyp === 'new'">
+          <b-col cols="6" class="text-right">
+            <div>{{ $t('decay.total') }}</div>
+          </b-col>
+          <b-col cols="6">
+            <div v-if="typeId === 'SEND'">
+              <b>{{ $n(amount + decay.decay, 'decimal') }}</b>
+            </div>
+            <div v-if="typeId === 'RECEIVE'">
+              <b>{{ $n(amount - decay.decay, 'decimal') }}</b>
+            </div>
+            <div v-if="typeId === 'CREATION'">
+              <b>{{ $n(amount - decay.decay, 'decimal') }}</b>
+            </div>
+          </b-col>
+        </b-row>
+      </div>
     </div>
   </div>
 </template>
@@ -112,6 +129,8 @@ export default {
   props: {
     amount: { type: String, default: '0' },
     typeId: { type: String, default: '' },
+    balanceDate: { type: String },
+    decayStartBlock: { type: String },
     decay: {
       decay: '',
       start: 0,
diff --git a/frontend/src/components/transaction-slots/TransactionCreation.vue b/frontend/src/components/transaction-slots/TransactionCreation.vue
new file mode 100644
index 000000000..8f11bb2a9
--- /dev/null
+++ b/frontend/src/components/transaction-slots/TransactionCreation.vue
@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <div @click="visible = !visible">
+      {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
+      {{ memo }}, {{ properties }}
+
+      <!-- Collaps Icon  -->
+      <div class="text-right" style="width: 95%; position: absolute">
+        <b-icon
+          :icon="visible ? 'caret-up-square' : 'caret-down-square'"
+          :class="visible ? 'text-black' : 'text-muted'"
+        />
+      </div>
+
+      <div>
+        <b-row>
+          <!-- ICON  -->
+          <b-col cols="1">
+            <div class="gdd-transaction-list-item-icon">
+              <b-icon :icon="properties.icon" :class="properties.class" />
+            </div>
+          </b-col>
+
+          <b-col cols="11">
+            <!-- Betrag / Name Email -->
+            <b-row>
+              <b-col cols="5">
+                <div class="text-right">
+                  <span class="gdd-transaction-list-item-operator">
+                    {{ properties.operator }}
+                  </span>
+                  <span class="gdd-transaction-list-item-amount">
+                    {{ $n(amount, 'decimal') }}
+                  </span>
+                </div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-item-name">
+                  {{
+                    typeId !== 'DECAY'
+                      ? linkedUser.firstName + ' ' + linkedUser.lastName
+                      : $t('decay.decay_since_last_transaction')
+                  }}
+                </div>
+              </b-col>
+            </b-row>
+
+            <!-- Nachricht Memo -->
+            <b-row>
+              <b-col cols="5">
+                <div class="text-right">{{ $t('form.memo') }}</div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-message">{{ memo }}</div>
+              </b-col>
+            </b-row>
+
+            <!-- Datum -->
+            <b-row v-if="typeId !== 'DECAY'">
+              <b-col cols="5">
+                <div class="text-right">{{ $t('form.date') }}</div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-item-date">
+                  {{ $d(new Date(balanceDate), 'long') }}
+                  {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+                </div>
+              </b-col>
+            </b-row>
+
+            <!-- Decay -->
+            <b-row v-if="decay">
+              <b-col cols="5">
+                <div class="text-right">
+                  <b-icon v-if="typeId != 'DECAY'" icon="droplet-half" height="15" class="mb-1" />
+                </div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-item-decay">
+                  <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+                </div>
+              </b-col>
+            </b-row>
+          </b-col>
+        </b-row>
+      </div>
+
+      <b-collapse class="pb-4" v-model="visible">
+        <decay-information
+          decaytyp="new"
+          :amount="amount"
+          :decay="decay"
+          :typeId="typeId"
+          :balanceDate="balanceDate"
+        />
+      </b-collapse>
+    </div>
+  </div>
+</template>
+<script>
+import DecayInformation from '../DecayInformation'
+
+export default {
+  name: 'slot-creation',
+  components: {
+    DecayInformation,
+  },
+  props: {
+    amount: {
+      type: String,
+    },
+    balance: {
+      type: String,
+    },
+    balanceDate: {
+      type: String,
+    },
+    decay: {
+      type: Object,
+    },
+    id: {
+      type: Number,
+    },
+    linkedUser: {
+      type: Object,
+    },
+    memo: {
+      type: String,
+    },
+    typeId: {
+      type: String,
+    },
+    properties: {
+      type: Object,
+    },
+    getCollapseState: {
+      type: Boolean,
+    },
+    decayStartBlock: { type: Date },
+  },
+  data() {
+    return {
+      visible: false,
+    }
+  },
+}
+</script>
diff --git a/frontend/src/components/transaction-slots/TransactionDecay.vue b/frontend/src/components/transaction-slots/TransactionDecay.vue
new file mode 100644
index 000000000..9245a532e
--- /dev/null
+++ b/frontend/src/components/transaction-slots/TransactionDecay.vue
@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <div @click="visible = !visible">
+      <!-- Collaps Icon  -->
+      <div class="text-right" style="width: 95%; position: absolute">
+        <b-icon
+          :icon="visible ? 'caret-up-square' : 'caret-down-square'"
+          :class="visible ? 'text-black' : 'text-muted'"
+        />
+      </div>
+
+      <div>
+        <b-row>
+          <!-- ICON  -->
+          <b-col cols="1">
+            <div class="gdd-transaction-list-item-icon">
+              <b-icon :icon="properties.icon" :class="properties.class" />
+            </div>
+          </b-col>
+
+          <b-col cols="11">
+            <!-- Betrag / Name Email -->
+            <b-row>
+              <b-col cols="5">
+                <div class="text-right">
+                  <span class="gdd-transaction-list-item-amount">
+                    {{ $n(amount, 'decimal') }}
+                  </span>
+                </div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-item-name">
+                  {{
+                    typeId !== 'DECAY'
+                      ? linkedUser.firstName + ' ' + linkedUser.lastName
+                      : $t('decay.decay_since_last_transaction')
+                  }}
+                </div>
+              </b-col>
+            </b-row>
+          </b-col>
+        </b-row>
+      </div>
+
+      <b-collapse class="pb-4 pt-5" v-model="visible">
+        <div class="d-flex">
+          <div style="width: 100%" class="text-center pb-3">
+            <b-icon icon="droplet-half" height="12" class="mb-2" />
+            <b>{{ $t('decay.calculation_decay') }}</b>
+          </div>
+        </div>
+
+        <b-row>
+          <b-col cols="6" class="text-right">
+            <div>{{ $t('decay.decay') }}</div>
+          </b-col>
+          <b-col cols="6">
+            <div>
+              {{ Number(balance) + Number(decay.decay) * -1 }} :::: {{ Number(decay.decay) }} :::::
+              {{ $n(Number(balance) + Number(decay.decay) * -1, 'decimal') }}
+              GDD - {{ $n(Number(decay.decay) * -1, 'decimal') }} GDD =
+              <b>{{ $n(Number(balance), 'decimal') }} GDD</b>
+            </div>
+          </b-col>
+        </b-row>
+        <hr />
+        {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
+        {{ memo }}, {{ properties }},, {{ visible }}
+      </b-collapse>
+    </div>
+  </div>
+</template>
+<script>
+// import DecayInformation from '../DecayInformation'
+
+export default {
+  name: 'slot-decay',
+  components: {
+    // DecayInformation,
+  },
+  props: {
+    amount: {
+      type: String,
+    },
+    balance: {
+      type: String,
+    },
+    balanceDate: {
+      type: String,
+    },
+    decay: {
+      type: Object,
+    },
+    id: {
+      type: Number,
+    },
+    linkedUser: {
+      type: Object,
+    },
+    memo: {
+      type: String,
+    },
+    typeId: {
+      type: String,
+    },
+    properties: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+    }
+  },
+}
+</script>
diff --git a/frontend/src/components/transaction-slots/TransactionReceive.vue b/frontend/src/components/transaction-slots/TransactionReceive.vue
new file mode 100644
index 000000000..db6b7e18a
--- /dev/null
+++ b/frontend/src/components/transaction-slots/TransactionReceive.vue
@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <div @click="visible = !visible">
+      <!-- Collaps Icon  -->
+      <div class="text-right" style="width: 95%; position: absolute">
+        <b-icon
+          :icon="visible ? 'caret-up-square' : 'caret-down-square'"
+          :class="visible ? 'text-black' : 'text-muted'"
+        />
+      </div>
+
+      <div>
+        <b-row>
+          <!-- ICON  -->
+          <b-col cols="1">
+            <div class="gdd-transaction-list-item-icon">
+              <b-icon :icon="properties.icon" :class="properties.class" />
+            </div>
+          </b-col>
+
+          <b-col cols="11">
+            <!-- Betrag / Name Email -->
+            <b-row>
+              <b-col cols="5">
+                <div class="text-right">
+                  <span class="gdd-transaction-list-item-operator">
+                    {{ properties.operator }}
+                  </span>
+                  <span class="gdd-transaction-list-item-amount">
+                    {{ $n(amount, 'decimal') }}
+                  </span>
+                </div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-item-name">
+                  {{
+                    typeId !== 'DECAY'
+                      ? linkedUser.firstName + ' ' + linkedUser.lastName
+                      : $t('decay.decay_since_last_transaction')
+                  }}
+                </div>
+              </b-col>
+            </b-row>
+
+            <!-- Nachricht Memo -->
+            <b-row>
+              <b-col cols="5">
+                <div class="text-right">{{ $t('form.memo') }}</div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-message">{{ memo }}</div>
+              </b-col>
+            </b-row>
+
+            <!-- Datum -->
+            <b-row v-if="typeId !== 'DECAY'">
+              <b-col cols="5">
+                <div class="text-right">{{ $t('form.date') }}</div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-item-date">
+                  {{ $d(new Date(balanceDate), 'long') }}
+                  {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+                </div>
+              </b-col>
+            </b-row>
+
+            <!-- Decay -->
+            <b-row v-if="decay">
+              <b-col cols="5">
+                <div class="text-right">
+                  <b-icon v-if="typeId != 'DECAY'" icon="droplet-half" height="15" class="mb-1" />
+                </div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-item-decay">
+                  <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+                </div>
+              </b-col>
+            </b-row>
+          </b-col>
+        </b-row>
+      </div>
+
+      <b-collapse class="pb-4" v-model="visible">
+        <decay-information
+          decaytyp="new"
+          :amount="amount"
+          :decay="decay"
+          :typeId="typeId"
+          :balanceDate="balanceDate"
+        />
+        <hr />
+        {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
+        {{ memo }}, {{ properties }}
+      </b-collapse>
+    </div>
+  </div>
+</template>
+<script>
+import DecayInformation from '../DecayInformation'
+
+export default {
+  name: 'slot-receive',
+  components: {
+    DecayInformation,
+  },
+  props: {
+    amount: {
+      type: String,
+    },
+    balance: {
+      type: String,
+    },
+    balanceDate: {
+      type: String,
+    },
+    decay: {
+      type: Object,
+    },
+    id: {
+      type: Number,
+    },
+    linkedUser: {
+      type: Object,
+    },
+    memo: {
+      type: String,
+    },
+    typeId: {
+      type: String,
+    },
+    properties: {
+      type: Object,
+    },
+    getCollapseState: {
+      type: Boolean,
+    },
+    decayStartBlock: { type: Date },
+  },
+  data() {
+    return {
+      visible: false,
+    }
+  },
+}
+</script>
diff --git a/frontend/src/components/transaction-slots/TransactionSend.vue b/frontend/src/components/transaction-slots/TransactionSend.vue
new file mode 100644
index 000000000..3ee4b3bf0
--- /dev/null
+++ b/frontend/src/components/transaction-slots/TransactionSend.vue
@@ -0,0 +1,147 @@
+<template>
+  <div>
+    <div @click="visible = !visible">
+      <!-- Collaps Icon  -->
+      <div class="text-right" style="width: 95%; position: absolute">
+        <b-icon
+          :icon="visible ? 'caret-up-square' : 'caret-down-square'"
+          :class="visible ? 'text-black' : 'text-muted'"
+        />
+      </div>
+
+      <div>
+        <b-row>
+          <!-- ICON  -->
+          <b-col cols="1">
+            <div class="gdd-transaction-list-item-icon">
+              <b-icon :icon="properties.icon" :class="properties.class" />
+            </div>
+          </b-col>
+
+          <b-col cols="11">
+            <!-- Betrag / Name Email -->
+            <b-row>
+              <b-col cols="5">
+                <div class="text-right">
+                  <span class="gdd-transaction-list-item-operator">
+                    {{ properties.operator }}
+                  </span>
+                  <span class="gdd-transaction-list-item-amount">
+                    {{ $n(amount, 'decimal') }}
+                  </span>
+                </div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-item-name">
+                  {{
+                    typeId !== 'DECAY'
+                      ? linkedUser.firstName + ' ' + linkedUser.lastName
+                      : $t('decay.decay_since_last_transaction')
+                  }}
+                </div>
+              </b-col>
+            </b-row>
+
+            <!-- Nachricht Memo -->
+            <b-row>
+              <b-col cols="5">
+                <div class="text-right">{{ $t('form.memo') }}</div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-message">{{ memo }}</div>
+              </b-col>
+            </b-row>
+
+            <!-- Datum -->
+            <b-row v-if="typeId !== 'DECAY'">
+              <b-col cols="5">
+                <div class="text-right">{{ $t('form.date') }}</div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-item-date">
+                  {{ $d(new Date(balanceDate), 'long') }}
+                  {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
+                </div>
+              </b-col>
+            </b-row>
+
+            <!-- Decay -->
+            <b-row v-if="decay">
+              <b-col cols="5">
+                <div class="text-right">
+                  <b-icon v-if="typeId != 'DECAY'" icon="droplet-half" height="15" class="mb-1" />
+                </div>
+              </b-col>
+              <b-col cols="7">
+                <div class="gdd-transaction-list-item-decay">
+                  <decay-information v-if="decay" decaytyp="short" :decay="decay" />
+                </div>
+              </b-col>
+            </b-row>
+          </b-col>
+        </b-row>
+      </div>
+
+      <b-collapse class="pb-4" v-model="visible">
+        <decay-information
+          decaytyp="new"
+          :amount="amount"
+          :decay="decay"
+          :typeId="typeId"
+          :balanceDate="balanceDate"
+        />
+        <hr />
+        {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
+        {{ memo }}, {{ properties }}
+      </b-collapse>
+    </div>
+  </div>
+</template>
+<script>
+import DecayInformation from '../DecayInformation'
+
+export default {
+  name: 'slot-send',
+  components: {
+    DecayInformation,
+  },
+  props: {
+    amount: {
+      type: String,
+    },
+    balance: {
+      type: String,
+    },
+    balanceDate: {
+      type: String,
+    },
+    decay: {
+      type: Object,
+    },
+    id: {
+      type: Number,
+    },
+    linkedUser: {
+      type: Object,
+    },
+    memo: {
+      type: String,
+    },
+    typeId: {
+      type: String,
+    },
+    properties: {
+      type: Object,
+    },
+    getCollapseState: {
+      type: Boolean,
+    },
+    decayStartBlock: { type: Date },
+  },
+  data() {
+    return {
+      visible: false,
+    }
+  },
+}
+</script>
diff --git a/frontend/src/graphql/queries.js b/frontend/src/graphql/queries.js
index c833fb845..94a5e59f3 100644
--- a/frontend/src/graphql/queries.js
+++ b/frontend/src/graphql/queries.js
@@ -63,6 +63,7 @@ export const transactionsQuery = gql`
         id
         typeId
         amount
+        balance
         balanceDate
         memo
         linkedUser {
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index 56c246006..e3e7df505 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -13,172 +13,58 @@
       </div>
 
       <div
-        v-for="{ amount, balanceDate, decay, id, linkedUser, memo, typeId } in transactions"
+        v-for="({ id, typeId }, index) in transactions"
         :key="id"
         :style="typeId === 'DECAY' ? 'background-color:#f1e0ae3d' : ''"
       >
-        <div
+        <transaction-decay
           class="list-group-item gdd-transaction-list-item"
-          :class="getCollapseState(id) ? 'bg-secondary' : ''"
-          v-b-toggle="'decay-' + id"
-        >
-          <!-- Collaps Icon  -->
-          <div class="text-right" style="width: 95%; position: absolute">
-            <b-icon
-              :icon="getCollapseState(id) ? 'caret-up-square' : 'caret-down-square'"
-              :class="getCollapseState(id) ? 'text-black' : 'text-muted'"
-            />
-          </div>
-          <!-- TransactionList Row-->
-          <div>
-            <b-row>
-              <!-- ICON  -->
-              <b-col cols="1">
-                <div class="gdd-transaction-list-item-icon">
-                  <b-icon :icon="getProperties(typeId).icon" :class="getProperties(typeId).class" />
-                </div>
-              </b-col>
+          v-if="typeId === 'DECAY'"
+          v-bind="transactions[index]"
+          :properties="getProperties(typeId)"
+        />
 
-              <b-col cols="11">
-                <!-- Betrag / Name Email -->
-                <b-row>
-                  <b-col cols="5">
-                    <div class="text-right">
-                      <span class="gdd-transaction-list-item-operator">
-                        {{ getProperties(typeId).operator }}
-                      </span>
-                      <span class="gdd-transaction-list-item-amount">
-                        {{ $n(amount, 'decimal') }}
-                      </span>
-                    </div>
-                  </b-col>
-                  <b-col cols="7">
-                    <div class="gdd-transaction-list-item-name">
-                      {{
-                        typeId !== 'DECAY'
-                          ? linkedUser.firstName + ' ' + linkedUser.lastName
-                          : $t('decay.decay_since_last_transaction')
-                      }}
-                    </div>
-                  </b-col>
-                </b-row>
-
-                <!-- Nachricht Memo -->
-                <b-row v-if="typeId !== 'DECAY'">
-                  <b-col cols="5">
-                    <div class="text-right">{{ $t('form.memo') }}</div>
-                  </b-col>
-                  <b-col cols="7">
-                    <div class="gdd-transaction-list-message">{{ memo }}</div>
-                  </b-col>
-                </b-row>
-
-                <!-- Datum -->
-                <b-row v-if="typeId !== 'DECAY'">
-                  <b-col cols="5">
-                    <div class="text-right">{{ $t('form.date') }}</div>
-                  </b-col>
-                  <b-col cols="7">
-                    <div class="gdd-transaction-list-item-date">
-                      {{ $d(new Date(balanceDate), 'long') }}
-                      {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
-                    </div>
-                  </b-col>
-                </b-row>
-
-                <!-- Decay -->
-                <b-row v-if="decay">
-                  <b-col cols="5">
-                    <div class="text-right">
-                      <b-icon
-                        v-if="typeId != 'DECAY'"
-                        icon="droplet-half"
-                        height="15"
-                        class="mb-1"
-                      />
-                    </div>
-                  </b-col>
-                  <b-col cols="7">
-                    <div class="gdd-transaction-list-item-decay">
-                      <decay-information v-if="decay" decaytyp="short" :decay="decay" />
-                    </div>
-                  </b-col>
-                </b-row>
-                <!-- <b-row v-if="decay && decayStartBlock">
-                  <b-col cols="5">
-                    <div class="text-right">
-                      <b-icon
-                        v-if="typeId != 'decay'"
-                        icon="droplet-half"
-                        height="15"
-                        class="mb-1"
-                      />
-                    </div>
-                  </b-col>
-                  <b-col cols="7">
-                    <div class="gdd-transaction-list-item-decay">
-                      <b>{{ $t('decay.Starting_block_decay') }}</b>
-                    </div>
-                  </b-col>
-                </b-row> -->
-              </b-col>
-            </b-row>
-          </div>
-
-          <!-- Collaps Start -->
-          <b-collapse class="pb-4" :id="'decay-' + id">
-            <div class="pt-4 pb-4 bg-white border border-muted">
-              <decay-information
-                v-if="decay.start !== null"
-                decaytyp="new"
-                :amount="amount"
-                :decay="decay"
-                :typeId="typeId"
-              />
-
-              <!-- if decay.start === null - Wenn kein decay angegeben dan ist es die erste Transaktion-->
-              <div v-if="decay.start === null" class="mt-3 mb-3 text-center">
-                <b>{{ $t('decay.first_transaction') }}</b>
-              </div>
-
-              <!-- if balanceDate <  decayStartBlock - Wenn die transaktion vor dem einführen der dacay function liegt. -->
-              <div
-                v-if="new Date(balanceDate).getTime() < new Date(decayStartBlock).getTime()"
-                class="mt-3 mb-3 text-center"
-              >
-                <b>{{ $t('decay.befor_startblock_transaction') }}</b>
-              </div>
-
-              <div v-if="typeId === 'DECAY'" class="mt-3 mb-3">
-                <decay-information
-                  decaytyp="decayLastTransaction"
-                  :amount="amount"
-                  :decay="decay"
-                  :typeId="typeId"
-                />
-              </div>
-            </div>
-          </b-collapse>
-
-          <!-- Collaps End -->
-        </div>
-      </div>
-      <pagination-buttons
-        v-if="showPagination"
-        v-model="currentPage"
-        :per-page="pageSize"
-        :total-rows="transactionCount"
-      ></pagination-buttons>
-      <div v-if="transactionCount < 0" class="mt-4 text-center">
-        <span>{{ $t('transaction.nullTransactions') }}</span>
+        <transaction-send
+          class="list-group-item gdd-transaction-list-item"
+          v-if="typeId === 'SEND'"
+          v-bind="transactions[index]"
+          :decayStartBlock="decayStartBlock"
+          :properties="getProperties(typeId)"
+        />
+        <transaction-receive
+          class="list-group-item gdd-transaction-list-item"
+          v-if="typeId === 'RECEIVE'"
+          v-bind="transactions[index]"
+          :decayStartBlock="decayStartBlock"
+          :properties="getProperties(typeId)"
+        />
+        <transaction-creation
+          class="list-group-item gdd-transaction-list-item"
+          v-if="typeId === 'CREATION'"
+          v-bind="transactions[index]"
+          :decayStartBlock="decayStartBlock"
+          :properties="getProperties(typeId)"
+        />
       </div>
     </div>
+    <pagination-buttons
+      v-if="showPagination"
+      v-model="currentPage"
+      :per-page="pageSize"
+      :total-rows="transactionCount"
+    ></pagination-buttons>
+    <div v-if="transactionCount < 0" class="mt-4 text-center">
+      <span>{{ $t('transaction.nullTransactions') }}</span>
+    </div>
   </div>
 </template>
 
 <script>
 import PaginationButtons from '../../../components/PaginationButtons'
-import DecayInformation from '../../../components/DecayInformation'
+import TransactionDecay from '../../../components/transaction-slots/TransactionDecay'
+import TransactionSend from '../../../components/transaction-slots/TransactionSend'
+import TransactionReceive from '../../../components/transaction-slots/TransactionReceive'
+import TransactionCreation from '../../../components/transaction-slots/TransactionCreation'
 
 const iconsByType = {
   SEND: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '−' },
@@ -191,7 +77,10 @@ export default {
   name: 'gdd-transaction-list',
   components: {
     PaginationButtons,
-    DecayInformation,
+    TransactionDecay,
+    TransactionSend,
+    TransactionReceive,
+    TransactionCreation,
   },
   data() {
     return {
@@ -228,18 +117,6 @@ export default {
     throwError(msg) {
       throw new Error(msg)
     },
-    getCollapseState(id) {
-      return this.collapseStatus.includes('decay-' + id)
-    },
-  },
-  mounted() {
-    this.$root.$on('bv::collapse::state', (collapseId, isJustShown) => {
-      if (isJustShown) {
-        this.collapseStatus.push(collapseId)
-      } else {
-        this.collapseStatus = this.collapseStatus.filter((id) => id !== collapseId)
-      }
-    })
   },
   watch: {
     currentPage() {