feat: Add transaction dashboard

index.html

@@ -11,3 +11,10 @@
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
+<style>
+  html,body ,#app{
+    width: 100%;
+    height: 100%;
+  }
+
+</style>

src/components/Dashboard.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="h-full w-full flex justify-center items-center bg-[#141e36] flex-col">
+        <h1 class="text-5xl bg-transparent text-white mb-8">Dashboard</h1>
+        <h2 class="text-3xl text-white italic mb-4">Total amount: {{ totalAmount }}</h2>
+        <h3 class="text-2xl text-white italic">Transaktonen</h3>
+        <div class="h-3/4 py-12 w-1/2">
+            <div v-for="transaction in transactions" class="p-4 flex justify-between w-full">
+                <span class="text-white">{{ transaction.title }}</span>
+                <span class="text-white">{{ transaction.positiv ? "+" : "-" }}{{ transaction.amount }}</span>
+            </div>
+            <div class="mt-4 flex justify-center items-center w-full h-10 border rounded-lg border-dashed cursor-pointer" @click="addTransaction">
+                <span class="text-white text-2xl">+</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import type { Transaction } from '@/models/transaction';
+import { getTransactions, saveTransaction } from '@/service/data';
+
+export default {
+    name: "Dashboard",
+    data(){
+        return {
+            transactions: [] as Transaction[]
+        }
+    },
+    beforeMount() {
+        this.transactions = getTransactions();
+    },
+    computed: {
+        totalAmount(){
+            let sum = 0;
+            this.transactions.map(transaction => sum += transaction.positiv ? transaction.amount : -transaction.amount)
+
+            return sum
+        }
+    },
+    methods: {
+        addTransaction(){
+            window.location.href = "/add";
+        }
+    }
+}
+</script>

src/router/index.ts

@@ -1,8 +1,10 @@
+import Dashboard from '@/components/Dashboard.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
+    {path: "", component: Dashboard}
   ],
 })