feat: added primitive saving goal overview

src/components/CardGoal.vue

+<script lang="ts" setup>
+import type { Goal } from '@/types/goal'
+import type { PropType } from 'vue'
+import ProgressBar from '@/components/ProgressBar.vue'
+
+defineProps({
+    goalInstance: {
+        type: Object as PropType<Goal>,
+        default: () => ({
+            id: 0,
+            title: 'Goal Title',
+            saved: 500,
+            target: 1000,
+            completion: 50,
+            description: 'Goal Description',
+            priority: 0,
+            createdOn: '2021-01-01',
+            dueDate: '2021-12-31'
+        })
+    }
+})
+</script>
+
+<template>
+    <div class="border-2 border-black rounded-xl p-4 flex flex-col items-center gap-2">
+        <h2 class="m-0">{{ goalInstance.title }}</h2>
+        <p>{{ goalInstance.saved }}kr / {{ goalInstance.target }}kr</p>
+        <ProgressBar :completion="goalInstance.completion" />
+        <p>{{ goalInstance.dueDate }}</p>
+    </div>
+</template>
+
+<style scoped></style>

src/components/ProgressBar.vue

+<script lang="ts" setup>
+defineProps({
+    completion: Number
+})
+</script>
+
+<template>
+    <div class="w-full bg-gray-200 rounded-full">
+        <div :style="{ width: completion + '%' }" class="bg-green-500 h-2 rounded-full"></div>
+    </div>
+</template>
+
+<style scoped></style>

src/types/goal.ts

+export interface Goal {
+    id: number
+    title: string
+    saved: number
+    target: number
+    completion: number
+    description: string
+    priority: number
+    createdOn: string
+    dueDate: string | null
+}

src/views/GoalView.vue

-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import CardGoal from '@/components/CardGoal.vue'
+</script>
 
 <template>
-    <h1>Sparemål</h1>
+    <h1 class="font-bold text-center">Dine sparemål</h1>
+    <div class="flex flex-row justify-center gap-2">
+        <CardGoal />
+        <CardGoal />
+        <CardGoal />
+    </div>
 </template>
 
 <style scoped></style>