src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/+page.svelte

@@ -1,11 +1,18 @@
 <script>
     import Dashboard from './board/Dashboard.svelte';
     import SideMenu from './menu/SideMenu.svelte';
+
+    import {selectedTab} from "./stores.js";
+
+    function handleTabClick(tab) {
+        selectedTab.set(tab);
+    }
+
 </script>
 
 <div id="wrapper">
-    <SideMenu />
+    <SideMenu onTabClick={handleTabClick} />
-    <Dashboard />
+    <Dashboard {selectedTab} />
 </div>
 
 <style>

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

@@ -1,15 +1,12 @@
 <script>
-	import DashHeader from "./other/DashHeader.svelte";
-	import DataMenu from "./other/DataMenu.svelte";
-	import QuickInfobar from "./other/QuickInfobar.svelte";
         import { getCookie } from "svelte-cookie";
         import { onMount } from "svelte";
-
+        import ExpenseDashboard from "./ExpenseDashboard.svelte";
-    import {incomeData, expenseData, incomeTypes, expenseTypes} from "../stores.js";
+        import IncomeDashboard from "./IncomeDashboard.svelte";
+        import { incomeData, expenseData, incomeTypes, expenseTypes, selectedTab } from "../stores.js";
 
         import axios from "axios";
 
-
         onMount(async () => {
                 const token = getCookie('access_token');
 
@@ -43,9 +40,13 @@
 </script>
 
 <div id="dashboard">
-        <DashHeader />
+        <div id="dashboard">
-        <QuickInfobar />
+                {#if $selectedTab === 'expenses'}
-        <DataMenu />
+                        <ExpenseDashboard {expenseData} {expenseTypes} />
+                {:else if $selectedTab === 'incomes'}
+                        <IncomeDashboard {incomeData} {incomeTypes} />
+                {/if}
+        </div>
 </div>
 
 <style>

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

@@ -0,0 +1,9 @@
+<script>
+    import DashHeader from "./expenses/other/DashHeader.svelte";
+    import DataMenu from "./expenses/other/DataMenu.svelte";
+    import QuickInfobar from "./expenses/other/QuickInfobar.svelte";
+</script>
+
+<DashHeader />
+<QuickInfobar />
+<DataMenu />

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

@@ -0,0 +1,9 @@
+<script>
+    import DashHeader from "./incomes/other/DashHeader.svelte";
+    import DataMenu from "./incomes/other/DataMenu.svelte";
+    import QuickInfobar from "./incomes/other/QuickInfobar.svelte";
+</script>
+
+<DashHeader />
+<QuickInfobar />
+<DataMenu />

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 { expenseData } from "../../../stores.js";
 
 	let ctx;
 	let chartCanvas;

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

@@ -1,7 +1,7 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import { incomeData, expenseData } from "../../stores.js";
+	import { incomeData, expenseData } from "../../../stores.js";
 
 	let ctx;
 	let chartCanvas;

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

@@ -1,7 +1,7 @@
 <script>
     import { onMount, afterUpdate } from 'svelte';
     import ContentExpense from "./contents/ContentExpense.svelte";
-    import {expenseData} from "../../stores.js";
+    import {expenseData} from "../../../stores.js";
 
     let parentHeight;
     let listParentHeight;
@@ -36,6 +36,7 @@
     #expenseInfo {
         display: flex;
         flex-direction: column;
+        min-width: 300px;
         background-color: #212942;
         color:white;
         border-radius: 10px;

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

@@ -3,7 +3,7 @@
     import { writable } from 'svelte/store';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
-    import {expenseTypes, expenseData} from "../../../stores.js";
+    import {expenseTypes, expenseData} from "../../../../stores.js";
 
     let showModal;
     let amount = '';

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

@@ -1,21 +1,17 @@
 <script>
-    import Graph1 from '../graphs/Graph1.svelte';
     import Graph2 from '../graphs/Graph2.svelte';
     import Graph3 from '../graphs/Graph3.svelte';
     import Expenses from "../infolists/Expenses.svelte";
-    import Incomes from "../infolists/Incomes.svelte";
 </script>
 
 <div id="dataMenu">
     <div id="twoVertical">
-            <Graph1 />
             <Graph2 />
     </div>
     <div id="oneVertical">
             <Graph3 />
     </div>
     <div id="dataPanel">
-            <Incomes />
             <Expenses />
     </div>
 </div>

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

@@ -1,6 +1,6 @@
 <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;

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

@@ -1,7 +1,7 @@
 <script>
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
-	import { incomeData } from "../../stores.js";
+	import { incomeData } from "../../../stores.js";
 
 	let ctx;
 	let chartCanvas;

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

@@ -0,0 +1,80 @@
+<script>
+	import Chart from 'chart.js/auto';
+	import { onMount } from 'svelte';
+	import { incomeData, expenseData } from "../../../stores.js";
+
+	let ctx;
+	let chartCanvas;
+	let chart = null;
+
+	function createGraph() {
+		try {
+			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 Chart(ctx, {
+				type: 'pie',
+				data: {
+					labels: chartLabels,
+					datasets: [{
+						data: chartValues,
+						backgroundColor: [
+							'rgb(243, 188, 0)',
+							'rgb(0, 117, 164)'
+						],
+					}]
+				},
+				options: {
+					responsive: true,
+					maintainAspectRatio: false
+				}
+			});
+			} 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;
+				chart.update();
+			}
+		} catch (error) {
+			console.error('Error:', error);
+		}
+	}
+
+	$: {
+		if ($incomeData || $expenseData) {
+			createGraph();
+		}
+	}
+
+	onMount(() => {
+		createGraph();
+	});
+</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);
+		transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+		flex: 1;
+		border-radius: 10px;
+		margin: 10px;
+		background-color: #d3d3d3;
+	}
+
+	#chart:hover {
+		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+	}
+</style>

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

@@ -1,6 +1,6 @@
 <script>
     import { onMount, afterUpdate } from 'svelte';
-    import { incomeData } from "../../stores.js";
+    import { incomeData } from "../../../stores.js";
     import ContentIncome from "./contents/ContentIncome.svelte";
 
     let parentHeight;
@@ -35,6 +35,7 @@
     #incomeInfo {
         display: flex;
         flex-direction: column;
+        min-width: 300px;
         background-color: #212942;
         color:white;
         border-radius: 10px;

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

@@ -3,7 +3,7 @@
     import { writable } from 'svelte/store';
     import axios from 'axios';
     import { getCookie } from "svelte-cookie";
-    import {incomeData, incomeTypes} from "../../../stores.js";
+    import {incomeData, incomeTypes} from "../../../../stores.js";
 
     let showModal;
     let amount = '';

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

@@ -0,0 +1,57 @@
+<script>
+    export let showModal;
+
+    let dialog;
+
+    $: 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;
+        }
+    }
+</style>

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

@@ -0,0 +1,66 @@
+<script>
+
+</script>
+
+<div id="header">
+    <div id="dashboardTitleWrapper">
+        <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>
+        </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>
+        </div>
+    </div>
+</div>
+
+<style>
+    
+    #header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    #dashboardTitleWrapper {
+        display: flex;
+        flex-direction: column;
+        margin:20px;
+        margin-bottom: 0px;
+    }
+
+    #dashboardTitleWrapper h5 {
+        margin: 0;
+    }
+
+    #dashboardTitleWrapper h1 {
+        margin-top: 0;
+    }
+
+    #icons {
+        display: flex;
+        margin-right:20px;
+    }
+
+    .headerbtn {
+        width: 70px;
+        height: 70px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .headerbtn:hover::before {
+        content: "";
+        width: 40px;
+        height: 40px;
+        background-color: rgb(100, 100, 100, 0.25); 
+        border-radius: 50%;
+        position: absolute;
+    }
+</style>

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

@@ -0,0 +1,60 @@
+<script>
+    import Graph1 from '../graphs/Graph1.svelte';
+    import Graph3 from '../graphs/Graph3.svelte';
+    import Incomes from "../infolists/Incomes.svelte";
+</script>
+
+<div id="dataMenu">
+    <div id="twoVertical">
+            <Graph1 />
+    </div>
+    <div id="oneVertical">
+            <Graph3 />
+    </div>
+    <div id="dataPanel">
+            <Incomes />
+    </div>
+</div>
+
+<style>
+    #dataMenu {
+        border-bottom-left-radius: 20px;
+        border-bottom-right-radius: 20px;
+        background-color: rgb(245,242,243);
+        display:flex;
+        padding:10px;
+        flex-direction: row-reverse;
+        justify-content: stretch;
+        align-items: stretch;
+        flex-grow: 1;
+    }
+
+
+    #twoVertical {
+        display: flex;
+        flex-direction: column;
+        align-self: stretch;
+        flex-grow: 1;
+        min-width: 0;
+        min-height:0;
+    }
+
+    #oneVertical {
+        display: flex;
+        flex-direction: column;
+        align-self: stretch;
+        flex-grow: 1;
+        min-width: 0;
+        min-height:0;
+    }
+
+    #dataPanel {
+        display: flex;
+        flex-direction: row;
+        align-self: stretch;
+        flex-grow: 1;
+        min-width: 0;
+        min-height:0;
+    }
+
+</style>

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

@@ -0,0 +1,71 @@
+<script>
+    import { onMount } from 'svelte';
+    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 + 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: 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) {
+            updateInfo();
+        }
+    }
+
+    onMount(() => {
+        updateInfo();
+    });
+</script>
+
+<div id="quickInfobar">
+    <div class="infobarElement" bind:this={infobar1}></div>
+    <div class="infobarElement" bind:this={infobar2}></div>
+    <div class="infobarElement" bind:this={infobar3}></div>
+    <div class="infobarElement" bind:this={infobar4}></div>
+</div>
+
+<style>
+    #quickInfobar {
+        display: flex;
+        justify-content: space-between;
+        margin: 20px;
+    }
+
+    .infobarElement {
+        margin: 10px;
+        width: 200px;
+        min-width: 100px;
+        height: 100px;
+        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);
+        overflow: hidden;
+    }
+
+    .infobarElement:hover {
+        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    }
+</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/SideMenu.svelte

@@ -2,6 +2,7 @@
     import { onMount } from 'svelte';
     import axios from 'axios';
     import {deleteCookie, getCookie} from "svelte-cookie";
+    export let onTabClick;
 
     let username;
 
@@ -40,12 +41,12 @@
             <span class="sideMenuItemText">Profile</span>
         </div>
 
-        <div class="sideMenuItem">
+        <div on:click={() => onTabClick('expenses')} tabindex="0" role="button" 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">Expenses</span>
         </div>
 
-        <div class="sideMenuItem">
+        <div on:click={() => onTabClick('incomes')} tabindex="0" role="button" 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">Incomes</span>
         </div>

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

@@ -7,3 +7,5 @@ export const expenseData = writable([]);
 export const incomeTypes = writable([]);
 
 export const expenseTypes = writable([]);
+
+export let selectedTab = writable('expenses');