right side last transaction list style

frontend/src/components/Template/RightSide/LastTransactions.vue

@@ -6,12 +6,43 @@
         <b-icon icon="three-dots-vertical"></b-icon>
       </b-col>
     </b-row>
-    <!-- {{ transactions }} -->
-    <div class="d-flex mt-3 mb-3" v-for="transaction in transactions" :key="transaction.id">
-      <div class="mr-3"><b-avatar></b-avatar></div>
-      <div class="d-inline">
-        <div>{{ transaction.typeId }}</div>
-        <div>{{ transaction.amount }}</div>
+    <div class="mt-3 mb-3" v-for="(transaction, index) in transactions" :key="transaction.id">
+      <div
+        v-if="
+          index <= 7 &&
+          transaction.typeId !== 'DECAY' &&
+          transaction.typeId !== 'LINK_SUMMARY' &&
+          transaction.typeId !== 'CREATION'
+        "
+        class="bg-white appBoxShadow gradido-border-radius p-1 border"
+        :class="transaction.typeId === 'SEND' ? 'border-danger' : 'border-success'"
+      >
+        <b-row>
+          <b-col cols="3">
+            <b-avatar badge-variant="white" src="https://placekitten.com/300/300">
+              <template #badge>
+                <b-icon
+                  :icon="transaction.typeId === 'SEND' ? 'arrow-left' : 'arrow-right'"
+                  :variant="transaction.typeId === 'SEND' ? 'danger' : 'success'"
+                ></b-icon>
+              </template>
+            </b-avatar>
+          </b-col>
+          <b-col>
+            <b-row>
+              <b-col class="small">
+                {{ transaction.linkedUser.firstName }} {{ transaction.linkedUser.lastName }}
+              </b-col>
+              <b-col cols="2" class="mr-4">
+                <b-icon icon="bookmark-plus" variant="black"></b-icon>
+              </b-col>
+            </b-row>
+            <b-row class="mt-2">
+              <b-col class="small">{{ transaction.amount | GDD }}</b-col>
+              <b-col class="small">{{ $d(new Date(transaction.balanceDate), 'short') }}</b-col>
+            </b-row>
+          </b-col>
+        </b-row>
       </div>
     </div>
   </div>

frontend/src/layouts/templates/RightSide.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="right-side mt-3 mt-lg-0">
-    <b-container v-if="path === '/overview'">
+    <div v-if="path === '/overview'">
       <!-- <b-row>
         <b-col>
           <div class="p-4">
@@ -19,7 +19,7 @@
           </div>
         </b-col>
       </b-row>
-    </b-container>
+    </div>
     <!-- <b-container v-if="path === '/storys'">
       <b-row>
         <b-col>