Merge branch 'master' of https://github.com/lumijiez/ExpenseTrackerFAF

.gitignore

@@ -4,6 +4,8 @@ target/
 !**/src/main/**/target/
 !**/src/test/**/target/
 /src/main/resources/application.properties
+/src/main/java/web/src/package.json
+/src/main/java/web/src/package-lock.json
 
 ### STS ###
 .apt_generated
@@ -32,5 +34,3 @@ build/
 
 ### VS Code ###
 .vscode/
-
-/src/main/resources/application.properties

src/main/java/com/faf223/expensetrackerfaf/config/CorsFilter.java

@@ -17,21 +17,20 @@ public class CorsFilter implements Filter {
     public void destroy() {
     }
 
+
     @Override
-    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
+    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
-            throws IOException, ServletException {
+        HttpServletResponse response = (HttpServletResponse) servletResponse;
-        HttpServletResponse response = (HttpServletResponse) res;
+        response.setHeader("Access-Control-Allow-Origin", "*");
-        HttpServletRequest request = (HttpServletRequest) req;
-
-        response.setHeader("Access-Control-Allow-Origin", "http://localhost:5173");
-        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
-        response.setHeader("Access-Control-Max-Age", "3600");
-        response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, X-Auth-Token");
         response.setHeader("Access-Control-Allow-Credentials", "true");
-
+        response.setHeader("Access-Control-Allow-Methods", "POST, GET, HEAD, OPTIONS");
-        if (!"OPTIONS".equalsIgnoreCase(request.getMethod())) {
+        response.setHeader("Access-Control-Allow-Headers", "Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");
-            chain.doFilter(req, res);
+        if ("OPTIONS".equalsIgnoreCase(((HttpServletRequest) servletRequest).getMethod())) {
+            response.setStatus(HttpServletResponse.SC_OK);
+        } else {
+            filterChain.doFilter(servletRequest, response);
         }
+
     }
 
     @Override

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

@@ -14,8 +14,10 @@
 				"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",
 				"svelte-spa-router": "^3.3.0"
 			},
 			"devDependencies": {
@@ -45,7 +47,6 @@
 			"version": "2.2.1",
 			"resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.1.tgz",
 			"integrity": "sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.0",
 				"@jridgewell/trace-mapping": "^0.3.9"
@@ -547,7 +548,6 @@
 			"version": "0.3.3",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
 			"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/set-array": "^1.0.1",
 				"@jridgewell/sourcemap-codec": "^1.4.10",
@@ -561,7 +561,6 @@
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz",
 			"integrity": "sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -570,7 +569,6 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
 			"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
-			"dev": true,
 			"engines": {
 				"node": ">=6.0.0"
 			}
@@ -578,14 +576,12 @@
 		"node_modules/@jridgewell/sourcemap-codec": {
 			"version": "1.4.15",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+			"integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
-			"dev": true
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.19",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.19.tgz",
 			"integrity": "sha512-kf37QtfW+Hwx/buWGMPcR60iF9ziHa6r/CZJIHbmcm4+0qrXiVdxegAH0F6yddEVQ7zdkjcGCgCzUu+BcbhQxw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
 				"@jridgewell/sourcemap-codec": "^1.4.14"
@@ -735,14 +731,12 @@
 		"node_modules/@types/estree": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.2.tgz",
-			"integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA==",
+			"integrity": "sha512-VeiPZ9MMwXjO32/Xu7+OwflfmeoRwkE/qzndw42gGtgJwZopBnzy2gD//NN1+go1mADzkDcqf/KnFRSjTJ8xJA=="
-			"dev": true
 		},
 		"node_modules/acorn": {
 			"version": "8.10.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
 			"integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
-			"dev": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -809,7 +803,6 @@
 			"version": "5.3.0",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
 			"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -833,7 +826,6 @@
 			"version": "3.2.1",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
 			"integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==",
-			"dev": true,
 			"dependencies": {
 				"dequal": "^2.0.3"
 			}
@@ -894,7 +886,6 @@
 			"version": "1.0.4",
 			"resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
 			"integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15",
 				"@types/estree": "^1.0.1",
@@ -965,7 +956,6 @@
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
 			"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-			"dev": true,
 			"dependencies": {
 				"mdn-data": "2.0.30",
 				"source-map-js": "^1.0.1"
@@ -986,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",
@@ -1030,7 +1025,6 @@
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
 			"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-			"dev": true,
 			"engines": {
 				"node": ">=6"
 			}
@@ -1298,7 +1292,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
 			"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0"
 			}
@@ -1498,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",
@@ -1607,7 +1605,6 @@
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
 			"integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "*"
 			}
@@ -1705,8 +1702,7 @@
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
-			"dev": true
 		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
@@ -1745,7 +1741,6 @@
 			"version": "0.30.4",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.4.tgz",
 			"integrity": "sha512-Q/TKtsC5BPm0kGqgBIF9oXAs/xEf2vRKiIB4wCRQTJOQIByZ1d+NnUOotvJOvNpi5RNIgVOMC3pOuaP1ZTDlVg==",
-			"dev": true,
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			},
@@ -1756,8 +1751,7 @@
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+			"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
-			"dev": true
 		},
 		"node_modules/mime-db": {
 			"version": "1.52.0",
@@ -1790,6 +1784,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",
@@ -1838,6 +1851,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",
@@ -1937,7 +1958,6 @@
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
 			"integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-			"dev": true,
 			"dependencies": {
 				"@types/estree": "^1.0.0",
 				"estree-walker": "^3.0.0",
@@ -2283,11 +2303,21 @@
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
 			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-			"dev": true,
 			"engines": {
 				"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",
@@ -2328,7 +2358,6 @@
 			"version": "4.2.1",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.1.tgz",
 			"integrity": "sha512-LpLqY2Jr7cRxkrTc796/AaaoMLF/1ax7cto8Ot76wrvKQhrPmZ0JgajiWPmg9mTSDqO16SSLiD17r9MsvAPTmw==",
-			"dev": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.15",
@@ -2397,6 +2426,14 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-simple-modal": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/svelte-simple-modal/-/svelte-simple-modal-1.6.1.tgz",
+			"integrity": "sha512-D4/Z7LQ6ThawYb7FlAeS/qGbcwVlqzRHn1zZgWPlEK0cp4l2UMcscqel58mp+gTuk4UX9gl516GYXcHFvuyslA==",
+			"peerDependencies": {
+				"svelte": "^3.30.0 || ^4.0.0"
+			}
+		},
 		"node_modules/svelte-spa-router": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz",

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

@@ -30,8 +30,10 @@
 		"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",
 		"svelte-spa-router": "^3.3.0"
 	}
 }

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

@@ -1,15 +1,55 @@
 <script>
-	import DashHeader from "./DashHeader.svelte";
+	import DashHeader from "./other/DashHeader.svelte";
-	import DataMenu from "./DataMenu.svelte";
+	import DataMenu from "./other/DataMenu.svelte";
-	import QuickInfobar from "./QuickInfobar.svelte";
+	import QuickInfobar from "./other/QuickInfobar.svelte";
     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 axios from "axios";
+
+
     onMount(() => {
-            if (getCookie('access_token') === null ) {
+            if (getCookie('access_token') === null) {
                     window.location.href = '/auth/login';
             }
-    })
+
+            const token = getCookie('access_token');
+            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));
+
+            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,49 +1,71 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import axios from 'axios';
+	import { incomeData } from "../../stores.js";
-	import {getCookie} from "svelte-cookie";
 
 	let ctx;
 	let chartCanvas;
+	let chart = null;
 
-	onMount(async () => {
+	function createGraph(data) {
-
-		const token = getCookie('access_token');
-
-		const config = {
-			headers: {
-				'Authorization': `Bearer ${token}`
-			}
-		};
-
 		try {
-			const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
+			function groupAndSumByCategory(incomes) {
-			console.log(response.data);
+				const groupedData = new Map();
-			const incomeData = response.data;
+				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 chartLabels = incomeData.map(item => item.incomeCategory.name);
+			const groupedIncomeData = groupAndSumByCategory(data);
-			const chartValues = incomeData.map(item => item.amount);
+
+			const chartLabels = Array.from(groupedIncomeData.keys());
+			const chartValues = Array.from(groupedIncomeData.values());
 
 			ctx = chartCanvas.getContext('2d');
-			new Chart(ctx, {
+
-				type: 'bar',
+			if (!chart) {
-				data: {
+				chart = new Chart(ctx, {
-					labels: chartLabels,
+					type: 'bar',
-					datasets: [{
+					data: {
-						label: 'Revenue',
+						labels: chartLabels,
-						backgroundColor: 'rgb(255, 99, 132)',
+						datasets: [{
-						data: chartValues
+							label: 'Revenue',
-					}]
+							backgroundColor: 'rgb(255, 99, 132)',
-				},
+							data: chartValues
-				options: {
+						}]
-					responsive: true,
+					},
-					maintainAspectRatio: false
+					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);
 		}
+	}
+
+	$: {
+		if ($incomeData) {
+			createGraph($incomeData);
+			console.log($incomeData);
+		}
+	}
+
+	onMount(() => {
+		createGraph($incomeData);
 	});
 </script>
 

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

@@ -7,8 +7,7 @@
 	let ctx;
 	let chartCanvas;
 
-	onMount(async () => {
+	async function updateGraph() {
-
 		const token = getCookie('access_token');
 
 		const config = {
@@ -65,7 +64,9 @@
 		} catch (error) {
 			console.error('Error:', error);
 		}
-	});
+	}
+
+	onMount(updateGraph);
 </script>
 
 <div id="chart">

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

@@ -7,7 +7,7 @@
 	let ctx;
 	let chartCanvas;
 
-	onMount(async () => {
+	async function updateGraph() {
 		const token = getCookie('access_token');
 
 		const config = {
@@ -50,7 +50,9 @@
 		} catch (error) {
 			console.error('Error:', error);
 		}
-	});
+	}
+
+	onMount(updateGraph);
 </script>
 
 <div id="chart">

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

@@ -2,11 +2,13 @@
     import { onMount, afterUpdate } from 'svelte';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
+    import ContentExpense from "./contents/ContentExpense.svelte";
 
     let data = [];
     let parentHeight;
+    let listParentHeight;
 
-    onMount(async () => {
+    async function updateInfo() {
         const token = getCookie('access_token');
 
         const config = {
@@ -22,16 +24,19 @@
         } catch (error) {
             console.error('Error:', error);
         }
-    });
+    }
+    onMount(updateInfo);
 
     afterUpdate(() => {
         parentHeight = document.querySelector('#expenseInfo').offsetHeight;
+        listParentHeight = document.querySelector('#expenseList').offsetHeight;
     });
 </script>
 
 <div id="expenseInfo" style="max-height: {parentHeight}px;">
-    <h2 id="text">Expenses</h2>
+    <ContentExpense />
-    <div id="expenseList">
+
+    <div id="expenseList" style="max-height: {listParentHeight}px;">
         <ul>
             {#each data as item}
                 <li>
@@ -44,32 +49,21 @@
     </div>
 </div>
 
+
 <style>
-    #text {
-        padding: 0 0 10px;
-        margin: 0;
-    }
-
     #expenseInfo {
-        flex: 1;
+        display: flex;
-        border-radius: 10px;
+        flex-direction: column;
-        margin: 10px;
-        overflow-y: auto;
-        max-height: 100%;
-    }
-
-    h2 {
-        position: sticky;
-        top: 0;
-        background-color: #f2f2f2;
-        padding: 10px;
-        border-radius: 10px 10px 0 0;
-        z-index: 1;
     }
 
     #expenseList {
         margin-top: 10px;
         scrollbar-width: none;
+        flex: 1;
+        border-radius: 10px;
+        margin: 10px;
+        overflow-y: auto;
+        max-height: 100%;
     }
 
     #expenseList::-webkit-scrollbar {

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

@@ -1,12 +1,15 @@
 <script>
+
     import { onMount, afterUpdate } from 'svelte';
     import axios from 'axios';
-    import { getCookie } from "svelte-cookie";
+    import {getCookie} from "svelte-cookie";
+    import ContentIncome from "./contents/ContentIncome.svelte";
 
     let data = [];
     let parentHeight;
+    let listParentHeight;
 
-    onMount(async () => {
+    async function updateInfo() {
         const token = getCookie('access_token');
 
         const config = {
@@ -22,16 +25,19 @@
         } catch (error) {
             console.error('Error:', error);
         }
-    });
+    }
+    onMount(updateInfo);
 
     afterUpdate(() => {
         parentHeight = document.querySelector('#incomeInfo').offsetHeight;
+        listParentHeight = document.querySelector('#expenseList').offsetHeight;
     });
 </script>
 
 <div id="incomeInfo" style="max-height: {parentHeight}px;">
-    <h2 id="text">Incomes</h2>
+    <ContentIncome />
-    <div id="incomeList">
+
+    <div id="incomeList" style="max-height: {listParentHeight}px;">
         <ul>
             {#each data as item}
                 <li>
@@ -45,12 +51,14 @@
 </div>
 
 <style>
-    #text {
+    #incomeInfo {
-        padding: 0 0 10px;
+        display: flex;
-        margin: 0;
+        flex-direction: column;
     }
 
-    #incomeInfo {
+    #incomeList {
+        margin-top: 10px;
+        scrollbar-width: none;
         flex: 1;
         border-radius: 10px;
         margin: 10px;
@@ -58,19 +66,6 @@
         max-height: 100%;
     }
 
-    h2 {
-        position: sticky;
-        top: 0;
-        background-color: #f2f2f2;
-        padding: 10px;
-        border-radius: 10px 10px 0 0;
-        z-index: 1;
-    }
-
-    #incomeList {
-        margin-top: 10px;
-    }
-
     ul {
         list-style: none;
         padding: 0;
@@ -89,4 +84,7 @@
         box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     }
 
+    #incomeList::-webkit-scrollbar {
+        display: none;
+    }
 </style>

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

@@ -0,0 +1,169 @@
+<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";
+
+    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 data = {
+            expenseCategory: selectedExpense.id,
+            amount: amount,
+        };
+
+        try {
+            const token = getCookie('access_token');
+            console.log(token);
+            const response = await axios.post('http://localhost:8081/expenses', data, {
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            console.log(response.data);
+
+            if (response.status === 200) {
+                console.log("cool");
+            } else {
+                console.error('Error:', response.status);
+            }
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    };
+</script>
+
+<div id="exp">
+    <div id="optionField">
+        <h2>Expenses</h2>
+        <div id="openModal" class="plus-button" role="button" tabindex="1" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+            +
+        </div>
+    </div>
+    <Modal bind:showModal>
+        <div class="expense-form">
+            <h3>Expense Details</h3>
+            <div class="form-group">
+                <label for="amount">Amount:</label>
+                <input type="text" id="amount" class="form-control" bind:value={amount} />
+            </div>
+
+            <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)}
+                        {#if expense.id !== undefined}
+                            <option value={expense.id}>{expense.name}</option>
+                        {/if}
+                    {/each}
+                </select>
+            </div>
+
+            <button class="btn btn-primary" on:click={createExpense}>Submit</button>
+        </div>
+    </Modal>
+</div>
+
+
+<style>
+    #exp {
+        padding: 20px;
+        text-align: center;
+    }
+
+    #optionField {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .plus-button {
+        font-size: 24px;
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+        cursor: pointer;
+    }
+
+    .plus-button:hover {
+        background-color: #0056b3;
+    }
+
+    .expense-form {
+        background-color: #fff;
+        border-radius: 20px;
+        padding: 20px;
+        max-width: 400px;
+        margin: 0 auto;
+    }
+
+    h3 {
+        font-size: 20px;
+        margin-bottom: 20px;
+    }
+
+    .form-group {
+        margin-bottom: 15px;
+    }
+
+    label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5px;
+    }
+
+    .form-control {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+    }
+
+    select.form-control {
+        height: 40px;
+    }
+
+    .btn {
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        padding: 10px 20px;
+        cursor: pointer;
+    }
+
+    .btn:hover {
+        background-color: #0056b3;
+    }
+</style>

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

@@ -0,0 +1,201 @@
+<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 {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');
+
+            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 data = {
+            incomeCategory: selectedIncome.id,
+            amount: amount,
+        };
+
+        addNewIncome(selectedIncome.id, amount);
+
+        try {
+            const token = getCookie('access_token');
+            console.log(token);
+            const response = await axios.post('http://localhost:8081/incomes', data, {
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            if (response.status === 200) {
+                console.log("cool");
+            } else {
+                console.error('Error:', response.status);
+            }
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    };
+</script>
+
+<div id="inc">
+    <div id="optionField">
+        <h2>Incomes</h2>
+        <div id="openModal" class="plus-button" role="button" tabindex="1" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
+            +
+        </div>
+    </div>
+    <Modal bind:showModal>
+        <div class="income-form">
+            <h3>Income Details</h3>
+            <div class="form-group">
+                <label for="amount">Amount:</label>
+                <input type="text" id="amount" class="form-control" bind:value={amount} />
+            </div>
+
+            <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)}
+                        {#if income.id !== undefined}
+                            <option value={income.id}>{income.name}</option>
+                        {/if}
+                    {/each}
+                </select>
+            </div>
+
+            <button class="btn btn-primary" on:click={createIncome}>Submit</button>
+        </div>
+    </Modal>
+</div>
+
+
+<style>
+    #inc {
+        padding: 20px;
+        text-align: center;
+    }
+
+    #optionField {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .plus-button {
+        font-size: 24px;
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
+        cursor: pointer;
+    }
+
+    .plus-button:hover {
+        background-color: #0056b3;
+    }
+
+    .income-form {
+        background-color: #fff;
+        border-radius: 5px;
+        padding: 20px;
+        max-width: 400px;
+        margin: 0 auto;
+    }
+
+    h3 {
+        font-size: 20px;
+        margin-bottom: 20px;
+    }
+
+    .form-group {
+        margin-bottom: 15px;
+    }
+
+    label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5px;
+    }
+
+    .form-control {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+    }
+
+    select.form-control {
+        height: 40px;
+    }
+
+    .btn {
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        padding: 10px 20px;
+        cursor: pointer;
+    }
+
+    .btn:hover {
+        background-color: #0056b3;
+    }
+</style>

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

@@ -0,0 +1,60 @@
+<script>
+    export let showModal; // boolean
+
+    let dialog; // HTMLDialogElement
+
+    $: if (dialog && showModal) dialog.showModal();
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+        bind:this={dialog}
+        on:close={() => (showModal = false)}
+        on:click|self={() => dialog.close()}
+>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div on:click|stopPropagation>
+        <slot name="header" />
+        <slot />
+    </div>
+</dialog>
+
+<style>
+    dialog {
+        max-width: 32em;
+        border-radius: 20px;
+        border: none;
+        padding: 0;
+    }
+    dialog::backdrop {
+        background: rgba(0, 0, 0, 0.3);
+    }
+    dialog > div {
+        padding: 1em;
+    }
+    dialog[open] {
+        animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    @keyframes zoom {
+        from {
+            transform: scale(0.95);
+        }
+        to {
+            transform: scale(1);
+        }
+    }
+    dialog[open]::backdrop {
+        animation: fade 0.2s ease-out;
+    }
+    @keyframes fade {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+    button {
+        display: block;
+    }
+</style>

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

@@ -1,9 +1,17 @@
 <script>
-    import Graph1 from './graphs/Graph1.svelte';
+    import Graph1 from '../graphs/Graph1.svelte';
-    import Graph2 from './graphs/Graph2.svelte';
+    import Graph2 from '../graphs/Graph2.svelte';
-    import Graph3 from './graphs/Graph3.svelte';
+    import Graph3 from '../graphs/Graph3.svelte';
-    import Expenses from "./Expenses.svelte";
+    import Expenses from "../infolists/Expenses.svelte";
-    import Incomes from "./Incomes.svelte";
+    import Incomes from "../infolists/Incomes.svelte";
+
+    function updateAll() {
+        Graph1.updateGraph();
+        Graph2.updateGraph();
+        Graph3.updateGraph();
+        Expenses.updateInfo();
+        Incomes.updateInfo();
+    }
 </script>
 
 <div id="dataMenu">

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([]);