Prettier income/expense forms

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

@@ -2,13 +2,12 @@
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
 	import axios from 'axios';
-	import {getCookie} from "svelte-cookie";
+	import { getCookie } from "svelte-cookie";
 
 	let ctx;
 	let chartCanvas;
 
 	onMount(async () => {
-
 		const token = getCookie('access_token');
 
 		const config = {
@@ -19,11 +18,28 @@
 
 		try {
 			const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
-			console.log(response.data);
 			const incomeData = response.data;
 
-			const chartLabels = incomeData.map(item => item.incomeCategory.name);
+			// Create a function to group and sum incomes by category
-			const chartValues = incomeData.map(item => item.amount);
+			function groupAndSumByCategory(incomes) {
+				const groupedData = new Map();
+				incomes.forEach(income => {
+					const category = income.incomeCategory.name;
+					if (groupedData.has(category)) {
+						groupedData.set(category, groupedData.get(category) + income.amount);
+					} else {
+						groupedData.set(category, income.amount);
+					}
+				});
+				return groupedData;
+			}
+
+			// Group and sum incomes by category
+			const groupedIncomeData = groupAndSumByCategory(incomeData);
+
+			// Extract category names and summed values
+			const chartLabels = Array.from(groupedIncomeData.keys());
+			const chartValues = Array.from(groupedIncomeData.values());
 
 			ctx = chartCanvas.getContext('2d');
 			new Chart(ctx, {
@@ -51,6 +67,8 @@
 	<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);

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

@@ -30,7 +30,7 @@
 
     const expenseOptions = writable([]);
 
-    const createIncome = async () => {
+    const createExpense = async () => {
         const selectedExpense = $expenseOptions.find(expense => expense.id === $selectedExpenseId);
         const data = {
             expenseCategory: selectedExpense.id,
@@ -61,55 +61,111 @@
 </script>
 
 <div id="exp">
+    <div id="optionField">
         <h2>Expenses</h2>
         <div id="openModal" class="plus-button" role="button" tabindex="1" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
             +
         </div>
+    </div>
     <Modal bind:showModal>
-        <div>
+        <div class="expense-form">
+            <h3>Expense Details</h3>
+            <div class="form-group">
                 <label for="amount">Amount:</label>
-            <input type="text" id="amount" bind:value={amount} />
+                <input type="text" id="amount" class="form-control" bind:value={amount} />
+            </div>
 
-            <label for="income">Select Income:</label>
+            <div class="form-group">
-            <select id="income" bind:value={$selectedExpenseId}>
+                <label for="expenseCategory">Select Expense Category:</label>
+                <select id="expenseCategory" class="form-control" bind:value={$selectedExpenseId}>
                     {#each $expenseOptions as expense (expense.id)}
                         {#if expense.id !== undefined}
                             <option value={expense.id}>{expense.name}</option>
                         {/if}
                     {/each}
                 </select>
+            </div>
 
-            <button on:click={createIncome}>Submit</button>
+            <button class="btn btn-primary" on:click={createExpense}>Submit</button>
         </div>
     </Modal>
 </div>
 
+
 <style>
     #exp {
-        padding-left: 20px;
+        padding: 20px;
-        padding-right: 20px;
+        text-align: center;
+    }
+
+    #optionField {
         display: flex;
         align-items: center;
         justify-content: space-between;
     }
 
     .plus-button {
-        font-size: xx-large;
+        font-size: 24px;
-        background: none;
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
         cursor: pointer;
-        border-radius: 10px;
-        transition: background 0.3s ease;
     }
 
     .plus-button:hover {
-        background: rgba(128, 128, 128, 0.5);
+        background-color: #0056b3;
     }
 
-    #openModal {
+    .expense-form {
-        top: 0;
+        background-color: #fff;
-        background-color: #f2f2f2;
+        border: 1px solid #ccc;
-        border-radius: 10px 10px 0 0;
+        border-radius: 5px;
-        z-index: 1;
+        padding: 20px;
-        margin: 0;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        max-width: 400px;
+        margin: 0 auto;
+    }
+
+    h3 {
+        font-size: 20px;
+        margin-bottom: 20px;
+    }
+
+    .form-group {
+        margin-bottom: 15px;
+    }
+
+    label {
+        display: block;
+        font-weight: bold;
+        margin-bottom: 5px;
+    }
+
+    .form-control {
+        width: 100%;
+        padding: 10px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+    }
+
+    select.form-control {
+        height: 40px;
+    }
+
+    .btn {
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: 5px;
+        padding: 10px 20px;
+        cursor: pointer;
+    }
+
+    .btn:hover {
+        background-color: #0056b3;
     }
 </style>

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

@@ -61,55 +61,111 @@
 </script>
 
 <div id="inc">
+    <div id="optionField">
         <h2>Incomes</h2>
         <div id="openModal" class="plus-button" role="button" tabindex="1" on:click={() => (showModal = true)} on:keydown={() => console.log("keydown")}>
             +
         </div>
+    </div>
     <Modal bind:showModal>
-        <div>
+        <div class="income-form">
+            <h3>Income Details</h3>
+            <div class="form-group">
                 <label for="amount">Amount:</label>
-            <input type="text" id="amount" bind:value={amount} />
+                <input type="text" id="amount" class="form-control" bind:value={amount} />
+            </div>
 
-            <label for="income">Select Income:</label>
+            <div class="form-group">
-            <select id="income" bind:value={$selectedIncomeId}>
+                <label for="incomeCategory">Select Income Category:</label>
+                <select id="incomeCategory" class="form-control" bind:value={$selectedIncomeId}>
                     {#each $incomeOptions as income (income.id)}
                         {#if income.id !== undefined}
                             <option value={income.id}>{income.name}</option>
                         {/if}
                     {/each}
                 </select>
+            </div>
 
-            <button on:click={createIncome}>Submit</button>
+            <button class="btn btn-primary" on:click={createIncome}>Submit</button>
         </div>
     </Modal>
 </div>
 
+
 <style>
     #inc {
-        padding-left: 20px;
+        padding: 20px;
-        padding-right: 20px;
+        text-align: center;
+    }
+
+    #optionField {
         display: flex;
         align-items: center;
         justify-content: space-between;
     }
 
     .plus-button {
-        font-size: xx-large;
+        font-size: 24px;
-        background: none;
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        line-height: 40px;
         cursor: pointer;
-        border-radius: 10px;
-        transition: background 0.3s ease;
     }
 
     .plus-button:hover {
-        background: rgba(128, 128, 128, 0.5);
+        background-color: #0056b3;
     }
 
-    #openModal {
+    .income-form {
-        top: 0;
+        background-color: #fff;
-        background-color: #f2f2f2;
+        border: 1px solid #ccc;
-        border-radius: 10px 10px 0 0;
+        border-radius: 5px;
-        z-index: 1;
+        padding: 20px;
-        margin: 0;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        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>