From a2b7b38bf14d6b97478eddb0e51bdf4a3dd39f5e Mon Sep 17 00:00:00 2001
From: Daniel <danthevip@gmail.com>
Date: Thu, 26 Oct 2023 23:02:25 +0300
Subject: [PATCH 1/2] All frontend elements now use Stores instead of
 requesting their own data 6 times less requests!

---
 .../routes/dashboard/board/Dashboard.svelte   |  13 +-
 .../dashboard/board/graphs/Graph1.svelte      |  27 +++--
 .../dashboard/board/graphs/Graph2.svelte      | 111 +++++++++---------
 .../dashboard/board/graphs/Graph3.svelte      |  46 ++++----
 .../dashboard/board/infolists/Expenses.svelte |  30 +----
 .../dashboard/board/infolists/Incomes.svelte  |  33 ++----
 .../infolists/contents/ContentExpense.svelte  |  26 +---
 .../infolists/contents/ContentIncome.svelte   |  26 +---
 .../dashboard/board/other/QuickInfobar.svelte |  40 +++----
 .../web/src/routes/dashboard/stores.js        |   4 +-
 10 files changed, 142 insertions(+), 214 deletions(-)

diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
index 45c3969..9a7ee4f 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
@@ -8,17 +8,19 @@
     import {incomeData} from "../stores.js";
     import {expenseData} from "../stores.js";
     import {incomeTypes} from "../stores.js";
+    import {expenseTypes} from "../stores.js";
 
     import axios from "axios";
 
 
     onMount(() => {
-            if (getCookie('access_token') === null) {
+            if (getCookie('access_token') === '') {
                     window.location.href = '/auth/login';
                     console.log("no token");
             }
 
             const token = getCookie('access_token');
+
             const config = {
                     headers: {
                             'Authorization': `Bearer ${token}`
@@ -46,7 +48,14 @@
                     })
                     .catch(error => console.error('Error:', error));
 
-            Promise.all([incomePromise, expensePromise, incomeTypesPromise])
+            const expenseTypesPromise = axios.get('http://localhost:8081/expenses/categories', config)
+                    .then(response => {
+                            expenseTypes.set(response.data);
+                            console.log("Received Expense Type Data");
+                    })
+                    .catch(error => console.error('Error:', error));
+
+            Promise.all([incomePromise, expensePromise, incomeTypesPromise, expenseTypesPromise])
                     .then(() => {
                             console.log(getCookie('access_token'));
                     });
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
index 56b6e48..bc4771f 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
@@ -7,21 +7,22 @@
 	let chartCanvas;
 	let chart = null;
 
+	function groupAndSumByCategory(incomes) {
+		const groupedData = new Map();
+		incomes.forEach(income => {
+					const category = income.incomeCategory.name;
+					if (groupedData.has(category)) {
+						groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
+					} else {
+						groupedData.set(category, income.amount);
+					}
+				}
+		);
+		return groupedData;
+	}
+
 	function createGraph(data) {
 		try {
-			function groupAndSumByCategory(incomes) {
-				const groupedData = new Map();
-				incomes.forEach(income => {
-							const category = income.incomeCategory.name;
-							if (groupedData.has(category)) {
-								groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
-							} else {
-								groupedData.set(category, income.amount);
-							}
-						}
-				);
-				return groupedData;
-			}
 
 			const groupedIncomeData = groupAndSumByCategory(data);
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
index fe935a6..eee5dc2 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
@@ -1,72 +1,73 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import axios from 'axios';
-	import {getCookie} from "svelte-cookie";
+	import {expenseData} from "../../stores.js";
 
 	let ctx;
 	let chartCanvas;
+	let chart = null;
 
-	async function updateGraph() {
-		const token = getCookie('access_token');
-
-		const config = {
-			headers: {
-				'Authorization': `Bearer ${token}`
-			}
-		};
-
-		try {
-			const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
-
-			const aggregatedData = {};
-
-			response.data.forEach(item => {
-				const category = item.expenseCategory.name;
-				const amount = item.amount;
-
-				if (aggregatedData[category]) {
-					aggregatedData[category] += amount;
-				} else {
-					aggregatedData[category] = amount;
-				}
-			});
-
-			const chartLabels = Object.keys(aggregatedData);
-			const chartValues = Object.values(aggregatedData);
-
-			ctx = chartCanvas.getContext('2d');
-			new Chart(ctx, {
-				type: 'bar',
-				data: {
-					labels: chartLabels,
-					datasets: [{
-						label: 'Revenue',
-						backgroundColor: 'rgb(255, 99, 132)',
-						data: chartValues
-					}]
-				},
-				options: {
-					responsive: true,
-					maintainAspectRatio: false,
-					legend: {
-						display: false
-					},
-					tooltips: {
-						callbacks: {
-							label: (tooltipItem) => {
-								return tooltipItem.yLabel;
-							}
-						}
+	function groupAndSumByCategory(expenses) {
+		const groupedData = new Map();
+		expenses.forEach(expense => {
+					const category = expense.expenseCategory.name;
+					if (groupedData.has(category)) {
+						groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
+					} else {
+						groupedData.set(category, expense.amount);
 					}
 				}
-			});
+		);
+		return groupedData;
+	}
+
+	function createGraph(data) {
+		try {
+
+			const groupedExpenseData = groupAndSumByCategory(data);
+
+			const chartLabels = Array.from(groupedExpenseData.keys());
+			const chartValues = Array.from(groupedExpenseData.values());
+
+			ctx = chartCanvas.getContext('2d');
+
+			if (!chart) {
+				chart = new Chart(ctx, {
+					type: 'bar',
+					data: {
+						labels: chartLabels,
+						datasets: [{
+							label: 'Spendings',
+							backgroundColor: 'rgb(255, 99, 132)',
+							data: chartValues
+						}]
+					},
+					options: {
+						responsive: true,
+						maintainAspectRatio: false
+					}
+				});
+			} else {
+				chart.data.labels = chartLabels;
+				chart.data.datasets[0].data = chartValues;
+				console.log(chart.data.datasets[0].data);
+				chart.update();
+			}
 		} catch (error) {
 			console.error('Error:', error);
 		}
 	}
 
-	onMount(updateGraph);
+	$: {
+		if ($expenseData) {
+			createGraph($expenseData);
+			console.log($expenseData);
+		}
+	}
+
+	onMount(() => {
+		createGraph($expenseData);
+	});
 </script>
 
 <div id="chart">
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
index 640bd8a..34dcb86 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
@@ -1,39 +1,24 @@
 <script>
 	import chartjs from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import axios from 'axios';
-	import { getCookie } from "svelte-cookie";
+	import { incomeData, expenseData } from "../../stores.js";
 
 	let ctx;
 	let chartCanvas;
+	let chart = null;
 
-	async function updateGraph() {
-		const token = getCookie('access_token');
-
-		const config = {
-			headers: {
-				'Authorization': `Bearer ${token}`
-			}
-		};
-
+	function createGraph(incomes, expenses) {
 		try {
-			const [incomesResponse, expensesResponse] = await Promise.all([
-				axios.get('http://localhost:8081/incomes/personal-incomes', config),
-				axios.get('http://localhost:8081/expenses/personal-expenses', config)
-			]);
 
-			const incomesData = incomesResponse.data;
-			const expensesData = expensesResponse.data;
-
-			const totalIncomes = incomesData.reduce((total, item) => total + item.amount, 0);
-
-			const totalExpenses = expensesData.reduce((total, item) => total + item.amount, 0);
+			const totalIncomes = incomes.reduce((total, item) => total + item.amount, 0);
+			const totalExpenses = expenses.reduce((total, item) => total + item.amount, 0);
 
 			const chartLabels = ['Incomes', 'Expenses'];
 			const chartValues = [totalIncomes, totalExpenses];
 
 			ctx = chartCanvas.getContext('2d');
-			new chartjs(ctx, {
+			if (!chart) {
+			chart = new chartjs(ctx, {
 				type: 'pie',
 				data: {
 					labels: chartLabels,
@@ -47,12 +32,27 @@
 					maintainAspectRatio: false
 				}
 			});
+			} else {
+				chart.data.labels = chartLabels;
+				chart.data.datasets[0].data = chartValues;
+				console.log(chart.data.datasets[0].data);
+				chart.update();
+			}
 		} catch (error) {
 			console.error('Error:', error);
 		}
 	}
 
-	onMount(updateGraph);
+	$: {
+		if ($incomeData || $expenseData) {
+			console.log("created");
+			createGraph($incomeData, $expenseData);
+		}
+	}
+
+	onMount(() => {
+		createGraph($incomeData, $expenseData);
+	});
 </script>
 
 <div id="chart">
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
index f266757..e05f4b9 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
@@ -1,36 +1,18 @@
 <script>
     import { onMount, afterUpdate } from 'svelte';
-    import axios from 'axios';
-    import { getCookie } from "svelte-cookie";
     import ContentExpense from "./contents/ContentExpense.svelte";
+    import {expenseData} from "../../stores.js";
 
-    let data = [];
     let parentHeight;
     let listParentHeight;
 
     async function updateInfo() {
-        const token = getCookie('access_token');
-
-        const config = {
-            headers: {
-                'Authorization': `Bearer ${token}`
-            }
-        };
-
-        try {
-            const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
-            data = response.data;
-            parentHeight = document.querySelector('#expenseInfo').offsetHeight;
-        } catch (error) {
-            console.error('Error:', error);
-        }
-    }
-    onMount(updateInfo);
-
-    afterUpdate(() => {
         parentHeight = document.querySelector('#expenseInfo').offsetHeight;
         listParentHeight = document.querySelector('#expenseList').offsetHeight;
-    });
+    }
+
+    onMount(updateInfo);
+    afterUpdate(updateInfo);
 </script>
 
 <div id="expenseInfo" style="max-height: {parentHeight}px;">
@@ -38,7 +20,7 @@
 
     <div id="expenseList" style="max-height: {listParentHeight}px;">
         <ul>
-            {#each data as item}
+            {#each $expenseData as item}
                 <li>
                     {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
                     {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
index f0c175e..104bf91 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
@@ -1,37 +1,18 @@
 <script>
-
     import { onMount, afterUpdate } from 'svelte';
-    import axios from 'axios';
-    import {getCookie} from "svelte-cookie";
+    import { incomeData } from "../../stores.js";
     import ContentIncome from "./contents/ContentIncome.svelte";
 
-    let data = [];
     let parentHeight;
     let listParentHeight;
 
     async function updateInfo() {
-        const token = getCookie('access_token');
-
-        const config = {
-            headers: {
-                'Authorization': `Bearer ${token}`
-            }
-        };
-
-        try {
-            const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
-            data = response.data;
-            parentHeight = document.querySelector('#incomeInfo').offsetHeight;
-        } catch (error) {
-            console.error('Error:', error);
-        }
-    }
-    onMount(updateInfo);
-
-    afterUpdate(() => {
-        parentHeight = document.querySelector('#incomeInfo').offsetHeight;
+        parentHeight = document.querySelector('#expenseInfo').offsetHeight;
         listParentHeight = document.querySelector('#expenseList').offsetHeight;
-    });
+    }
+
+    onMount(updateInfo);
+    afterUpdate(updateInfo);
 </script>
 
 <div id="incomeInfo" style="max-height: {parentHeight}px;">
@@ -39,7 +20,7 @@
 
     <div id="incomeList" style="max-height: {listParentHeight}px;">
         <ul>
-            {#each data as item}
+            {#each $incomeData as item}
                 <li>
                     {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
                     {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
index 49c8297..007d1df 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
@@ -1,37 +1,17 @@
 <script>
     import Modal from '../modals/Modal.svelte';
-    import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
+    import {expenseTypes} from "../../../stores.js";
 
     let showModal;
     let amount = '';
 
     const selectedExpenseId = writable('');
 
-    onMount(async () => {
-        try {
-            const token = getCookie('access_token');
-
-            const config = {
-                headers: {
-                    'Authorization': `Bearer ${token}`
-                }
-            };
-
-            const response = await axios.get('http://localhost:8081/expenses/categories', config);
-            expenseOptions.set(response.data);
-            console.log(response.data);
-        } catch (error) {
-            console.error('Error:', error);
-        }
-    });
-
-    const expenseOptions = writable([]);
-
     const createExpense = async () => {
-        const selectedExpense = $expenseOptions.find(expense => expense.id === $selectedExpenseId);
+        const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
         const data = {
             expenseCategory: selectedExpense.id,
             amount: amount,
@@ -78,7 +58,7 @@
             <div class="form-group">
                 <label for="expenseCategory">Select Expense Category:</label>
                 <select id="expenseCategory" class="form-control" bind:value={$selectedExpenseId}>
-                    {#each $expenseOptions as expense (expense.id)}
+                    {#each $expenseTypes as expense (expense.id)}
                         {#if expense.id !== undefined}
                             <option value={expense.id}>{expense.name}</option>
                         {/if}
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
index cc862ae..3116d9a 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
@@ -1,6 +1,5 @@
 <script>
     import Modal from '../modals/Modal.svelte';
-    import { onMount } from 'svelte';
     import { writable } from 'svelte/store';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
@@ -41,29 +40,8 @@
         }
     }
 
-
-    onMount(async () => {
-        try {
-            const token = getCookie('access_token');
-
-            const config = {
-                headers: {
-                    'Authorization': `Bearer ${token}`
-                }
-            };
-
-            const response = await axios.get('http://localhost:8081/incomes/categories', config);
-            incomeOptions.set(response.data);
-            console.log(response.data);
-        } catch (error) {
-            console.error('Error:', error);
-        }
-    });
-
-    const incomeOptions = writable([]);
-
     const createIncome = async () => {
-        const selectedIncome = $incomeOptions.find(income => income.id === $selectedIncomeId);
+        const selectedIncome = $incomeTypes.find(income => income.id === $selectedIncomeId);
         const data = {
             incomeCategory: selectedIncome.id,
             amount: amount,
@@ -110,7 +88,7 @@
             <div class="form-group">
                 <label for="incomeCategory">Select Income Category:</label>
                 <select id="incomeCategory" class="form-control" bind:value={$selectedIncomeId}>
-                    {#each $incomeOptions as income (income.id)}
+                    {#each $incomeTypes as income (income.id)}
                         {#if income.id !== undefined}
                             <option value={income.id}>{income.name}</option>
                         {/if}
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
index 81ad41e..05211af 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
@@ -1,38 +1,32 @@
 <script>
     import { onMount } from 'svelte';
-    import axios from 'axios';
-    import { getCookie } from "svelte-cookie";
+    import {incomeData, expenseData} from "../../stores.js";
 
     let infobar1, infobar2, infobar3, infobar4;
     let totalExpenses = 0;
     let totalIncomes = 0;
 
-    onMount(async () => {
-        const token = getCookie('access_token');
-
-        const config = {
-            headers: {
-                'Authorization': `Bearer ${token}`
-            }
-        };
+    function updateInfo() {
+        totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
+        totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
 
         try {
-            const [incomesResponse, expensesResponse] = await Promise.all([
-                axios.get('http://localhost:8081/incomes/personal-incomes', config),
-                axios.get('http://localhost:8081/expenses/personal-expenses', config)
-            ]);
-
-            const incomesData = incomesResponse.data;
-            const expensesData = expensesResponse.data;
-
-            totalExpenses = expensesData.reduce((total, item) => total + item.amount, 0);
-            totalIncomes = incomesData.reduce((total, item) => total + item.amount, 0);
-
             infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses}$`;
             infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${totalIncomes}$</span>`;
-        } catch (error) {
-            console.error('Error:', error);
+        } catch {
+            console.log("not yet loaded");
         }
+
+    }
+
+    $: {
+        if ($incomeData && $expenseData) {
+            updateInfo();
+        }
+    }
+
+    onMount(() => {
+        updateInfo();
     });
 </script>
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
index 3b615b4..05ce287 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
@@ -4,4 +4,6 @@ export const incomeData = writable([]);
 
 export const expenseData = writable([]);
 
-export const incomeTypes = writable([]);
\ No newline at end of file
+export const incomeTypes = writable([]);
+
+export const expenseTypes = writable([]);
\ No newline at end of file

From ef7c7ec7f85fd2a6e227c454957cb5b3c7ddfbbf Mon Sep 17 00:00:00 2001
From: Daniel <danthevip@gmail.com>
Date: Fri, 27 Oct 2023 00:07:49 +0300
Subject: [PATCH 2/2] All frontend elements now use Stores instead of
 requesting their own data 6 times less requests!

---
 .../src/routes/auth/login/LoginForm.svelte    | 27 ++------
 .../routes/auth/register/RegisterForm.svelte  | 26 ++++----
 .../routes/dashboard/board/Dashboard.svelte   | 62 +++++++------------
 .../dashboard/board/graphs/Graph1.svelte      | 26 +++++---
 .../dashboard/board/graphs/Graph2.svelte      | 25 ++++----
 .../dashboard/board/graphs/Graph3.svelte      | 27 ++++----
 .../dashboard/board/infolists/Expenses.svelte |  5 ++
 .../dashboard/board/infolists/Incomes.svelte  |  5 ++
 .../infolists/contents/ContentExpense.svelte  | 40 ++++++++++--
 .../infolists/contents/ContentIncome.svelte   | 10 ++-
 .../dashboard/board/other/DataMenu.svelte     |  8 ---
 .../dashboard/board/other/QuickInfobar.svelte | 32 ++++++----
 .../src/routes/dashboard/menu/Navbar.svelte   | 47 --------------
 13 files changed, 153 insertions(+), 187 deletions(-)
 delete mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/Navbar.svelte

diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte
index ed00879..a0bade3 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte
@@ -1,5 +1,4 @@
 <script>
-    import * as EmailValidator from 'email-validator';
     import axios from "axios";
     import {onMount} from "svelte";
     import { getCookie, setCookie } from 'svelte-cookie';
@@ -9,19 +8,19 @@
     let message = ""
 
     onMount(async () => {
-        console.log("Mounted");
+
         const access_token = getCookie('access_token');
         const refresh_token = getCookie('refresh_token');
+
         if (access_token && refresh_token) {
             window.location.href = '/dashboard';
         }
+
     });
 
     async function submitForm(event) {
         event.preventDefault();
-        console.log("Tried to submit!");
-        console.log(username);
-        console.log(password);
+
         try {
             const response = await axios.post('http://localhost:8081/api/v1/auth/authenticate', {
                 email: username,
@@ -30,30 +29,14 @@
 
             const { access_token, refresh_token } = response.data;
 
-            // Save the tokens in cookies
             setCookie('access_token', access_token);
             setCookie('refresh_token', refresh_token);
-            console.log(access_token, refresh_token);
+
             window.location.href = '/dashboard'
         } catch (error) {
             console.error('Login failed:', error);
         }
     }
-
-    // function validateEmail() {
-    //     let valid = EmailValidator.validate(username);
-    //     isErrorVisible = !valid;
-    //     message = isErrorVisible ? "Invalid e-mail!" : "";
-    //     return valid;
-    // }
-    //
-    // function validatePassword() {
-    //     let valid = password.value !== '';
-    //     isErrorVisible = !valid;
-    //     message = isErrorVisible ? "Invalid password!" : "";
-    //     return valid;
-    // }
-
 </script>
 
 <div class="animated bounceInDown">
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/register/RegisterForm.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/register/RegisterForm.svelte
index 076d8a7..0a8f712 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/register/RegisterForm.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/register/RegisterForm.svelte
@@ -55,7 +55,7 @@
             <input type="submit" value="Sign up" class="submitButton">
         </form>
         <a href="/auth/login" class="noAccount">Already have an account? Sign in</a>
-    </div> 
+    </div>
 </div>
 
 
@@ -78,18 +78,18 @@
         height: 600px;
         box-shadow: 1px 1px 108.8px 19.2px rgb(25, 31, 53);
     }
-    
+
     #formTitle {
         font-family: 'Source Sans Pro', sans-serif;
         color: #5c6bc0;
         margin-top: 94px;
     }
-    
+
     #formTitle span {
         color: #dfdeee;
         font-weight: lighter;
     }
-    
+
     .registerForm h5 {
         font-family: 'Source Sans Pro', sans-serif;
         font-size: 13px;
@@ -98,7 +98,7 @@
         margin-top: -15px;
         margin-bottom: 70px;
     }
-    
+
     .registerForm input[type="text"],
     .registerForm input[type="password"] {
         display: block;
@@ -116,21 +116,21 @@
         -o-transition: all .2s ease-out;
         transition: all .2s ease-out;
     }
-    
+
     .registerForm input[type="text"]:focus,
     .registerForm input[type="password"]:focus {
         border: 1px solid #79A6FE;
     }
-    
+
     a {
         color: #5c7fda;
         text-decoration: none;
     }
-    
+
     a:hover {
         text-decoration: underline;
     }
-    
+
     .submitButton {
         border: 0;
         background: #7f5feb;
@@ -145,23 +145,23 @@
         transition: 0.3s;
         cursor: pointer;
     }
-    
+
     .submitButton:hover {
         background: #5d33e6;
     }
-    
+
     .recoveryPass {
         position: relative;
         float: right;
         right: 28px;
     }
-    
+
     .noAccount {
         position: absolute;
         top: 92%;
         left: 24%;
     }
-    
+
     .error {
         text-align: center;
         width: 337px;
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
index 9a7ee4f..9ee8e54 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte
@@ -5,60 +5,40 @@
     import { getCookie } from "svelte-cookie";
     import {onMount} from "svelte";
 
-    import {incomeData} from "../stores.js";
-    import {expenseData} from "../stores.js";
-    import {incomeTypes} from "../stores.js";
-    import {expenseTypes} from "../stores.js";
+    import {incomeData, expenseData, incomeTypes, expenseTypes} from "../stores.js";
 
     import axios from "axios";
 
 
-    onMount(() => {
-            if (getCookie('access_token') === '') {
-                    window.location.href = '/auth/login';
-                    console.log("no token");
-            }
-
+    onMount(async () => {
             const token = getCookie('access_token');
 
+            if (token === '') {
+                    window.location.href = '/auth/login';
+                    return;
+            }
+
             const config = {
                     headers: {
                             'Authorization': `Bearer ${token}`
                     }
             };
 
-            const incomePromise = axios.get('http://localhost:8081/incomes/personal-incomes', config)
-                    .then(response => {
-                            incomeData.set(response.data);
-                            console.log("Received Income Data");
-                    })
-                    .catch(error => console.error('Error fetching income data:', error));
+            try {
+                    const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
+                            axios.get('http://localhost:8081/incomes/personal-incomes', config),
+                            axios.get('http://localhost:8081/expenses/personal-expenses', config),
+                            axios.get('http://localhost:8081/incomes/categories', config),
+                            axios.get('http://localhost:8081/expenses/categories', config)
+                    ]);
 
-            const expensePromise = axios.get('http://localhost:8081/expenses/personal-expenses', config)
-                    .then(response => {
-                            expenseData.set(response.data);
-                            console.log("Received Expense Data");
-                    })
-                    .catch(error => console.error('Error fetching expense data:', error));
-
-            const incomeTypesPromise = axios.get('http://localhost:8081/incomes/categories', config)
-                    .then(response => {
-                            incomeTypes.set(response.data);
-                            console.log("Received Income Type Data");
-                    })
-                    .catch(error => console.error('Error:', error));
-
-            const expenseTypesPromise = axios.get('http://localhost:8081/expenses/categories', config)
-                    .then(response => {
-                            expenseTypes.set(response.data);
-                            console.log("Received Expense Type Data");
-                    })
-                    .catch(error => console.error('Error:', error));
-
-            Promise.all([incomePromise, expensePromise, incomeTypesPromise, expenseTypesPromise])
-                    .then(() => {
-                            console.log(getCookie('access_token'));
-                    });
+                    incomeData.set(incomeResponse.data);
+                    expenseData.set(expenseResponse.data);
+                    incomeTypes.set(incomeTypesResponse.data);
+                    expenseTypes.set(expenseTypesResponse.data);
+            } catch (error) {
+                    console.error('Error:', error);
+            }
     });
 </script>
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
index bc4771f..3b653b1 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
@@ -7,9 +7,9 @@
 	let chartCanvas;
 	let chart = null;
 
-	function groupAndSumByCategory(incomes) {
+	function groupAndSumByCategory() {
 		const groupedData = new Map();
-		incomes.forEach(income => {
+		$incomeData.forEach(income => {
 					const category = income.incomeCategory.name;
 					if (groupedData.has(category)) {
 						groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
@@ -21,10 +21,9 @@
 		return groupedData;
 	}
 
-	function createGraph(data) {
+	function createGraph() {
 		try {
-
-			const groupedIncomeData = groupAndSumByCategory(data);
+			const groupedIncomeData = groupAndSumByCategory();
 
 			const chartLabels = Array.from(groupedIncomeData.keys());
 			const chartValues = Array.from(groupedIncomeData.values());
@@ -38,7 +37,16 @@
 						labels: chartLabels,
 						datasets: [{
 							label: 'Revenue',
-							backgroundColor: 'rgb(255, 99, 132)',
+							backgroundColor:
+									['rgb(0, 0, 179)',
+									'rgb(0, 16, 217)',
+									'rgb(0, 32, 255)',
+									'rgb(0, 64, 255)',
+									'rgb(0, 96, 255)',
+									'rgb(0, 128, 255)',
+									'rgb(0, 159, 255)',
+									'rgb(0, 191, 255)',
+									'rgb(0, 255, 255)'],
 							data: chartValues
 						}]
 					},
@@ -50,7 +58,6 @@
 			} else {
 				chart.data.labels = chartLabels;
 				chart.data.datasets[0].data = chartValues;
-				console.log(chart.data.datasets[0].data);
 				chart.update();
 			}
 		} catch (error) {
@@ -60,13 +67,12 @@
 
 	$: {
 		if ($incomeData) {
-			createGraph($incomeData);
-			console.log($incomeData);
+			createGraph();
 		}
 	}
 
 	onMount(() => {
-		createGraph($incomeData);
+		createGraph();
 	});
 </script>
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
index eee5dc2..9fb1a4a 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
@@ -1,15 +1,16 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import {expenseData} from "../../stores.js";
+	import { expenseData } from "../../stores.js";
 
 	let ctx;
 	let chartCanvas;
 	let chart = null;
 
-	function groupAndSumByCategory(expenses) {
+	function groupAndSumByCategory() {
 		const groupedData = new Map();
-		expenses.forEach(expense => {
+		console.log($expenseData)
+		$expenseData.forEach(expense => {
 					const category = expense.expenseCategory.name;
 					if (groupedData.has(category)) {
 						groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
@@ -21,10 +22,9 @@
 		return groupedData;
 	}
 
-	function createGraph(data) {
+	function createGraph() {
 		try {
-
-			const groupedExpenseData = groupAndSumByCategory(data);
+			const groupedExpenseData = groupAndSumByCategory();
 
 			const chartLabels = Array.from(groupedExpenseData.keys());
 			const chartValues = Array.from(groupedExpenseData.values());
@@ -38,7 +38,12 @@
 						labels: chartLabels,
 						datasets: [{
 							label: 'Spendings',
-							backgroundColor: 'rgb(255, 99, 132)',
+							backgroundColor: [
+								'rgb(107, 80, 107)',
+								'rgb(171, 61, 169)',
+								'rgb(222, 37, 218)',
+								'rgb(235, 68, 232)',
+								'rgb(255, 128, 255)'],
 							data: chartValues
 						}]
 					},
@@ -50,7 +55,6 @@
 			} else {
 				chart.data.labels = chartLabels;
 				chart.data.datasets[0].data = chartValues;
-				console.log(chart.data.datasets[0].data);
 				chart.update();
 			}
 		} catch (error) {
@@ -60,13 +64,12 @@
 
 	$: {
 		if ($expenseData) {
-			createGraph($expenseData);
-			console.log($expenseData);
+			createGraph();
 		}
 	}
 
 	onMount(() => {
-		createGraph($expenseData);
+		createGraph();
 	});
 </script>
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
index 34dcb86..10245ba 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
@@ -1,5 +1,5 @@
 <script>
-	import chartjs from 'chart.js/auto';
+	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
 	import { incomeData, expenseData } from "../../stores.js";
 
@@ -7,24 +7,26 @@
 	let chartCanvas;
 	let chart = null;
 
-	function createGraph(incomes, expenses) {
+	function createGraph() {
 		try {
-
-			const totalIncomes = incomes.reduce((total, item) => total + item.amount, 0);
-			const totalExpenses = expenses.reduce((total, item) => total + item.amount, 0);
+			const totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
+			const totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
 
 			const chartLabels = ['Incomes', 'Expenses'];
 			const chartValues = [totalIncomes, totalExpenses];
 
 			ctx = chartCanvas.getContext('2d');
 			if (!chart) {
-			chart = new chartjs(ctx, {
+			chart = new Chart(ctx, {
 				type: 'pie',
 				data: {
 					labels: chartLabels,
 					datasets: [{
 						data: chartValues,
-						backgroundColor: ['green', 'red'],
+						backgroundColor: [
+							'rgb(243, 188, 0)',
+							'rgb(0, 117, 164)'
+						],
 					}]
 				},
 				options: {
@@ -33,9 +35,13 @@
 				}
 			});
 			} else {
+				const totalIncomesUpd = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
+				const totalExpensesUpd = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
+
+				const chartLabels = ['Incomes', 'Expenses'];
+				const chartValues = [totalIncomesUpd, totalExpensesUpd];
 				chart.data.labels = chartLabels;
 				chart.data.datasets[0].data = chartValues;
-				console.log(chart.data.datasets[0].data);
 				chart.update();
 			}
 		} catch (error) {
@@ -45,13 +51,12 @@
 
 	$: {
 		if ($incomeData || $expenseData) {
-			console.log("created");
-			createGraph($incomeData, $expenseData);
+			createGraph();
 		}
 	}
 
 	onMount(() => {
-		createGraph($incomeData, $expenseData);
+		createGraph();
 	});
 </script>
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
index e05f4b9..0015c1f 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
@@ -36,6 +36,10 @@
     #expenseInfo {
         display: flex;
         flex-direction: column;
+        background-color: #212942;
+        color:white;
+        border-radius: 10px;
+        margin: 10px;
     }
 
     #expenseList {
@@ -54,6 +58,7 @@
     ul {
         list-style: none;
         padding: 0;
+        color:black;
     }
 
     li {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
index 104bf91..2f4e2e5 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
@@ -35,6 +35,10 @@
     #incomeInfo {
         display: flex;
         flex-direction: column;
+        background-color: #212942;
+        color:white;
+        border-radius: 10px;
+        margin: 10px;
     }
 
     #incomeList {
@@ -49,6 +53,7 @@
     ul {
         list-style: none;
         padding: 0;
+        color: black;
     }
 
     li {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
index 007d1df..75abede 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
@@ -3,13 +3,41 @@
     import { writable } from 'svelte/store';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
-    import {expenseTypes} from "../../../stores.js";
+    import {expenseTypes, expenseData} from "../../../stores.js";
 
     let showModal;
     let amount = '';
+    let newData;
 
     const selectedExpenseId = writable('');
 
+    function addNewExpense(id, amount) {
+        const today = new Date().toISOString().split('T')[0];
+        const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
+
+        console.log(amount);
+
+        if (expenseCategory) {
+            const newIncome = {
+                incomeId: 0,
+                userDTO: {
+                    name: "Dummy",
+                    surname: "User",
+                    username: "dummyuser"
+                },
+                expenseCategory: expenseCategory,
+                date: today,
+                amount: amount
+            };
+
+            newData = $expenseData;
+            newData.push(newIncome);
+            $expenseData = newData;
+        } else {
+            console.error('Expense category not found for id:', id);
+        }
+    }
+
     const createExpense = async () => {
         const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
         const data = {
@@ -17,9 +45,11 @@
             amount: amount,
         };
 
+        addNewExpense(selectedExpense.id, amount);
+
         try {
             const token = getCookie('access_token');
-            console.log(token);
+
             const response = await axios.post('http://localhost:8081/expenses', data, {
                 headers: {
                     'Authorization': `Bearer ${token}`,
@@ -27,10 +57,8 @@
                 },
             });
 
-            console.log(response.data);
-
-            if (response.status === 200) {
-                console.log("cool");
+            if (response.status === 201) {
+                //console.log("cool");
             } else {
                 console.error('Error:', response.status);
             }
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
index 3116d9a..f23e81e 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
@@ -3,8 +3,7 @@
     import { writable } from 'svelte/store';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
-    import {incomeData} from "../../../stores.js";
-    import {incomeTypes} from "../../../stores.js";
+    import {incomeData, incomeTypes} from "../../../stores.js";
 
     let showModal;
     let amount = '';
@@ -34,7 +33,6 @@
             newData = $incomeData;
             newData.push(newIncome);
             $incomeData = newData;
-            console.log("ggWPPPPP", newIncome);
         } else {
             console.error('Income category not found for id:', id);
         }
@@ -51,7 +49,7 @@
 
         try {
             const token = getCookie('access_token');
-            console.log(token);
+
             const response = await axios.post('http://localhost:8081/incomes', data, {
                 headers: {
                     'Authorization': `Bearer ${token}`,
@@ -59,8 +57,8 @@
                 },
             });
 
-            if (response.status === 200) {
-                console.log("cool");
+            if (response.status === 201) {
+                //console.log("cool");
             } else {
                 console.error('Error:', response.status);
             }
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte
index 2eec838..f2f2009 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte
@@ -4,14 +4,6 @@
     import Graph3 from '../graphs/Graph3.svelte';
     import Expenses from "../infolists/Expenses.svelte";
     import Incomes from "../infolists/Incomes.svelte";
-
-    function updateAll() {
-        Graph1.updateGraph();
-        Graph2.updateGraph();
-        Graph3.updateGraph();
-        Expenses.updateInfo();
-        Incomes.updateInfo();
-    }
 </script>
 
 <div id="dataMenu">
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
index 05211af..5b6b490 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
@@ -1,26 +1,33 @@
 <script>
     import { onMount } from 'svelte';
-    import {incomeData, expenseData} from "../../stores.js";
+    import { incomeData, expenseData } from "../../stores.js";
 
     let infobar1, infobar2, infobar3, infobar4;
     let totalExpenses = 0;
     let totalIncomes = 0;
+    let lastMonthIncome = 800; // Dummy last month's income
+    let lastMonthExpense = 200; // Dummy last month's expense
 
     function updateInfo() {
-        totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
-        totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
+        totalExpenses = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
+        totalIncomes = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
+
+        const incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
+        const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
 
         try {
-            infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses}$`;
-            infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${totalIncomes}$</span>`;
+            infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: 150%">${totalExpenses.toFixed(2)}$</span>`;
+            infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: 150%">${totalIncomes.toFixed(2)}$</span>`;
+
+            infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: 150%">${incomeDifference.toFixed(2)}%</span>`;
+            infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: 150%">${expenseDifference.toFixed(2)}%</span>`;
         } catch {
             console.log("not yet loaded");
         }
-
     }
 
     $: {
-        if ($incomeData && $expenseData) {
+        if ($incomeData || $expenseData) {
             updateInfo();
         }
     }
@@ -49,15 +56,16 @@
         width: 200px;
         min-width: 100px;
         height: 100px;
-        color:white;
+        color: white;
         padding: 10px;
         border-radius: 10px;
         background-color: #212942;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+        overflow: hidden;
     }
 
     .infobarElement:hover {
-        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/Navbar.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/Navbar.svelte
deleted file mode 100644
index 39f0d01..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/Navbar.svelte
+++ /dev/null
@@ -1,47 +0,0 @@
-<script>
-
-</script>
-
-<div id="navbar">
-    <div id="profilePic">PROFILEPIC</div>
-    <div class="menuItem" on:click={() => console.log("help clicked")}>Help</div>
-    <div class="menuItem" on:click={() => console.log("contact clicked")}>Contact</div>
-    <div class="menuItem" on:click={() => console.log("settings clicked")}>Settings</div>
-    <div class="menuItem" on:click={() => console.log("logout clicked")}>Logout</div>
-</div>
-
-<style>
-    #navbar {
-        padding:0;
-        background-color: rgb(33, 41, 66);
-        display: flex;
-        justify-content: flex-end;
-    }
-
-    .menuItem {
-        font-family: 'Source Sans Pro', sans-serif;
-        color:white;
-        display: flex;
-        align-items: center;
-        padding-left: 20px;
-        padding-right: 20px;
-        text-align: center;
-        height: 50px;
-    }
-
-    .menuItem:hover {
-        background-color: rgb(45, 60, 90);
-    }
-    
-    #profilePic {
-        margin-right:auto;
-        display: flex;
-        padding-left: 20px;
-        padding-right: 20px;
-        align-items: center;
-        color:white;
-        justify-self: left;
-    }
-
-    
-</style>
\ No newline at end of file