From 09fd20d071d7191ba68c71a84b93fa470acf58db Mon Sep 17 00:00:00 2001
From: Daniel <danthevip@gmail.com>
Date: Sat, 9 Dec 2023 00:36:43 +0200
Subject: [PATCH] Front upd

---
 .../routes/dashboard/board/Dashboard.svelte   |  3 ++
 .../routes/dashboard/board/Settings.svelte    | 45 ++++++++++++++++---
 .../routes/dashboard/board/Statistics.svelte  |  2 +
 .../board/expenses/graphs/Graph2.svelte       | 23 +++++++---
 .../expenses/infolists/ContentExpense.svelte  | 11 ++---
 .../board/expenses/infolists/Expenses.svelte  |  2 +-
 .../board/expenses/other/DashHeader.svelte    |  7 +--
 .../board/expenses/other/DataMenu.svelte      |  1 -
 .../board/incomes/graphs/Graph1.svelte        |  3 +-
 .../board/incomes/infolists/Incomes.svelte    |  2 +-
 .../board/incomes/other/DashHeader.svelte     |  4 +-
 .../board/incomes/other/DataMenu.svelte       |  1 -
 .../src/routes/dashboard/menu/SideMenu.svelte | 11 +++--
 .../web/src/routes/dashboard/styles.js        | 16 ++++++-
 14 files changed, 97 insertions(+), 34 deletions(-)
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Statistics.svelte

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 dda54a7..a956f8a 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
@@ -15,6 +15,7 @@
         }
 
         import axios from "axios";
+        import Statistics from "./Statistics.svelte";
 
         onMount(async () => {
                 const token = getCookie('access_token');
@@ -64,6 +65,8 @@
                         <IncomeDashboard />
                 {:else if $selectedTab === 'settings'}
                         <Settings />
+                {:else if $selectedTab === 'statistics'}
+                        <Statistics />
                 {/if}
 </div>
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Settings.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Settings.svelte
index 14d6222..d47c660 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Settings.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Settings.svelte
@@ -2,6 +2,7 @@
     import {globalStyles} from "../styles.js";
     import {themeDark} from "../styles.js";
     import {themeDefault} from "../styles.js";
+    import {themeColorful} from "../styles.js";
 
     function theme_dark() {
         $globalStyles = themeDark;
@@ -10,19 +11,34 @@
     function theme_default() {
         $globalStyles = themeDefault;
     }
+
+    function theme_colorful() {
+        $globalStyles = themeColorful;
+    }
 </script>
 
-<div>
+<div style="color: {$globalStyles.dashTextColor}">
     <h1>Settings</h1>
-    <button class="button-32" on:click={() => theme_default()}>Select</button>
+    <div id="buttonContainer">
+        <div class="settingEntry">
+            <span><svg style="fill: yellow" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg></span>
+            <h3 class="settingName">Light Mode</h3>
+            <button class="button-32" on:click={() => theme_default()}>Select</button>
+        </div>
 
-    <button class="button-32" on:click={() => theme_dark()}>Select</button>
+        <div class="settingEntry">
+            <span><svg style="fill:darkblue" xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg></span>
+            <h3 class="settingName">Dark Mode</h3>
+            <button class="button-32" on:click={() => theme_dark()}>Select</button>
+        </div>
 
-    <button class="button-32" on:click={() => theme_dark()}>Select</button>
+        <div class="settingEntry">
+            <span><svg style="fill:pink" xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M160 0a48 48 0 1 1 0 96 48 48 0 1 1 0-96zM88 384H70.2c-10.9 0-18.6-10.7-15.2-21.1L93.3 248.1 59.4 304.5c-9.1 15.1-28.8 20-43.9 10.9s-20-28.8-10.9-43.9l53.6-89.2c20.3-33.7 56.7-54.3 96-54.3h11.6c39.3 0 75.7 20.6 96 54.3l53.6 89.2c9.1 15.1 4.2 34.8-10.9 43.9s-34.8 4.2-43.9-10.9l-33.9-56.3L265 362.9c3.5 10.4-4.3 21.1-15.2 21.1H232v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V384H152v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V384z"/></svg></span>
+            <h3 class="settingName">Pinky Theme</h3>
+            <button class="button-32" on:click={() => theme_colorful()}>Select</button>
+        </div>
+    </div>
 
-    <button class="button-32" on:click={() => theme_dark()}>Select</button>
-
-    <button class="button-32" on:click={() => theme_dark()}>Select</button>
 </div>
 
 <style>
@@ -56,4 +72,19 @@
         -webkit-filter: saturate(0.2) opacity(0.5);
         cursor: not-allowed;
     }
+
+    #buttonContainer {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .settingEntry {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .settingName {
+        margin: 20px;
+    }
 </style>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Statistics.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Statistics.svelte
new file mode 100644
index 0000000..99e3c96
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/Statistics.svelte
@@ -0,0 +1,2 @@
+<h1>ACT LIKE THERE'S A NEURAL NETWORK HERE</h1>
+<h1>IT'S REALLY IN THE WORKS THOUGH</h1>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph2.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph2.svelte
index 0901c55..5a820bb 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph2.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph2.svelte
@@ -1,7 +1,7 @@
 <script>
 	import Chart from 'chart.js/auto';
-	import { onMount } from 'svelte';
-	import { expenseData } from "../../../stores.js";
+	import {onMount} from 'svelte';
+	import {expenseData} from "../../../stores.js";
 	import {globalStyles} from "../../../styles.js";
 
 	let ctx;
@@ -10,26 +10,35 @@
 
 	function groupAndSumByCategory() {
 		const groupedData = new Map();
-		console.log($expenseData)
 		$expenseData.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);
+						groupedData.set(category, parseInt(expense.amount));
 					}
 				}
 		);
-		return groupedData;
+
+		return new Map([...groupedData.entries()].sort());
 	}
 
 	function createGraph() {
 		try {
 			const groupedExpenseData = groupAndSumByCategory();
+			console.log("============= here start")
+			console.log(groupedExpenseData);
 
-			const chartLabels = Array.from(groupedExpenseData.keys());
-			const chartValues = Array.from(groupedExpenseData.values());
+			const chartLabels = [];
+			const chartValues = [];
 
+			for (const [label, value] of groupedExpenseData.entries()) {
+				chartLabels.push(label);
+				chartValues.push(value);
+			}
+			console.log(chartLabels)
+			console.log(chartValues)
+			console.log("============= here end")
 			ctx = chartCanvas.getContext('2d');
 
 			if (!chart) {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte
index 9211115..b65dbbd 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/ContentExpense.svelte
@@ -6,7 +6,7 @@
     import {expenseTypes, expenseData} from "../../../stores.js";
 
 
-    let showModal;
+    var showModal;
     let amount = '';
     let newData;
 
@@ -17,8 +17,8 @@
         const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
 
         if (expenseCategory) {
-            const newIncome = {
-                incomeId: 0,
+            const newExpense = {
+                expenseId: 0,
                 userDTO: {
                     name: "Dummy",
                     surname: "User",
@@ -30,7 +30,8 @@
             };
 
             newData = $expenseData;
-            newData.push(newIncome);
+            newData.push(newExpense);
+            console.log(newExpense);
             $expenseData = newData;
         } else {
             console.error('Expense category not found for id:', id);
@@ -38,6 +39,7 @@
     }
 
     const createExpense = async () => {
+        showModal = false;
         const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
         const data = {
             expenseCategory: selectedExpense.id,
@@ -45,7 +47,6 @@
         };
 
         addNewExpense(selectedExpense.id, parseInt(amount));
-
         try {
             const token = getCookie('access_token');
 
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte
index e7ff869..0f28cb4 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte
@@ -30,7 +30,7 @@
                         {@html textToIcon[item.expenseCategory.name]}
                     {/if}
                     <span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
-                    <span style="margin-right: 10px; color: red; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
+                    <span style="font-weight:bold; margin-right: 10px; color: red; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
                     </span>
                     <span style="">{`${item.date}`}</span>
                 </li>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte
index ed861b9..c19c7e9 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte
@@ -1,19 +1,20 @@
 <script>
 
+import {globalStyles} from "../../../styles.js";
 </script>
 
 <div id="header">
-    <div id="dashboardTitleWrapper">
+    <div id="dashboardTitleWrapper" style="color: {$globalStyles.dashTextColor}">
         <h5>Hello, welcome to your</h5>
         <h1 id="dashboardTitle">Dashboard</h1>
     </div>
 
     <div id="icons">
         <div class="headerbtn searchButton">
-            <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+            <svg style="fill: {$globalStyles.dashTextColor}" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
         </div>
         <div class="headerbtn notificationButton">
-            <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
+            <svg style="fill: {$globalStyles.dashTextColor}" xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
         </div>
     </div>
 </div>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte
index 404aec0..c03fb20 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte
@@ -182,7 +182,6 @@
     }
 
     function filterByCategory(category) {
-        console.log(category)
         let tempArr = $tempExpense.filter(expense => expense.expenseCategory.name === category);
         expenseData.set(tempArr);
     }
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph1.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph1.svelte
index 0a4ff57..cd24fc8 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph1.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph1.svelte
@@ -26,7 +26,8 @@
 					}
 				}
 		);
-		return groupedData;
+
+		return new Map([...groupedData.entries()].sort());;
 	}
 
 	function createGraph() {
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Incomes.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Incomes.svelte
index 3d9347f..5d3339a 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Incomes.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Incomes.svelte
@@ -26,7 +26,7 @@
                         {@html textToIcon[item.incomeCategory.name]}
                     {/if}
                     <span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
-                    <span style="margin-right: 10px; color: green; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
+                    <span style="font-weight:bold; margin-right: 10px; color: green; font-size: larger">{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}</span>
                     </span>
                     <span style="">{`${item.date}`}</span>
                 </li>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DashHeader.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DashHeader.svelte
index ed861b9..ca556fb 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DashHeader.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DashHeader.svelte
@@ -1,9 +1,9 @@
 <script>
-
+    import {globalStyles} from "../../../styles.js";
 </script>
 
 <div id="header">
-    <div id="dashboardTitleWrapper">
+    <div id="dashboardTitleWrapper" style="color: {$globalStyles.dashTextColor}">
         <h5>Hello, welcome to your</h5>
         <h1 id="dashboardTitle">Dashboard</h1>
     </div>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DataMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DataMenu.svelte
index 4421280..df6190d 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DataMenu.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DataMenu.svelte
@@ -40,7 +40,6 @@
     onMount(() => {
         document.body.addEventListener("click", clickOutsideHandler);
 
-        // Clean up the event listener when the component is destroyed
         return () => {
             document.body.removeEventListener("click", clickOutsideHandler);
         };
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte
index d33250c..69286ab 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte
@@ -52,11 +52,16 @@
             <span class="sideMenuItemText">Revenues</span>
         </div>
 
-        <div class="sideMenuItem">
-            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>
-            <span class="sideMenuItemText">General</span>
+        <div on:click={() => onTabClick('statistics')} tabindex="0" role="button" class="sideMenuItem">
+            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M160 80c0-26.5 21.5-48 48-48h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V80zM0 272c0-26.5 21.5-48 48-48H80c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V272zM368 96h32c26.5 0 48 21.5 48 48V432c0 26.5-21.5 48-48 48H368c-26.5 0-48-21.5-48-48V144c0-26.5 21.5-48 48-48z"/></svg>
+            <span class="sideMenuItemText">Statistics</span>
         </div>
 
+<!--        <div class="sideMenuItem">-->
+<!--            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">&lt;!&ndash;! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. &ndash;&gt;<path d="M64 64C28.7 64 0 92.7 0 128V384c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V128c0-35.3-28.7-64-64-64H64zm64 320H64V320c35.3 0 64 28.7 64 64zM64 192V128h64c0 35.3-28.7 64-64 64zM448 384c0-35.3 28.7-64 64-64v64H448zm64-192c-35.3 0-64-28.7-64-64h64v64zM288 160a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"/></svg>-->
+<!--            <span class="sideMenuItemText">General</span>-->
+<!--        </div>-->
+
         <div on:click={() => onTabClick('settings')} tabindex="0" role="button" class="sideMenuItem">
             <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
             <span class="sideMenuItemText">Settings</span>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/styles.js b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/styles.js
index 306bba4..cb3f057 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/styles.js
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/styles.js
@@ -4,15 +4,27 @@ export const themeDefault = {
     mainColor: '#172233',
     dashColor: '#F5F2F3',
     color: 'black',
-    altColor: 'white'
+    altColor: 'white',
+    dashTextColor: 'black',
+    mainDataColor: '#F5F2F3'
 }
 
 export const themeDark = {
     mainColor: '#000000',
     dashColor: '#202020',
     color: 'black',
-    altColor: 'white'
+    altColor: 'white',
+    dashTextColor: 'white',
+    mainDataColor: 'black'
 }
 
+export const themeColorful = {
+    mainColor: '#F75590',
+    dashColor: '#FCE4D8',
+    color: 'black',
+    altColor: 'white',
+    dashTextColor: 'black',
+    mainDataColor: '#FCE4D8'
+}
 export const globalStyles = writable(themeDefault);