LIVE UPDATE WORKS YESSSS

src/main/java/com/faf223/expensetrackerfaf/web/package-lock.json

@@ -14,6 +14,7 @@
 				"chart.js": "^4.4.0",
 				"email-validator": "^2.0.4",
 				"js-cookie": "^3.0.5",
+				"stores": "^1.0.0",
 				"svelte-cookie": "^1.0.1",
 				"svelte-fa": "^3.0.4",
 				"svelte-simple-modal": "^1.6.1",
@@ -975,6 +976,11 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/curry": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/curry/-/curry-1.2.0.tgz",
+			"integrity": "sha512-PAdmqPH2DUYTCc/aknv6RxRxmqdRHclvbz+wP8t1Xpg2Nu13qg+oLb6/5iFoDmf4dbmC9loYoy9PwwGbFt/AqA=="
+		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1485,6 +1491,11 @@
 			"integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
 			"dev": true
 		},
+		"node_modules/graceful-fs-stream": {
+			"version": "0.0.1",
+			"resolved": "https://registry.npmjs.org/graceful-fs-stream/-/graceful-fs-stream-0.0.1.tgz",
+			"integrity": "sha512-yZ9Lx4O/LbIQ0prZNtXOt97h8ICA2fwPcmSkrjZcOnXKrMzR8ao+kE78N76su0ffaawHLHyFYt75AkgHdVb41Q=="
+		},
 		"node_modules/graphemer": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -1785,6 +1796,25 @@
 				"node": "*"
 			}
 		},
+		"node_modules/minimist": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+			"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+			"funding": {
+				"url": "https://github.com/sponsors/ljharb"
+			}
+		},
+		"node_modules/mkdirp": {
+			"version": "0.5.6",
+			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+			"dependencies": {
+				"minimist": "^1.2.6"
+			},
+			"bin": {
+				"mkdirp": "bin/cmd.js"
+			}
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -1833,6 +1863,14 @@
 			"integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
 			"dev": true
 		},
+		"node_modules/on-headers": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+			"integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+			"engines": {
+				"node": ">= 0.8"
+			}
+		},
 		"node_modules/once": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -2281,6 +2319,17 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/stores": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/stores/-/stores-1.0.0.tgz",
+			"integrity": "sha512-aOWM422mpxSj37uo9R1aVKDF2sDRCzjdbn6CYT/H9BECxuuliALmAZcmRVI9/Wq6Pu/HKDY1xZ+ssSuvY6fLlA==",
+			"dependencies": {
+				"curry": "~1.2.0",
+				"graceful-fs-stream": "0.0.1",
+				"mkdirp": "^0.5.1",
+				"on-headers": "^1.0.1"
+			}
+		},
 		"node_modules/strip-ansi": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",

src/main/java/com/faf223/expensetrackerfaf/web/package.json

@@ -30,6 +30,7 @@
 		"chart.js": "^4.4.0",
 		"email-validator": "^2.0.4",
 		"js-cookie": "^3.0.5",
+		"stores": "^1.0.0",
 		"svelte-cookie": "^1.0.1",
 		"svelte-fa": "^3.0.4",
 		"svelte-simple-modal": "^1.6.1",

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Dashboard.svelte

@@ -4,33 +4,52 @@
 	import QuickInfobar from "./other/QuickInfobar.svelte";
     import { getCookie } from "svelte-cookie";
     import {onMount} from "svelte";
-    import {writable} from "svelte/store";
+
+    import {incomeData} from "../stores.js";
+    import {expenseData} from "../stores.js";
+    import {incomeTypes} from "../stores.js";
+
     import axios from "axios";
 
-    const incomeData = writable([]);
-    const expenseData = writable([]);
 
-    onMount(async () => {
+    onMount(() => {
-            if (getCookie('access_token') === null ) {
+            if (getCookie('access_token') === null) {
                     window.location.href = '/auth/login';
             }
 
-            try {
+            const token = getCookie('access_token');
-                    const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
+            const config = {
+                    headers: {
+                            'Authorization': `Bearer ${token}`
+                    }
+            };
+
+            const incomePromise = axios.get('http://localhost:8081/incomes/personal-incomes', config)
+                    .then(response => {
                             incomeData.set(response.data);
-            } catch (error) {
+                            console.log("Received Income Data");
-                    console.error('Error fetching income data:', error);
-            }
-
-            try {
-                    const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
-                    expenseData.set(response.data);
-            } catch (error) {
-                    console.error('Error fetching expense data:', error);
-            }
-
-            console.log(getCookie('access_token'));
                     })
+                    .catch(error => console.error('Error fetching income data:', error));
+
+            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));
+
+            Promise.all([incomePromise, expensePromise, incomeTypesPromise])
+                    .then(() => {
+                            console.log(getCookie('access_token'));
+                    });
+    });
 </script>
 
 <div id="dashboard">

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte

@@ -1,36 +1,37 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import { incomeData } from '../Dashboard.svelte';
+	import { incomeData } from "../../stores.js";
+
 	let ctx;
 	let chartCanvas;
+	let chart = null;
 
+	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) + income.amount);
+								groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
 							} else {
 								groupedData.set(category, income.amount);
 							}
-		});
+						}
+				);
 				return groupedData;
 			}
 
-	function updateGraph() {
+			const groupedIncomeData = groupAndSumByCategory(data);
-		const incomeDataArray = $incomeData;
-		const groupedIncomeData = groupAndSumByCategory(incomeDataArray);
 
 			const chartLabels = Array.from(groupedIncomeData.keys());
 			const chartValues = Array.from(groupedIncomeData.values());
 
-		if (chartCanvas) {
 			ctx = chartCanvas.getContext('2d');
-			if (ctx.chart) {
+
-				ctx.chart.destroy(); 
+			if (!chart) {
-			}
+				chart = new Chart(ctx, {
-			new Chart(ctx, {
 					type: 'bar',
 					data: {
 						labels: chartLabels,
@@ -45,18 +46,33 @@
 						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) {
+			createGraph($incomeData);
+			console.log($incomeData);
+		}
+	}
+
+	onMount(() => {
+		createGraph($incomeData);
+	});
 </script>
 
 <div id="chart">
 	<canvas bind:this={chartCanvas}></canvas>
 </div>
 
-
-
 <style>
 	#chart {
 		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte

@@ -122,10 +122,8 @@
 
     .expense-form {
         background-color: #fff;
-        border: 1px solid #ccc;
+        border-radius: 20px;
-        border-radius: 5px;
         padding: 20px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         max-width: 400px;
         margin: 0 auto;
     }

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte

@@ -4,12 +4,44 @@
     import { writable } from 'svelte/store';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
+    import {incomeData} from "../../../stores.js";
+    import {incomeTypes} from "../../../stores.js";
 
     let showModal;
     let amount = '';
+    let newData;
 
     const selectedIncomeId = writable('');
 
+    function addNewIncome(id, amount) {
+        const today = new Date().toISOString().split('T')[0];
+        const incomeCategory = $incomeTypes.find(incomeType => incomeType.id === id);
+
+        console.log(amount);
+
+        if (incomeCategory) {
+            const newIncome = {
+                incomeId: 0,
+                userDTO: {
+                    name: "Dummy",
+                    surname: "User",
+                    username: "dummyuser"
+                },
+                incomeCategory: incomeCategory,
+                date: today,
+                amount: amount
+            };
+
+            newData = $incomeData;
+            newData.push(newIncome);
+            $incomeData = newData;
+            console.log("ggWPPPPP", newIncome);
+        } else {
+            console.error('Income category not found for id:', id);
+        }
+    }
+
+
     onMount(async () => {
         try {
             const token = getCookie('access_token');
@@ -37,6 +69,8 @@
             amount: amount,
         };
 
+        addNewIncome(selectedIncome.id, amount);
+
         try {
             const token = getCookie('access_token');
             console.log(token);
@@ -47,8 +81,6 @@
                 },
             });
 
-            console.log(response.data);
-
             if (response.status === 200) {
                 console.log("cool");
             } else {
@@ -122,10 +154,8 @@
 
     .income-form {
         background-color: #fff;
-        border: 1px solid #ccc;
         border-radius: 5px;
         padding: 20px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         max-width: 400px;
         margin: 0 auto;
     }

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/modals/Modal.svelte

@@ -15,18 +15,14 @@
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div on:click|stopPropagation>
         <slot name="header" />
-        <hr />
         <slot />
-        <hr />
-        <!-- svelte-ignore a11y-autofocus -->
-        <button autofocus on:click={() => dialog.close()}>close modal</button>
     </div>
 </dialog>
 
 <style>
     dialog {
         max-width: 32em;
-        border-radius: 0.2em;
+        border-radius: 20px;
         border: none;
         padding: 0;
     }

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js

@@ -0,0 +1,7 @@
+import {writable} from "svelte/store";
+
+export const incomeData = writable([]);
+
+export const expenseData = writable([]);
+
+export const incomeTypes = writable([]);