From 021be06f404ffc883708fa1642a765f94dcd1b8e Mon Sep 17 00:00:00 2001
From: Daniel <danthevip@gmail.com>
Date: Fri, 17 Nov 2023 12:57:36 +0200
Subject: [PATCH] Separated expenses and incomes frontend

---
 .../web/src/routes/dashboard/+page.svelte     |  11 +-
 .../routes/dashboard/board/Dashboard.svelte   | 103 +++++-----
 .../dashboard/board/ExpenseDashboard.svelte   |   9 +
 .../dashboard/board/IncomeDashboard.svelte    |   9 +
 .../board/{ => expenses}/graphs/Graph2.svelte |   2 +-
 .../board/{ => expenses}/graphs/Graph3.svelte |   2 +-
 .../dashboard/board/graphs/Graph1.svelte      |  96 ----------
 .../dashboard/board/infolists/Expenses.svelte |  76 --------
 .../dashboard/board/infolists/Incomes.svelte  |  75 --------
 .../infolists/contents/ContentExpense.svelte  | 175 -----------------
 .../infolists/contents/ContentIncome.svelte   | 177 ------------------
 .../board/infolists/modals/Modal.svelte       |  57 ------
 .../dashboard/board/other/DashHeader.svelte   |  66 -------
 .../dashboard/board/other/DataMenu.svelte     |  64 -------
 .../dashboard/board/other/QuickInfobar.svelte |  71 -------
 .../src/routes/dashboard/menu/SideMenu.svelte |   5 +-
 .../web/src/routes/dashboard/stores.js        |   4 +-
 17 files changed, 87 insertions(+), 915 deletions(-)
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/ExpenseDashboard.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/IncomeDashboard.svelte
 rename src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/{ => expenses}/graphs/Graph2.svelte (97%)
 rename src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/{ => expenses}/graphs/Graph3.svelte (96%)
 delete mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
 delete mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
 delete mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
 delete mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
 delete mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
 delete mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/modals/Modal.svelte
 delete mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DashHeader.svelte
 delete mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte
 delete mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte

diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/+page.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/+page.svelte
index 3be4a70..916c685 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/+page.svelte
+++ b/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 />
-    <Dashboard />
+    <SideMenu onTabClick={handleTabClick} />
+    <Dashboard {selectedTab} />
 </div>
 
 <style>
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 9ee8e54..59e7331 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
@@ -1,64 +1,65 @@
 <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 { getCookie } from "svelte-cookie";
+        import { onMount } from "svelte";
+        import ExpenseDashboard from "./ExpenseDashboard.svelte";
+        import IncomeDashboard from "./IncomeDashboard.svelte";
+        import { incomeData, expenseData, incomeTypes, expenseTypes, selectedTab } from "../stores.js";
 
-    import {incomeData, expenseData, incomeTypes, expenseTypes} from "../stores.js";
+        import axios from "axios";
 
-    import axios from "axios";
+        onMount(async () => {
+                const token = getCookie('access_token');
 
+                if (token === '') {
+                        window.location.href = '/auth/login';
+                        return;
+                }
 
-    onMount(async () => {
-            const token = getCookie('access_token');
+                const config = {
+                        headers: {
+                                'Authorization': `Bearer ${token}`
+                        }
+                };
 
-            if (token === '') {
-                    window.location.href = '/auth/login';
-                    return;
-            }
+                try {
+                        const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
+                                axios.get('http://localhost:8081/incomes/personal-incomes', config),
+                                axios.get('http://localhost:8081/expenses/personal-expenses', config),
+                                axios.get('http://localhost:8081/incomes/categories', config),
+                                axios.get('http://localhost:8081/expenses/categories', config)
+                        ]);
 
-            const config = {
-                    headers: {
-                            'Authorization': `Bearer ${token}`
-                    }
-            };
-
-            try {
-                    const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
-                            axios.get('http://localhost:8081/incomes/personal-incomes', config),
-                            axios.get('http://localhost:8081/expenses/personal-expenses', config),
-                            axios.get('http://localhost:8081/incomes/categories', config),
-                            axios.get('http://localhost:8081/expenses/categories', config)
-                    ]);
-
-                    incomeData.set(incomeResponse.data);
-                    expenseData.set(expenseResponse.data);
-                    incomeTypes.set(incomeTypesResponse.data);
-                    expenseTypes.set(expenseTypesResponse.data);
-            } catch (error) {
-                    console.error('Error:', error);
-            }
-    });
+                        incomeData.set(incomeResponse.data);
+                        expenseData.set(expenseResponse.data);
+                        incomeTypes.set(incomeTypesResponse.data);
+                        expenseTypes.set(expenseTypesResponse.data);
+                } catch (error) {
+                        console.error('Error:', error);
+                }
+        });
 </script>
 
 <div id="dashboard">
-        <DashHeader />
-        <QuickInfobar />
-        <DataMenu />
+        <div id="dashboard">
+                {#if $selectedTab === 'expenses'}
+                        <ExpenseDashboard {expenseData} {expenseTypes} />
+                {:else if $selectedTab === 'incomes'}
+                        <IncomeDashboard {incomeData} {incomeTypes} />
+                {/if}
+        </div>
 </div>
 
 <style>
-    #dashboard {
-        font-family: 'Source Sans Pro', sans-serif;
-        background-color: rgb(245,242,243); 
-        border-radius: 20px;  
-        margin: 20px;
-        min-width: 100px;
-        display: flex;
-        flex:1 1 auto;
-        flex-direction: column;
-        align-items: stretch;
-        justify-content: stretch;
-    }
-</style>
\ No newline at end of file
+        #dashboard {
+                font-family: 'Source Sans Pro', sans-serif;
+                background-color: rgb(245,242,243);
+                border-radius: 20px;
+                margin: 20px;
+                min-width: 100px;
+                display: flex;
+                flex:1 1 auto;
+                flex-direction: column;
+                align-items: stretch;
+                justify-content: stretch;
+        }
+</style>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/ExpenseDashboard.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/ExpenseDashboard.svelte
new file mode 100644
index 0000000..aa9e59f
--- /dev/null
+++ b/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 />
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/IncomeDashboard.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/IncomeDashboard.svelte
new file mode 100644
index 0000000..f58ddd5
--- /dev/null
+++ b/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 />
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph2.svelte
similarity index 97%
rename from src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
rename to src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph2.svelte
index 9fb1a4a..e36cf8a 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/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;
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte
similarity index 96%
rename from src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
rename to src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/graphs/Graph3.svelte
index 10245ba..c5c1fb6 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/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;
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
deleted file mode 100644
index 3b653b1..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte
+++ /dev/null
@@ -1,96 +0,0 @@
-<script>
-	import Chart from 'chart.js/auto';
-	import { onMount } from 'svelte';
-	import { incomeData } from "../../stores.js";
-
-	let ctx;
-	let chartCanvas;
-	let chart = null;
-
-	function groupAndSumByCategory() {
-		const groupedData = new Map();
-		$incomeData.forEach(income => {
-					const category = income.incomeCategory.name;
-					if (groupedData.has(category)) {
-						groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
-					} else {
-						groupedData.set(category, income.amount);
-					}
-				}
-		);
-		return groupedData;
-	}
-
-	function createGraph() {
-		try {
-			const groupedIncomeData = groupAndSumByCategory();
-
-			const chartLabels = Array.from(groupedIncomeData.keys());
-			const chartValues = Array.from(groupedIncomeData.values());
-
-			ctx = chartCanvas.getContext('2d');
-
-			if (!chart) {
-				chart = new Chart(ctx, {
-					type: 'bar',
-					data: {
-						labels: chartLabels,
-						datasets: [{
-							label: 'Revenue',
-							backgroundColor:
-									['rgb(0, 0, 179)',
-									'rgb(0, 16, 217)',
-									'rgb(0, 32, 255)',
-									'rgb(0, 64, 255)',
-									'rgb(0, 96, 255)',
-									'rgb(0, 128, 255)',
-									'rgb(0, 159, 255)',
-									'rgb(0, 191, 255)',
-									'rgb(0, 255, 255)'],
-							data: chartValues
-						}]
-					},
-					options: {
-						responsive: true,
-						maintainAspectRatio: false
-					}
-				});
-			} else {
-				chart.data.labels = chartLabels;
-				chart.data.datasets[0].data = chartValues;
-				chart.update();
-			}
-		} catch (error) {
-			console.error('Error:', error);
-		}
-	}
-
-	$: {
-		if ($incomeData) {
-			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>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
deleted file mode 100644
index 0015c1f..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
+++ /dev/null
@@ -1,76 +0,0 @@
-<script>
-    import { onMount, afterUpdate } from 'svelte';
-    import ContentExpense from "./contents/ContentExpense.svelte";
-    import {expenseData} from "../../stores.js";
-
-    let parentHeight;
-    let listParentHeight;
-
-    async function updateInfo() {
-        parentHeight = document.querySelector('#expenseInfo').offsetHeight;
-        listParentHeight = document.querySelector('#expenseList').offsetHeight;
-    }
-
-    onMount(updateInfo);
-    afterUpdate(updateInfo);
-</script>
-
-<div id="expenseInfo" style="max-height: {parentHeight}px;">
-    <ContentExpense />
-
-    <div id="expenseList" style="max-height: {listParentHeight}px;">
-        <ul>
-            {#each $expenseData as item}
-                <li>
-                    {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
-                    {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
-                    {`${item.date}`}
-                </li>
-            {/each}
-        </ul>
-    </div>
-</div>
-
-
-<style>
-    #expenseInfo {
-        display: flex;
-        flex-direction: column;
-        background-color: #212942;
-        color:white;
-        border-radius: 10px;
-        margin: 10px;
-    }
-
-    #expenseList {
-        scrollbar-width: none;
-        flex: 1;
-        border-radius: 10px;
-        margin: 10px;
-        overflow-y: auto;
-        max-height: 100%;
-    }
-
-    #expenseList::-webkit-scrollbar {
-        display: none;
-    }
-
-    ul {
-        list-style: none;
-        padding: 0;
-        color:black;
-    }
-
-    li {
-        margin-bottom: 20px;
-        background-color: #f2f2f2;
-        padding: 10px;
-        border-radius: 5px;
-        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);
-    }
-
-    li:hover {
-        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
-    }
-</style>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
deleted file mode 100644
index 2f4e2e5..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
+++ /dev/null
@@ -1,75 +0,0 @@
-<script>
-    import { onMount, afterUpdate } from 'svelte';
-    import { incomeData } from "../../stores.js";
-    import ContentIncome from "./contents/ContentIncome.svelte";
-
-    let parentHeight;
-    let listParentHeight;
-
-    async function updateInfo() {
-        parentHeight = document.querySelector('#expenseInfo').offsetHeight;
-        listParentHeight = document.querySelector('#expenseList').offsetHeight;
-    }
-
-    onMount(updateInfo);
-    afterUpdate(updateInfo);
-</script>
-
-<div id="incomeInfo" style="max-height: {parentHeight}px;">
-    <ContentIncome />
-
-    <div id="incomeList" style="max-height: {listParentHeight}px;">
-        <ul>
-            {#each $incomeData as item}
-                <li>
-                    {item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
-                    {item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
-                    {`${item.date}`}
-                </li>
-            {/each}
-        </ul>
-    </div>
-</div>
-
-<style>
-    #incomeInfo {
-        display: flex;
-        flex-direction: column;
-        background-color: #212942;
-        color:white;
-        border-radius: 10px;
-        margin: 10px;
-    }
-
-    #incomeList {
-        scrollbar-width: none;
-        flex: 1;
-        border-radius: 10px;
-        margin: 10px;
-        overflow-y: auto;
-        max-height: 100%;
-    }
-
-    ul {
-        list-style: none;
-        padding: 0;
-        color: black;
-    }
-
-    li {
-        margin-bottom: 20px;
-        background-color: #f2f2f2;
-        padding: 10px;
-        border-radius: 5px;
-        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);
-    }
-
-    li:hover {
-        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>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
deleted file mode 100644
index bb57ce9..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentExpense.svelte
+++ /dev/null
@@ -1,175 +0,0 @@
-<script>
-    import Modal from '../modals/Modal.svelte';
-    import { writable } from 'svelte/store';
-    import axios from 'axios';
-    import { getCookie } from "svelte-cookie";
-    import {expenseTypes, expenseData} from "../../../stores.js";
-
-    let showModal;
-    let amount = '';
-    let newData;
-
-    const selectedExpenseId = writable('');
-
-    function addNewExpense(id, amount) {
-        const today = new Date().toISOString().split('T')[0];
-        const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
-
-        if (expenseCategory) {
-            const newIncome = {
-                incomeId: 0,
-                userDTO: {
-                    name: "Dummy",
-                    surname: "User",
-                    username: "dummyuser"
-                },
-                expenseCategory: expenseCategory,
-                date: today,
-                amount: parseInt(amount)
-            };
-
-            newData = $expenseData;
-            newData.push(newIncome);
-            $expenseData = newData;
-        } else {
-            console.error('Expense category not found for id:', id);
-        }
-    }
-
-    const createExpense = async () => {
-        const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
-        const data = {
-            expenseCategory: selectedExpense.id,
-            amount: amount,
-        };
-
-        addNewExpense(selectedExpense.id, amount);
-
-        try {
-            const token = getCookie('access_token');
-
-            const response = await axios.post('http://localhost:8081/expenses', data, {
-                headers: {
-                    'Authorization': `Bearer ${token}`,
-                    'Content-Type': 'application/json',
-                },
-            });
-
-            if (response.status === 201) {
-                //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="0" 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 $expenseTypes 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>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
deleted file mode 100644
index b8bf180..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/contents/ContentIncome.svelte
+++ /dev/null
@@ -1,177 +0,0 @@
-<script>
-    import Modal from '../modals/Modal.svelte';
-    import { writable } from 'svelte/store';
-    import axios from 'axios';
-    import { getCookie } from "svelte-cookie";
-    import {incomeData, 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;
-        } else {
-            console.error('Income category not found for id:', id);
-        }
-    }
-
-    const createIncome = async () => {
-        const selectedIncome = $incomeTypes.find(income => income.id === $selectedIncomeId);
-        const data = {
-            incomeCategory: selectedIncome.id,
-            amount: parseInt(amount),
-        };
-
-        addNewIncome(selectedIncome.id, amount);
-
-        try {
-            const token = getCookie('access_token');
-
-            const response = await axios.post('http://localhost:8081/incomes', data, {
-                headers: {
-                    'Authorization': `Bearer ${token}`,
-                    'Content-Type': 'application/json',
-                },
-            });
-
-            if (response.status === 201) {
-                //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="0" 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 $incomeTypes 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>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/modals/Modal.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/modals/Modal.svelte
deleted file mode 100644
index fca4643..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/modals/Modal.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<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>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DashHeader.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DashHeader.svelte
deleted file mode 100644
index ed861b9..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DashHeader.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte
deleted file mode 100644
index f2f2009..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte
+++ /dev/null
@@ -1,64 +0,0 @@
-<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>
-
-<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>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
deleted file mode 100644
index 5b6b490..0000000
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-<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>
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 3f64a8a..3ded8c0 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
@@ -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>
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
index 05ce287..b25c279 100644
--- a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/stores.js
@@ -6,4 +6,6 @@ export const expenseData = writable([]);
 
 export const incomeTypes = writable([]);
 
-export const expenseTypes = writable([]);
\ No newline at end of file
+export const expenseTypes = writable([]);
+
+export let selectedTab = writable('expenses');
\ No newline at end of file