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

---
 .../board/expenses/infolists/Expenses.svelte  |  77 ++++++++
 .../infolists/contents/ContentExpense.svelte  | 175 +++++++++++++++++
 .../expenses/infolists/modals/Modal.svelte    |  57 ++++++
 .../board/expenses/other/DashHeader.svelte    |  66 +++++++
 .../board/expenses/other/DataMenu.svelte      |  60 ++++++
 .../board/expenses/other/QuickInfobar.svelte  |  71 +++++++
 .../board/incomes/graphs/Graph1.svelte        |  96 ++++++++++
 .../board/incomes/graphs/Graph3.svelte        |  80 ++++++++
 .../board/incomes/infolists/Incomes.svelte    |  76 ++++++++
 .../infolists/contents/ContentIncome.svelte   | 177 ++++++++++++++++++
 .../incomes/infolists/modals/Modal.svelte     |  57 ++++++
 .../board/incomes/other/DashHeader.svelte     |  66 +++++++
 .../board/incomes/other/DataMenu.svelte       |  60 ++++++
 .../board/incomes/other/QuickInfobar.svelte   |  71 +++++++
 14 files changed, 1189 insertions(+)
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/contents/ContentExpense.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/modals/Modal.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DashHeader.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/QuickInfobar.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph1.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph3.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Incomes.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/contents/ContentIncome.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/modals/Modal.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DashHeader.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/DataMenu.svelte
 create mode 100644 src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/QuickInfobar.svelte

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
new file mode 100644
index 0000000..1872400
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/Expenses.svelte
@@ -0,0 +1,77 @@
+<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;
+        min-width: 300px;
+        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/expenses/infolists/contents/ContentExpense.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/contents/ContentExpense.svelte
new file mode 100644
index 0000000..bd64722
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/contents/ContentExpense.svelte
@@ -0,0 +1,175 @@
+<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/expenses/infolists/modals/Modal.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/infolists/modals/Modal.svelte
new file mode 100644
index 0000000..fca4643
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/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>
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
new file mode 100644
index 0000000..ed861b9
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/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>
\ No newline at end of file
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
new file mode 100644
index 0000000..cb4257c
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/DataMenu.svelte
@@ -0,0 +1,60 @@
+<script>
+    import Graph2 from '../graphs/Graph2.svelte';
+    import Graph3 from '../graphs/Graph3.svelte';
+    import Expenses from "../infolists/Expenses.svelte";
+</script>
+
+<div id="dataMenu">
+    <div id="twoVertical">
+            <Graph2 />
+    </div>
+    <div id="oneVertical">
+            <Graph3 />
+    </div>
+    <div id="dataPanel">
+            <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/expenses/other/QuickInfobar.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/other/QuickInfobar.svelte
new file mode 100644
index 0000000..7fd226b
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/expenses/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>
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
new file mode 100644
index 0000000..7cda792
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph1.svelte
@@ -0,0 +1,96 @@
+<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/incomes/graphs/Graph3.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/graphs/Graph3.svelte
new file mode 100644
index 0000000..c5c1fb6
--- /dev/null
+++ b/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>
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
new file mode 100644
index 0000000..a32769a
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/Incomes.svelte
@@ -0,0 +1,76 @@
+<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;
+        min-width: 300px;
+        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/incomes/infolists/contents/ContentIncome.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/contents/ContentIncome.svelte
new file mode 100644
index 0000000..309933e
--- /dev/null
+++ b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/contents/ContentIncome.svelte
@@ -0,0 +1,177 @@
+<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/incomes/infolists/modals/Modal.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/infolists/modals/Modal.svelte
new file mode 100644
index 0000000..fca4643
--- /dev/null
+++ b/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>
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
new file mode 100644
index 0000000..ed861b9
--- /dev/null
+++ b/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>
\ No newline at end of file
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
new file mode 100644
index 0000000..1230a06
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/QuickInfobar.svelte b/src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/incomes/other/QuickInfobar.svelte
new file mode 100644
index 0000000..7fd226b
--- /dev/null
+++ b/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>