byte/expensetracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/lumijiez/ExpenseTrackerFAF

Browse Source
This commit is contained in:
mirrerror
2023-10-27 00:53:16 +03:00
parent 7bc9a460ed 801cf60db4
commit 9fe17438f7
17 changed files with 249 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/main/java/com/faf223/expensetrackerfaf/controller/ExpenseController.java
View File

@@ -25,7 +25,6 @@ import java.util.stream.Collectors;
@RestController
@RequestMapping("/expenses")
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:5173")
public class ExpenseController {
private final ExpenseService expenseService;

1
src/main/java/com/faf223/expensetrackerfaf/controller/IncomeController.java
View File

@@ -25,7 +25,6 @@ import java.util.stream.Collectors;
@RestController
@RequestMapping("/incomes")
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:5173")
public class IncomeController {
private final IncomeService incomeService;

1
src/main/java/com/faf223/expensetrackerfaf/controller/UserController.java
View File

@@ -19,7 +19,6 @@ import java.util.ArrayList;
@RestController
@RequestMapping("/users")
@RequiredArgsConstructor
@CrossOrigin(origins = "http://localhost:5173")
public class UserController {
private final UserService userService;

27
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte
View File

@@ -1,5 +1,4 @@
<script>
import * as EmailValidator from 'email-validator';
import axios from "axios";
import {onMount} from "svelte";
import { getCookie, setCookie } from 'svelte-cookie';
@@ -9,19 +8,19 @@
let message = ""
onMount(async () => {
console.log("Mounted");
const access_token = getCookie('access_token');
const refresh_token = getCookie('refresh_token');
if (access_token && refresh_token) {
window.location.href = '/dashboard';
}
});
async function submitForm(event) {
event.preventDefault();
console.log("Tried to submit!");
console.log(username);
console.log(password);
try {
const response = await axios.post('http://localhost:8081/api/v1/auth/authenticate', {
email: username,
@@ -30,30 +29,14 @@
const { access_token, refresh_token } = response.data;
// Save the tokens in cookies
setCookie('access_token', access_token);
setCookie('refresh_token', refresh_token);
console.log(access_token, refresh_token);
window.location.href = '/dashboard'
} catch (error) {
console.error('Login failed:', error);
}
}
// function validateEmail() {
// let valid = EmailValidator.validate(username);
// isErrorVisible = !valid;
// message = isErrorVisible ? "Invalid e-mail!" : "";
// return valid;
// }
//
// function validatePassword() {
// let valid = password.value !== '';
// isErrorVisible = !valid;
// message = isErrorVisible ? "Invalid password!" : "";
// return valid;
// }
</script>
<div class="animated bounceInDown">

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

@@ -5,51 +5,40 @@
import { getCookie } from "svelte-cookie";
import {onMount} from "svelte";
import {incomeData} from "../stores.js";
import {expenseData} from "../stores.js";
import {incomeTypes} from "../stores.js";
import {incomeData, expenseData, incomeTypes, expenseTypes} from "../stores.js";
import axios from "axios";
onMount(() => {
if (getCookie('access_token') === null) {
onMount(async () => {
const token = getCookie('access_token');
if (token === '') {
window.location.href = '/auth/login';
console.log("no token");
return;
}
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
const incomePromise = axios.get('http://localhost:8081/incomes/personal-incomes', config)
.then(response => {
incomeData.set(response.data);
console.log("Received Income Data");
})
.catch(error => console.error('Error fetching income data:', error));
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 expensePromise = axios.get('http://localhost:8081/expenses/personal-expenses', config)
.then(response => {
expenseData.set(response.data);
console.log("Received Expense Data");
})
.catch(error => console.error('Error fetching expense data:', error));
const incomeTypesPromise = axios.get('http://localhost:8081/incomes/categories', config)
.then(response => {
incomeTypes.set(response.data);
console.log("Received Income Type Data");
})
.catch(error => console.error('Error:', error));
Promise.all([incomePromise, expensePromise, incomeTypesPromise])
.then(() => {
console.log(getCookie('access_token'));
});
incomeData.set(incomeResponse.data);
expenseData.set(expenseResponse.data);
incomeTypes.set(incomeTypesResponse.data);
expenseTypes.set(expenseTypesResponse.data);
} catch (error) {
console.error('Error:', error);
}
});
</script>

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

@@ -7,11 +7,9 @@
let chartCanvas;
let chart = null;
function createGraph(data) {
try {
function groupAndSumByCategory(incomes) {
function groupAndSumByCategory() {
const groupedData = new Map();
incomes.forEach(income => {
$incomeData.forEach(income => {
const category = income.incomeCategory.name;
if (groupedData.has(category)) {
groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
@@ -23,7 +21,9 @@
return groupedData;
}
const groupedIncomeData = groupAndSumByCategory(data);
function createGraph() {
try {
const groupedIncomeData = groupAndSumByCategory();
const chartLabels = Array.from(groupedIncomeData.keys());
const chartValues = Array.from(groupedIncomeData.values());
@@ -37,7 +37,16 @@
labels: chartLabels,
datasets: [{
label: 'Revenue',
backgroundColor: 'rgb(255, 99, 132)',
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
}]
},
@@ -49,7 +58,6 @@
} else {
chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues;
console.log(chart.data.datasets[0].data);
chart.update();
}
} catch (error) {
@@ -59,13 +67,12 @@
$: {
if ($incomeData) {
createGraph($incomeData);
console.log($incomeData);
createGraph();
}
}
onMount(() => {
createGraph($incomeData);
createGraph();
});
</script>

86
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph2.svelte
View File

@@ -1,72 +1,76 @@
<script>
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import axios from 'axios';
import {getCookie} from "svelte-cookie";
import { expenseData } from "../../stores.js";
let ctx;
let chartCanvas;
let chart = null;
async function updateGraph() {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
try {
const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
const aggregatedData = {};
response.data.forEach(item => {
const category = item.expenseCategory.name;
const amount = item.amount;
if (aggregatedData[category]) {
aggregatedData[category] += amount;
function groupAndSumByCategory() {
const groupedData = new Map();
console.log($expenseData)
$expenseData.forEach(expense => {
const category = expense.expenseCategory.name;
if (groupedData.has(category)) {
groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
} else {
aggregatedData[category] = amount;
groupedData.set(category, expense.amount);
}
}
);
return groupedData;
}
});
const chartLabels = Object.keys(aggregatedData);
const chartValues = Object.values(aggregatedData);
function createGraph() {
try {
const groupedExpenseData = groupAndSumByCategory();
const chartLabels = Array.from(groupedExpenseData.keys());
const chartValues = Array.from(groupedExpenseData.values());
ctx = chartCanvas.getContext('2d');
new Chart(ctx, {
if (!chart) {
chart = new Chart(ctx, {
type: 'bar',
data: {
labels: chartLabels,
datasets: [{
label: 'Revenue',
backgroundColor: 'rgb(255, 99, 132)',
label: 'Spendings',
backgroundColor: [
'rgb(107, 80, 107)',
'rgb(171, 61, 169)',
'rgb(222, 37, 218)',
'rgb(235, 68, 232)',
'rgb(255, 128, 255)'],
data: chartValues
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
tooltips: {
callbacks: {
label: (tooltipItem) => {
return tooltipItem.yLabel;
}
}
}
maintainAspectRatio: false
}
});
} else {
chart.data.labels = chartLabels;
chart.data.datasets[0].data = chartValues;
chart.update();
}
} catch (error) {
console.error('Error:', error);
}
}
onMount(updateGraph);
$: {
if ($expenseData) {
createGraph();
}
}
onMount(() => {
createGraph();
});
</script>
<div id="chart">

57
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph3.svelte
View File

@@ -1,45 +1,32 @@
<script>
import chartjs from 'chart.js/auto';
import Chart from 'chart.js/auto';
import { onMount } from 'svelte';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import { incomeData, expenseData } from "../../stores.js";
let ctx;
let chartCanvas;
let chart = null;
async function updateGraph() {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
function createGraph() {
try {
const [incomesResponse, expensesResponse] = await Promise.all([
axios.get('http://localhost:8081/incomes/personal-incomes', config),
axios.get('http://localhost:8081/expenses/personal-expenses', config)
]);
const incomesData = incomesResponse.data;
const expensesData = expensesResponse.data;
const totalIncomes = incomesData.reduce((total, item) => total + item.amount, 0);
const totalExpenses = expensesData.reduce((total, item) => total + item.amount, 0);
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');
new chartjs(ctx, {
if (!chart) {
chart = new Chart(ctx, {
type: 'pie',
data: {
labels: chartLabels,
datasets: [{
data: chartValues,
backgroundColor: ['green', 'red'],
backgroundColor: [
'rgb(243, 188, 0)',
'rgb(0, 117, 164)'
],
}]
},
options: {
@@ -47,12 +34,30 @@
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);
}
}
onMount(updateGraph);
$: {
if ($incomeData || $expenseData) {
createGraph();
}
}
onMount(() => {
createGraph();
});
</script>
<div id="chart">

35
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Expenses.svelte
View File

@@ -1,36 +1,18 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import ContentExpense from "./contents/ContentExpense.svelte";
import {expenseData} from "../../stores.js";
let data = [];
let parentHeight;
let listParentHeight;
async function updateInfo() {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
try {
const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
data = response.data;
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
} catch (error) {
console.error('Error:', error);
}
}
onMount(updateInfo);
afterUpdate(() => {
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
});
}
onMount(updateInfo);
afterUpdate(updateInfo);
</script>
<div id="expenseInfo" style="max-height: {parentHeight}px;">
@@ -38,7 +20,7 @@
<div id="expenseList" style="max-height: {listParentHeight}px;">
<ul>
{#each data as item}
{#each $expenseData as item}
<li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
@@ -54,6 +36,10 @@
#expenseInfo {
display: flex;
flex-direction: column;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
}
#expenseList {
@@ -72,6 +58,7 @@
ul {
list-style: none;
padding: 0;
color:black;
}
li {

38
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/infolists/Incomes.svelte
View File

@@ -1,37 +1,18 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import axios from 'axios';
import {getCookie} from "svelte-cookie";
import { incomeData } from "../../stores.js";
import ContentIncome from "./contents/ContentIncome.svelte";
let data = [];
let parentHeight;
let listParentHeight;
async function updateInfo() {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
try {
const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
data = response.data;
parentHeight = document.querySelector('#incomeInfo').offsetHeight;
} catch (error) {
console.error('Error:', error);
}
}
onMount(updateInfo);
afterUpdate(() => {
parentHeight = document.querySelector('#incomeInfo').offsetHeight;
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
listParentHeight = document.querySelector('#expenseList').offsetHeight;
});
}
onMount(updateInfo);
afterUpdate(updateInfo);
</script>
<div id="incomeInfo" style="max-height: {parentHeight}px;">
@@ -39,7 +20,7 @@
<div id="incomeList" style="max-height: {listParentHeight}px;">
<ul>
{#each data as item}
{#each $incomeData as item}
<li>
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
@@ -54,6 +35,10 @@
#incomeInfo {
display: flex;
flex-direction: column;
background-color: #212942;
color:white;
border-radius: 10px;
margin: 10px;
}
#incomeList {
@@ -68,6 +53,7 @@
ul {
list-style: none;
padding: 0;
color: black;
}
li {

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

@@ -1,45 +1,55 @@
<script>
import Modal from '../modals/Modal.svelte';
import { onMount } from '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('');
onMount(async () => {
try {
const token = getCookie('access_token');
function addNewExpense(id, amount) {
const today = new Date().toISOString().split('T')[0];
const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
console.log(amount);
if (expenseCategory) {
const newIncome = {
incomeId: 0,
userDTO: {
name: "Dummy",
surname: "User",
username: "dummyuser"
},
expenseCategory: expenseCategory,
date: today,
amount: amount
};
const response = await axios.get('http://localhost:8081/expenses/categories', config);
expenseOptions.set(response.data);
console.log(response.data);
} catch (error) {
console.error('Error:', error);
newData = $expenseData;
newData.push(newIncome);
$expenseData = newData;
} else {
console.error('Expense category not found for id:', id);
}
}
});
const expenseOptions = writable([]);
const createExpense = async () => {
const selectedExpense = $expenseOptions.find(expense => expense.id === $selectedExpenseId);
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');
console.log(token);
const response = await axios.post('http://localhost:8081/expenses', data, {
headers: {
'Authorization': `Bearer ${token}`,
@@ -47,10 +57,8 @@
},
});
console.log(response.data);
if (response.status === 200) {
console.log("cool");
if (response.status === 201) {
//console.log("cool");
} else {
console.error('Error:', response.status);
}
@@ -78,7 +86,7 @@
<div class="form-group">
<label for="expenseCategory">Select Expense Category:</label>
<select id="expenseCategory" class="form-control" bind:value={$selectedExpenseId}>
{#each $expenseOptions as expense (expense.id)}
{#each $expenseTypes as expense (expense.id)}
{#if expense.id !== undefined}
<option value={expense.id}>{expense.name}</option>
{/if}

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

@@ -1,11 +1,9 @@
<script>
import Modal from '../modals/Modal.svelte';
import { onMount } from 'svelte';
import { writable } from 'svelte/store';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
import {incomeData} from "../../../stores.js";
import {incomeTypes} from "../../../stores.js";
import {incomeData, incomeTypes} from "../../../stores.js";
let showModal;
let amount = '';
@@ -35,35 +33,13 @@
newData = $incomeData;
newData.push(newIncome);
$incomeData = newData;
console.log("ggWPPPPP", newIncome);
} else {
console.error('Income category not found for id:', id);
}
}
onMount(async () => {
try {
const token = getCookie('access_token');
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
const response = await axios.get('http://localhost:8081/incomes/categories', config);
incomeOptions.set(response.data);
console.log(response.data);
} catch (error) {
console.error('Error:', error);
}
});
const incomeOptions = writable([]);
const createIncome = async () => {
const selectedIncome = $incomeOptions.find(income => income.id === $selectedIncomeId);
const selectedIncome = $incomeTypes.find(income => income.id === $selectedIncomeId);
const data = {
incomeCategory: selectedIncome.id,
amount: amount,
@@ -73,7 +49,7 @@
try {
const token = getCookie('access_token');
console.log(token);
const response = await axios.post('http://localhost:8081/incomes', data, {
headers: {
'Authorization': `Bearer ${token}`,
@@ -81,8 +57,8 @@
},
});
if (response.status === 200) {
console.log("cool");
if (response.status === 201) {
//console.log("cool");
} else {
console.error('Error:', response.status);
}
@@ -110,7 +86,7 @@
<div class="form-group">
<label for="incomeCategory">Select Income Category:</label>
<select id="incomeCategory" class="form-control" bind:value={$selectedIncomeId}>
{#each $incomeOptions as income (income.id)}
{#each $incomeTypes as income (income.id)}
{#if income.id !== undefined}
<option value={income.id}>{income.name}</option>
{/if}

8
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/DataMenu.svelte
View File

@@ -4,14 +4,6 @@
import Graph3 from '../graphs/Graph3.svelte';
import Expenses from "../infolists/Expenses.svelte";
import Incomes from "../infolists/Incomes.svelte";
function updateAll() {
Graph1.updateGraph();
Graph2.updateGraph();
Graph3.updateGraph();
Expenses.updateInfo();
Incomes.updateInfo();
}
</script>
<div id="dataMenu">

48
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/other/QuickInfobar.svelte
View File

@@ -1,38 +1,39 @@
<script>
import { onMount } from 'svelte';
import axios from 'axios';
import { getCookie } from "svelte-cookie";
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
onMount(async () => {
const token = getCookie('access_token');
function updateInfo() {
totalExpenses = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
totalIncomes = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
const config = {
headers: {
'Authorization': `Bearer ${token}`
}
};
const incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
try {
const [incomesResponse, expensesResponse] = await Promise.all([
axios.get('http://localhost:8081/incomes/personal-incomes', config),
axios.get('http://localhost:8081/expenses/personal-expenses', config)
]);
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>`;
const incomesData = incomesResponse.data;
const expensesData = expensesResponse.data;
totalExpenses = expensesData.reduce((total, item) => total + item.amount, 0);
totalIncomes = incomesData.reduce((total, item) => total + item.amount, 0);
infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses}$`;
infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${totalIncomes}$</span>`;
} catch (error) {
console.error('Error:', error);
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>
@@ -61,6 +62,7 @@
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 {

47
src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/menu/Navbar.svelte
View File

@@ -1,47 +0,0 @@
<script>
</script>
<div id="navbar">
<div id="profilePic">PROFILEPIC</div>
<div class="menuItem" on:click={() => console.log("help clicked")}>Help</div>
<div class="menuItem" on:click={() => console.log("contact clicked")}>Contact</div>
<div class="menuItem" on:click={() => console.log("settings clicked")}>Settings</div>
<div class="menuItem" on:click={() => console.log("logout clicked")}>Logout</div>
</div>
<style>
#navbar {
padding:0;
background-color: rgb(33, 41, 66);
display: flex;
justify-content: flex-end;
}
.menuItem {
font-family: 'Source Sans Pro', sans-serif;
color:white;
display: flex;
align-items: center;
padding-left: 20px;
padding-right: 20px;
text-align: center;
height: 50px;
}
.menuItem:hover {
background-color: rgb(45, 60, 90);
}
#profilePic {
margin-right:auto;
display: flex;
padding-left: 20px;
padding-right: 20px;
align-items: center;
color:white;
justify-self: left;
}
</style>

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

@@ -5,3 +5,5 @@ export const incomeData = writable([]);
export const expenseData = writable([]);
export const incomeTypes = writable([]);
export const expenseTypes = writable([]);