Add expense/income update

# Conflicts:
#	src/main/java/com/faf223/expensetrackerfaf/controller/ExpenseController.java
#	src/main/java/com/faf223/expensetrackerfaf/controller/IncomeController.java

.gitignore

@@ -4,6 +4,8 @@ target/
 !**/src/main/**/target/
 !**/src/test/**/target/
 /src/main/resources/application.properties
+/src/main/java/web/src/package.json
+/src/main/java/web/src/package-lock.json
 
 ### STS ###
 .apt_generated
@@ -32,5 +34,3 @@ build/
 
 ### VS Code ###
 .vscode/
-
-/src/main/resources/application.properties

README.md

@@ -1,3 +1,68 @@
-# ExpenseTrackerFAF
+# Expense Tracker App
+
+## Description
+
+Expense Tracker is a web application that helps you keep track of your expenses and incomes. It provides a user-friendly interface to enter and visualize your financial data, making it easier to manage your finances.
+
+## Features
+
+- Single-page application for a smooth and responsive user experience.
+- Reactive graph updates to visualize your financial data.
+- Ability to add incomes and expenses to your account.
+- Full-fledged authorization system to secure your data.
+- Hosted database for seamless data storage and retrieval.
+
+## Tech Stack
+
+### Frontend
+
+- Svelte
+- Chart.js
+- Axios
+
+### Backend
+
+- Spring
+- Spring Boot
+- Spring Security
+
+### Database
+
+- MySQL
+- phpMyAdmin
+
+## Installation Instructions
+
+To run the Expense Tracker application, follow these steps:
+
+1. Clone the project repository to your local machine.
+
+2. Install the required Maven dependencies for the backend. In the project directory, run:
+   
+3. Run the backend Spring application to start the server.
+
+4. For the frontend, navigate to the `web` directory and run:
+
+```bash
+npm install
+```
+
+```bash
+npm run dev
+```
+
+This will start the frontend development server and open the application in your web browser.
+
+Now you can access the Expense Tracker application at http://localhost:5173/auth/login and start tracking your expenses and incomes visually.
+
+Please note that you need to configure the database connection details and other environment-specific settings in the application properties before running the backend.
+
+### Configuration
+
+Make sure to update the configuration files with your specific database settings, security configurations, and other environment variables as needed. You can find these configuration files in the backend project.
+
+Feel free to customize the application further and adapt it to your specific use case.
+
+Happy expense tracking!
+
 
-Expense tracker project made in Spring by a group of senior full-stack Nobel winner students. 

pom.xml

@@ -22,6 +22,7 @@
             <artifactId>spring-boot-starter-web</artifactId>
             <version>3.1.4</version>
         </dependency>
+
         <dependency>
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-data-jpa</artifactId>
@@ -43,6 +44,10 @@
             <groupId>org.springframework.boot</groupId>
             <artifactId>spring-boot-starter-security</artifactId>
         </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-oauth2-client</artifactId>
+        </dependency>
 
         <dependency>
             <groupId>org.projectlombok</groupId>
@@ -64,10 +69,9 @@
             <version>0.11.5</version>
         </dependency>
         <dependency>
-            <groupId>org.projectlombok</groupId>
+            <groupId>jakarta.validation</groupId>
-            <artifactId>lombok</artifactId>
+            <artifactId>jakarta.validation-api</artifactId>
-            <version>1.18.20</version>
+            <version>2.0.2</version>
-            <scope>provided</scope>
         </dependency>
     </dependencies>
     <build>

src/main/java/com/faf223/expensetrackerfaf/config/JwtAuthenticationFilter.java

@@ -1,5 +1,8 @@
 package com.faf223.expensetrackerfaf.config;
 
+import com.faf223.expensetrackerfaf.controller.auth.ErrorResponse;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import io.jsonwebtoken.ExpiredJwtException;
 import jakarta.servlet.FilterChain;
 import jakarta.servlet.ServletException;
 import jakarta.servlet.http.HttpServletRequest;
@@ -15,7 +18,6 @@ import org.springframework.stereotype.Component;
 import org.springframework.web.filter.OncePerRequestFilter;
 
 import java.io.IOException;
-
 @Component
 @RequiredArgsConstructor
 public class JwtAuthenticationFilter extends OncePerRequestFilter {
@@ -35,23 +37,38 @@ public class JwtAuthenticationFilter extends OncePerRequestFilter {
         }
         final String authHeader = request.getHeader("Authorization");
         final String jwt;
-        final String userEmail;
+        String userEmail;
         if (authHeader == null || !authHeader.startsWith("Bearer ")) {
             filterChain.doFilter(request, response);
             return;
         }
+
         jwt = authHeader.substring(7);
-        userEmail = jwtService.extractUsername(jwt);
+
-        if (userEmail != null && SecurityContextHolder.getContext().getAuthentication() == null) {
+        try {
-            UserDetails userDetails = this.userDetailsService.loadUserByUsername(userEmail);
+            userEmail = jwtService.extractUsername(jwt);
-            if (jwtService.isTokenValid(jwt, userDetails)) {
+            if (userEmail != null && SecurityContextHolder.getContext().getAuthentication() == null) {
-                UsernamePasswordAuthenticationToken authToken = new UsernamePasswordAuthenticationToken(
+                UserDetails userDetails = this.userDetailsService.loadUserByUsername(userEmail);
-                        userDetails, null, userDetails.getAuthorities());
+                if (jwtService.isTokenValid(jwt, userDetails)) {
-                authToken.setDetails(new WebAuthenticationDetailsSource()
+                    UsernamePasswordAuthenticationToken authToken = new UsernamePasswordAuthenticationToken(
-                        .buildDetails(request));
+                            userDetails, null, userDetails.getAuthorities());
-                SecurityContextHolder.getContext().setAuthentication(authToken);
+                    authToken.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
+                    SecurityContextHolder.getContext().setAuthentication(authToken);
+                }
             }
+        } catch (ExpiredJwtException e) {
+            // Token is expired; return a custom response
+            response.setStatus(HttpServletResponse.SC_UNAUTHORIZED);
+            response.setContentType("application/json");
+
+            ErrorResponse errorResponse = new ErrorResponse("TokenExpired", "Your session has expired. Please log in again.");
+            ObjectMapper objectMapper = new ObjectMapper(); // You may need to import ObjectMapper
+            response.getWriter().write(objectMapper.writeValueAsString(errorResponse));
+
+
+            response.getWriter().flush();
+            return;
         }
         filterChain.doFilter(request, response);
     }
-}
+}

src/main/java/com/faf223/expensetrackerfaf/config/JwtService.java

@@ -38,6 +38,10 @@ public class JwtService {
         return generateToken(new HashMap<>(), userDetails);
     }
 
+    public String generateRefreshToken(UserDetails userDetails) {
+        return generateRefreshToken(new HashMap<>(), userDetails);
+    }
+
     public String generateToken(
             Map<String, Object> extraClaims,
             UserDetails userDetails
@@ -45,6 +49,13 @@ public class JwtService {
         return buildToken(extraClaims, userDetails, jwtExpiration);
     }
 
+    public String generateRefreshToken(
+            Map<String, Object> extraClaims,
+            UserDetails userDetails
+    ) {
+        return buildToken(extraClaims, userDetails, refreshExpiration);
+    }
+
     private String buildToken(Map<String, Object> extraClaims, UserDetails userDetails, long expiration) {
         return Jwts
                 .builder()

src/main/java/com/faf223/expensetrackerfaf/config/SecurityConfiguration.java

@@ -1,20 +1,39 @@
 package com.faf223.expensetrackerfaf.config;
 
 import lombok.RequiredArgsConstructor;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
 import org.springframework.security.authentication.AuthenticationProvider;
-import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
+import org.springframework.security.config.Customizer;
+import org.springframework.security.config.annotation.method.configuration.EnableMethodSecurity;
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.config.annotation.web.configurers.AbstractHttpConfigurer;
 import org.springframework.security.config.http.SessionCreationPolicy;
+import org.springframework.security.oauth2.client.registration.ClientRegistration;
+import org.springframework.security.oauth2.client.registration.ClientRegistrationRepository;
+import org.springframework.security.oauth2.client.registration.InMemoryClientRegistrationRepository;
+import org.springframework.security.oauth2.client.userinfo.DefaultOAuth2UserService;
+import org.springframework.security.oauth2.client.userinfo.OAuth2UserRequest;
+import org.springframework.security.oauth2.client.userinfo.OAuth2UserService;
+import org.springframework.security.oauth2.core.AuthorizationGrantType;
+import org.springframework.security.oauth2.core.oidc.IdTokenClaimNames;
+import org.springframework.security.oauth2.core.user.OAuth2User;
 import org.springframework.security.web.SecurityFilterChain;
 import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;
+import org.springframework.web.cors.CorsConfiguration;
+import org.springframework.web.cors.CorsConfigurationSource;
+import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
+
+import java.util.Arrays;
+
+import static org.springframework.security.config.Customizer.withDefaults;
 
 @Configuration
 @EnableWebSecurity
 @RequiredArgsConstructor
-@EnableGlobalMethodSecurity(prePostEnabled = true)
+@EnableMethodSecurity
 public class SecurityConfiguration {
 
     private final JwtAuthenticationFilter jwtAuthFilter;
@@ -23,7 +42,8 @@ public class SecurityConfiguration {
     @Bean
     public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
         http
-                .csrf(csrf -> csrf.disable())
+                .cors(Customizer.withDefaults())
+                .csrf(AbstractHttpConfigurer::disable)
                 .authorizeHttpRequests(auth -> auth
                         .requestMatchers("/api/v1/auth/**").permitAll()
                         .anyRequest().authenticated()
@@ -31,7 +51,19 @@ public class SecurityConfiguration {
                 .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                 .authenticationProvider(authenticationProvider)
                 .addFilterBefore(jwtAuthFilter, UsernamePasswordAuthenticationFilter.class); // will be executed before UsernamePasswordAuthenticationFilter
-
         return http.build();
     }
+
+    @Bean
+    public CorsConfigurationSource corsConfigurationSource() {
+        CorsConfiguration configuration = new CorsConfiguration();
+        configuration.setAllowedOrigins(Arrays.asList("*"));
+        configuration.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"));
+        configuration.setAllowedHeaders(Arrays.asList("authorization", "content-type", "x-auth-token"));
+        configuration.setExposedHeaders(Arrays.asList("x-auth-token"));
+        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
+        source.registerCorsConfiguration("/**", configuration);
+        return source;
+    }
+
 }

src/main/java/com/faf223/expensetrackerfaf/controller/ExpenseController.java

@@ -4,10 +4,18 @@ import com.faf223.expensetrackerfaf.dto.ExpenseCreationDTO;
 import com.faf223.expensetrackerfaf.dto.ExpenseDTO;
 import com.faf223.expensetrackerfaf.dto.mappers.ExpenseMapper;
 import com.faf223.expensetrackerfaf.model.Expense;
+import com.faf223.expensetrackerfaf.model.ExpenseCategory;
+import com.faf223.expensetrackerfaf.model.User;
+import com.faf223.expensetrackerfaf.service.ExpenseCategoryService;
 import com.faf223.expensetrackerfaf.service.ExpenseService;
+import com.faf223.expensetrackerfaf.service.UserService;
 import lombok.RequiredArgsConstructor;
+import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.validation.BindingResult;
 import org.springframework.web.bind.annotation.*;
 
@@ -20,45 +28,83 @@ import java.util.stream.Collectors;
 public class ExpenseController {
 
     private final ExpenseService expenseService;
+    private final UserService userService;
     private final ExpenseMapper expenseMapper;
+    private final ExpenseCategoryService expenseCategoryService;
 
     @GetMapping()
     @PreAuthorize("hasRole('ADMIN')")
     public ResponseEntity<List<ExpenseDTO>> getAllExpenses() {
-        List<ExpenseDTO> expenses = expenseService.getExpenses().stream().map(expenseMapper::toDto).collect(Collectors.toList());
+        List<ExpenseDTO> expenses = expenseService.getTransactions().stream().map(expenseMapper::toDto).collect(Collectors.toList());
         if (!expenses.isEmpty()) return ResponseEntity.ok(expenses);
         else return ResponseEntity.notFound().build();
     }
 
     @PostMapping()
-    public ResponseEntity<ExpenseDTO> createNewExpense(@RequestBody ExpenseCreationDTO expenseDTO,
+    public ResponseEntity<Void> createNewExpense(@RequestBody ExpenseCreationDTO expenseDTO,
                                                        BindingResult bindingResult) {
         Expense expense = expenseMapper.toExpense(expenseDTO);
-        if (!bindingResult.hasErrors()) {
+
-            expenseService.createOrUpdateExpense(expense);
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
-            return ResponseEntity.ok(expenseMapper.toDto(expense));
+
-        } else {
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
-            return ResponseEntity.notFound().build();
+
+            String email = userDetails.getUsername();
+            User user = userService.getUserByEmail(email);
+            expense.setUser(user);
+
+            expenseService.createOrUpdate(expense);
+            return ResponseEntity.status(HttpStatus.CREATED).build();
         }
+
+        return ResponseEntity.notFound().build();
     }
 
-    @PatchMapping()
+
-    public ResponseEntity<ExpenseDTO> updateExpense(@RequestBody ExpenseCreationDTO expenseDTO,
+    // TODO: check if the expense belongs to the user
+    @PatchMapping("/update/{id}")
+    public ResponseEntity<Void> updateExpense(@PathVariable long id, @RequestBody ExpenseCreationDTO expenseDTO,
                                                     BindingResult bindingResult) {
-        Expense expense = expenseMapper.toExpense(expenseDTO);
+        Expense expense = expenseService.getTransactionById(id);
+        ExpenseCategory category = expenseCategoryService.getCategoryById(expenseDTO.getExpenseCategory());
+        expense.setCategory(category);
+        expense.setAmount(expenseDTO.getAmount());
+
         if (!bindingResult.hasErrors()) {
-            expenseService.createOrUpdateExpense(expense);
+            expenseService.createOrUpdate(expense);
-            return ResponseEntity.ok(expenseMapper.toDto(expense));
+            return ResponseEntity.status(HttpStatus.CREATED).build();
         } else {
             return ResponseEntity.notFound().build();
         }
     }
 
-    @GetMapping("/{userUuid}")
+    @GetMapping("/personal-expenses")
-    public ResponseEntity<List<ExpenseDTO>> getExpensesByUser(@PathVariable String userUuid) {
+    public ResponseEntity<List<ExpenseDTO>> getExpensesByUser() {
-        List<ExpenseDTO> expenses = expenseService.getExpensesByUserId(userUuid).stream().map(expenseMapper::toDto).collect(Collectors.toList());
+
-        if (!expenses.isEmpty()) return ResponseEntity.ok(expenses);
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
+
+            String email = userDetails.getUsername();
+            List<ExpenseDTO> expenses = expenseService.getTransactionsByEmail(email).stream().map(expenseMapper::toDto).collect(Collectors.toList());
+
+            if (!expenses.isEmpty()) {
+                return ResponseEntity.ok(expenses);
+            }
+        }
+
+        return ResponseEntity.notFound().build();
+    }
+
+    @GetMapping("/categories")
+    public ResponseEntity<List<ExpenseCategory>> getAllCategories() {
+        List<ExpenseCategory> categories = expenseCategoryService.getAllCategories();
+        if (!categories.isEmpty()) return ResponseEntity.ok(categories);
         else return ResponseEntity.notFound().build();
     }
-}
 
+    @DeleteMapping("/delete/{id}")
+    public void deleteCategory(@PathVariable long id) {
+        expenseService.deleteExpenseById(id);
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/controller/IncomeController.java

@@ -3,11 +3,17 @@ package com.faf223.expensetrackerfaf.controller;
 import com.faf223.expensetrackerfaf.dto.IncomeCreationDTO;
 import com.faf223.expensetrackerfaf.dto.IncomeDTO;
 import com.faf223.expensetrackerfaf.dto.mappers.IncomeMapper;
-import com.faf223.expensetrackerfaf.model.Income;
+import com.faf223.expensetrackerfaf.model.*;
+import com.faf223.expensetrackerfaf.service.IncomeCategoryService;
 import com.faf223.expensetrackerfaf.service.IncomeService;
+import com.faf223.expensetrackerfaf.service.UserService;
 import lombok.RequiredArgsConstructor;
+import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.validation.BindingResult;
 import org.springframework.web.bind.annotation.*;
 
@@ -20,45 +26,82 @@ import java.util.stream.Collectors;
 public class IncomeController {
 
     private final IncomeService incomeService;
+    private final UserService userService;
     private final IncomeMapper incomeMapper;
+    private final IncomeCategoryService incomeCategoryService;
 
     @GetMapping()
     @PreAuthorize("hasRole('ADMIN')")
     public ResponseEntity<List<IncomeDTO>> getAllIncomes() {
-        List<IncomeDTO> incomes = incomeService.getIncomes().stream().map(incomeMapper::toDto).collect(Collectors.toList());
+        List<IncomeDTO> incomes = incomeService.getTransactions().stream().map(incomeMapper::toDto).collect(Collectors.toList());
         if (!incomes.isEmpty()) return ResponseEntity.ok(incomes);
         else return ResponseEntity.notFound().build();
     }
 
     @PostMapping()
-    public ResponseEntity<IncomeDTO> createNewIncome(@RequestBody IncomeCreationDTO incomeDTO,
+    public ResponseEntity<Void> createNewIncome(@RequestBody IncomeCreationDTO incomeDTO,
                                                      BindingResult bindingResult) {
         Income income = incomeMapper.toIncome(incomeDTO);
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
+
+            String email = userDetails.getUsername();
+            User user = userService.getUserByEmail(email);
+            income.setUser(user);
+
+            System.out.println(income);
+            incomeService.createOrUpdate(income);
+            return ResponseEntity.status(HttpStatus.CREATED).build();
+        }
+
+        return ResponseEntity.notFound().build();
+    }
+
+    // TODO: check if the income belongs to the user, extract logic into service
+    @PatchMapping("/update/{id}")
+    public ResponseEntity<Void> updateIncome(@PathVariable long id, @RequestBody IncomeCreationDTO incomeDTO,
+                                                    BindingResult bindingResult) {
+        Income income = incomeService.getTransactionById(id);
+        IncomeCategory category = incomeCategoryService.getCategoryById(incomeDTO.getIncomeCategory());
+        income.setCategory(category);
+        income.setAmount(incomeDTO.getAmount());
+
         if (!bindingResult.hasErrors()) {
-            incomeService.createOrUpdateIncome(income);
+            incomeService.createOrUpdate(income);
-            return ResponseEntity.ok(incomeMapper.toDto(income));
+            return ResponseEntity.status(HttpStatus.CREATED).build();
         } else {
             return ResponseEntity.notFound().build();
         }
     }
 
-    @PatchMapping()
+    @GetMapping("/personal-incomes")
-    public ResponseEntity<IncomeDTO> updateIncome(@RequestBody IncomeCreationDTO incomeDTO,
+    public ResponseEntity<List<IncomeDTO>> getIncomesByUser() {
-                                                  BindingResult bindingResult) {
+
-        Income income = incomeMapper.toIncome(incomeDTO);
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
-        if (!bindingResult.hasErrors()) {
+
-            incomeService.createOrUpdateIncome(income);
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
-            return ResponseEntity.ok(incomeMapper.toDto(income));
+
-        } else {
+            String email = userDetails.getUsername();
-            return ResponseEntity.notFound().build();
+            List<IncomeDTO> incomes = incomeService.getTransactionsByEmail(email).stream().map(incomeMapper::toDto).collect(Collectors.toList());
+
+            if (!incomes.isEmpty()) {
+                return ResponseEntity.ok(incomes);
+            }
         }
+
+        return ResponseEntity.notFound().build();
     }
 
-    @GetMapping("/{userUuid}")
+    @GetMapping("/categories")
-    public ResponseEntity<List<IncomeDTO>> getIncomesByUser(@PathVariable String userUuid) {
+    public ResponseEntity<List<IncomeCategory>> getAllCategories() {
-        List<IncomeDTO> incomes = incomeService.getIncomesByUserId(userUuid).stream().map(incomeMapper::toDto).collect(Collectors.toList());
+        List<IncomeCategory> categories = incomeCategoryService.getAllCategories();
-        if (!incomes.isEmpty()) return ResponseEntity.ok(incomes);
+        if (!categories.isEmpty()) return ResponseEntity.ok(categories);
         else return ResponseEntity.notFound().build();
     }
-}
 
+    @DeleteMapping("/delete/{id}")
+    public void deleteIncome(@PathVariable long id) {
+        incomeService.deleteIncomeById(id);
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/controller/UserController.java

@@ -8,6 +8,9 @@ import com.faf223.expensetrackerfaf.service.UserService;
 import lombok.RequiredArgsConstructor;
 import org.springframework.http.ResponseEntity;
 import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.validation.BindingResult;
 import org.springframework.web.bind.annotation.*;
 
@@ -33,11 +36,16 @@ public class UserController {
         }
     }
 
-    @GetMapping("/{userUuid}")
+    @GetMapping("/getUserData")
-    public ResponseEntity<UserDTO> getUser(@PathVariable String userUuid) {
+    public ResponseEntity<UserDTO> getUser() {
-        User user = userService.getUserById(userUuid);
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
-        if (user != null) return ResponseEntity.ok(userMapper.toDto(user));
+
-        else return ResponseEntity.notFound().build();
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
+            User user = userService.getUserByEmail(userDetails.getUsername());
+            if (user != null) return ResponseEntity.ok(userMapper.toDto(user));
+            else return ResponseEntity.notFound().build();
+        }
+        return ResponseEntity.notFound().build();
     }
 
     @GetMapping()

src/main/java/com/faf223/expensetrackerfaf/controller/auth/AuthenticationController.java

@@ -1,19 +1,17 @@
 package com.faf223.expensetrackerfaf.controller.auth;
 
 import com.faf223.expensetrackerfaf.service.AuthenticationService;
+import lombok.RequiredArgsConstructor;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
 @RestController
 @RequestMapping("api/v1/auth")
+@RequiredArgsConstructor
 public class AuthenticationController {
 
     private final AuthenticationService service;
 
-    public AuthenticationController(AuthenticationService service) {
-        this.service = service;
-    }
-
     @PostMapping("/register")
     public ResponseEntity<AuthenticationResponse> register(@RequestBody RegisterRequest request) {
         return ResponseEntity.ok(service.register(request));
@@ -23,4 +21,9 @@ public class AuthenticationController {
     public ResponseEntity<AuthenticationResponse> authenticate(@RequestBody AuthenticationRequest request) {
         return ResponseEntity.ok(service.authenticate(request));
     }
+
+    @PostMapping("/refreshtoken")
+    public ResponseEntity<AuthenticationResponse> refreshAccessToken(@RequestBody TokenRefreshRequest request) {
+        return ResponseEntity.ok(service.refreshAccessToken(request));
+    }
 }

src/main/java/com/faf223/expensetrackerfaf/controller/auth/AuthenticationResponse.java

@@ -1,5 +1,6 @@
 package com.faf223.expensetrackerfaf.controller.auth;
 
+import com.fasterxml.jackson.annotation.JsonProperty;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
 import lombok.Data;
@@ -11,5 +12,8 @@ import lombok.NoArgsConstructor;
 @NoArgsConstructor
 public class AuthenticationResponse {
 
-    private String token;
+    @JsonProperty("access_token")
+    private String accessToken;
+    @JsonProperty("refresh_token")
+    private String refreshToken;
 }

src/main/java/com/faf223/expensetrackerfaf/controller/auth/ErrorResponse.java

@@ -0,0 +1,16 @@
+package com.faf223.expensetrackerfaf.controller.auth;
+
+import lombok.Getter;
+import lombok.Setter;
+
+@Getter
+@Setter
+public class ErrorResponse {
+    private String error;
+    private String message;
+
+    public ErrorResponse(String error, String message) {
+        this.error = error;
+        this.message = message;
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/controller/auth/TokenRefreshRequest.java

@@ -0,0 +1,8 @@
+package com.faf223.expensetrackerfaf.controller.auth;
+
+import lombok.Data;
+
+@Data
+public class TokenRefreshRequest {
+    private String refreshToken;
+}

src/main/java/com/faf223/expensetrackerfaf/dto/ExpenseCreationDTO.java

@@ -11,9 +11,6 @@ import java.time.LocalDate;
 @Data
 @AllArgsConstructor
 public class ExpenseCreationDTO {
-    private long expenseId;
+    private int expenseCategory;
-    private User user;
-    private ExpenseCategory expenseCategory;
-    private LocalDate date;
     private BigDecimal amount;
-}
+}

src/main/java/com/faf223/expensetrackerfaf/dto/ExpenseDTO.java

@@ -15,4 +15,4 @@ public class ExpenseDTO {
     private ExpenseCategory expenseCategory;
     private LocalDate date;
     private BigDecimal amount;
-}
+}

src/main/java/com/faf223/expensetrackerfaf/dto/IncomeCreationDTO.java

@@ -11,9 +11,6 @@ import java.time.LocalDate;
 @Data
 @AllArgsConstructor
 public class IncomeCreationDTO {
-    private long incomeId;
+    private int incomeCategory;
-    private User user;
-    private IncomeCategory category;
-    private LocalDate date;
     private BigDecimal amount;
-}
+}

src/main/java/com/faf223/expensetrackerfaf/dto/IncomeDTO.java

@@ -12,7 +12,7 @@ import java.time.LocalDate;
 public class IncomeDTO {
     private long incomeId;
     private UserDTO userDTO;
-    private IncomeCategory category;
+    private IncomeCategory incomeCategory;
     private LocalDate date;
     private BigDecimal amount;
-}
+}

src/main/java/com/faf223/expensetrackerfaf/dto/mappers/ExpenseMapper.java

@@ -3,32 +3,35 @@ package com.faf223.expensetrackerfaf.dto.mappers;
 import com.faf223.expensetrackerfaf.dto.ExpenseCreationDTO;
 import com.faf223.expensetrackerfaf.dto.ExpenseDTO;
 import com.faf223.expensetrackerfaf.model.Expense;
+import com.faf223.expensetrackerfaf.service.ExpenseCategoryService;
 import com.faf223.expensetrackerfaf.service.ExpenseService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Component;
 
+import java.time.LocalDate;
+
 @Component
 public class ExpenseMapper {
 
     private final ExpenseService expenseService;
+    private final ExpenseCategoryService expenseCategoryService;
     private final UserMapper userMapper;
 
     @Autowired
-    public ExpenseMapper(ExpenseService expenseService, UserMapper userMapper) {
+    public ExpenseMapper(ExpenseService expenseService, ExpenseCategoryService expenseCategoryService, UserMapper userMapper) {
         this.expenseService = expenseService;
+        this.expenseCategoryService = expenseCategoryService;
         this.userMapper = userMapper;
     }
 
     public ExpenseDTO toDto(Expense expense) {
-        return new ExpenseDTO(expense.getExpenseId(), userMapper.toDto(expense.getUser()),
+        return new ExpenseDTO(expense.getId(), userMapper.toDto(expense.getUser()),
                 expense.getCategory(), expense.getDate(), expense.getAmount());
     }
 
     public Expense toExpense(ExpenseCreationDTO expenseDTO) {
-        Expense expense = expenseService.getExpenseById(expenseDTO.getExpenseId());
+
-        if(expense == null) return new Expense(expenseDTO.getExpenseId(), expenseDTO.getUser(),
+        return new Expense(expenseCategoryService.getCategoryById(expenseDTO.getExpenseCategory()), LocalDate.now(), expenseDTO.getAmount());
-                expenseDTO.getExpenseCategory(), expenseDTO.getDate(), expenseDTO.getAmount());
-        return expense;
     }
 
-}
+}

src/main/java/com/faf223/expensetrackerfaf/dto/mappers/IncomeMapper.java

@@ -4,32 +4,34 @@ import com.faf223.expensetrackerfaf.dto.IncomeCreationDTO;
 import com.faf223.expensetrackerfaf.dto.IncomeDTO;
 import com.faf223.expensetrackerfaf.model.Expense;
 import com.faf223.expensetrackerfaf.model.Income;
+import com.faf223.expensetrackerfaf.service.IncomeCategoryService;
 import com.faf223.expensetrackerfaf.service.IncomeService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Component;
 
+import java.time.LocalDate;
+
 @Component
 public class IncomeMapper {
 
     private final IncomeService incomeService;
+    private final IncomeCategoryService incomeCategoryService;
     private final UserMapper userMapper;
 
     @Autowired
-    public IncomeMapper(IncomeService incomeService, UserMapper userMapper) {
+    public IncomeMapper(IncomeService incomeService, IncomeCategoryService incomeCategoryService, UserMapper userMapper) {
         this.incomeService = incomeService;
+        this.incomeCategoryService = incomeCategoryService;
         this.userMapper = userMapper;
     }
 
     public IncomeDTO toDto(Income income) {
-        return new IncomeDTO(income.getIncomeId(), userMapper.toDto(income.getUser()),
+        return new IncomeDTO(income.getId(), userMapper.toDto(income.getUser()),
                 income.getCategory(), income.getDate(), income.getAmount());
     }
 
     public Income toIncome(IncomeCreationDTO incomeDTO) {
-        Income income = incomeService.getIncomeById(incomeDTO.getIncomeId());
+        return new Income(incomeCategoryService.getCategoryById(incomeDTO.getIncomeCategory()), LocalDate.now(), incomeDTO.getAmount());
-        if(income == null) return new Income(incomeDTO.getIncomeId(), incomeDTO.getUser(),
-                incomeDTO.getCategory(), incomeDTO.getDate(), incomeDTO.getAmount());
-        return income;
     }
 
-}
+}

src/main/java/com/faf223/expensetrackerfaf/model/Credential.java

@@ -1,35 +1,35 @@
-    package com.faf223.expensetrackerfaf.model;
+package com.faf223.expensetrackerfaf.model;
 
-    import jakarta.persistence.*;
+import jakarta.persistence.*;
-    import lombok.AllArgsConstructor;
+import lombok.AllArgsConstructor;
-    import lombok.Data;
+import lombok.Data;
-    import lombok.NoArgsConstructor;
+import lombok.NoArgsConstructor;
 
-    @Data
+@Data
-    @Entity(name = "credentials")
+@Entity(name = "credentials")
-    @NoArgsConstructor
+@NoArgsConstructor
-    @AllArgsConstructor
+@AllArgsConstructor
-    public class Credential {
+public class Credential {
-        @Id
+    @Id
-        @GeneratedValue(strategy = GenerationType.IDENTITY)
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
-        private Long credentialId;
+    private Long credentialId;
 
-        @ManyToOne
+    @ManyToOne
-        @JoinColumn(name = "user_uuid")
+    @JoinColumn(name = "user_uuid")
-        private User user;
+    private User user;
 
-        private String email;
+    private String email;
-        private String password;
+    private String password;
 
-        @Enumerated(EnumType.STRING)
+    @Enumerated(EnumType.STRING)
-        private Role role;
+    private Role role;
 
-        public Credential(User user, String email, String password) {
+    public Credential(User user, String email, String password) {
-            this.user = user;
+        this.user = user;
-            this.email = email;
+        this.email = email;
-            this.password = password;
+        this.password = password;
 
-            this.role = Role.ROLE_USER;
+        this.role = Role.ROLE_USER;
-        }
     }
+}
 

src/main/java/com/faf223/expensetrackerfaf/model/Expense.java

@@ -1,10 +1,7 @@
 package com.faf223.expensetrackerfaf.model;
 import com.fasterxml.jackson.annotation.JsonIgnore;
 import jakarta.persistence.*;
-import lombok.AllArgsConstructor;
+import lombok.*;
-import lombok.Data;
-import lombok.ToString;
-import lombok.NoArgsConstructor;
 
 import java.math.BigDecimal;
 import java.time.LocalDate;
@@ -13,10 +10,11 @@ import java.time.LocalDate;
 @AllArgsConstructor
 @NoArgsConstructor
 @Entity(name = "expenses")
-public class Expense {
+public class Expense implements IMoneyTransaction {
     @Id
     @GeneratedValue(strategy = GenerationType.IDENTITY)
-    private Long expenseId;
+    @Column(name = "expense_id")
+    private Long id;
 
     @ManyToOne()
     @JoinColumn(name = "user_uuid")
@@ -30,5 +28,13 @@ public class Expense {
 
     private LocalDate date;
     private BigDecimal amount;
-}
 
+    public Expense(LocalDate date, BigDecimal amount) {
+    }
+
+    public Expense(ExpenseCategory expenseCategory, LocalDate date, BigDecimal amount) {
+        this.category = expenseCategory;
+        this.date = date;
+        this.amount = amount;
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/model/ExpenseCategory.java

@@ -1,17 +1,16 @@
 package com.faf223.expensetrackerfaf.model;
 
-import jakarta.persistence.Entity;
+import jakarta.persistence.*;
-import jakarta.persistence.GeneratedValue;
-import jakarta.persistence.GenerationType;
-import jakarta.persistence.Id;
 import lombok.Data;
 
 @Data
 @Entity(name = "expense_categories")
-public class ExpenseCategory {
+public class ExpenseCategory implements IMoneyTransactionCategory {
     @Id
     @GeneratedValue(strategy = GenerationType.IDENTITY)
-    private Long categoryId;
+    @Column(name = "category_id")
+    private Long id;
 
-    private String categoryName;
+    @Column(name = "category_name")
+    private String name;
 }

src/main/java/com/faf223/expensetrackerfaf/model/IMoneyTransaction.java

@@ -0,0 +1,14 @@
+package com.faf223.expensetrackerfaf.model;
+
+import java.math.BigDecimal;
+import java.time.LocalDate;
+
+public interface IMoneyTransaction {
+
+    Long getId();
+    LocalDate getDate();
+    User getUser();
+    BigDecimal getAmount();
+    IMoneyTransactionCategory getCategory();
+
+}

src/main/java/com/faf223/expensetrackerfaf/model/IMoneyTransactionCategory.java

@@ -0,0 +1,6 @@
+package com.faf223.expensetrackerfaf.model;
+
+public interface IMoneyTransactionCategory {
+    Long getId();
+    String getName();
+}

src/main/java/com/faf223/expensetrackerfaf/model/Income.java

@@ -2,10 +2,8 @@ package com.faf223.expensetrackerfaf.model;
 
 import com.fasterxml.jackson.annotation.JsonIgnore;
 import jakarta.persistence.*;
-import lombok.AllArgsConstructor;
+import lombok.*;
-import lombok.Data;
+
-import lombok.ToString;
-import lombok.NoArgsConstructor;
 import java.math.BigDecimal;
 import java.time.LocalDate;
 
@@ -13,10 +11,11 @@ import java.time.LocalDate;
 @AllArgsConstructor
 @NoArgsConstructor
 @Entity(name = "incomes")
-public class Income {
+public class Income implements IMoneyTransaction {
     @Id
     @GeneratedValue(strategy = GenerationType.IDENTITY)
-    private Long incomeId;
+    @Column(name = "income_id")
+    private Long id;
 
     @ManyToOne
     @JoinColumn(name = "user_uuid")
@@ -30,4 +29,10 @@ public class Income {
 
     private LocalDate date;
     private BigDecimal amount;
+
+    public Income(IncomeCategory incomeCategory, LocalDate date, BigDecimal amount) {
+        this.category = incomeCategory;
+        this.date = date;
+        this.amount = amount;
+    }
 }

src/main/java/com/faf223/expensetrackerfaf/model/IncomeCategory.java

@@ -1,18 +1,17 @@
 package com.faf223.expensetrackerfaf.model;
 
-import jakarta.persistence.Entity;
+import jakarta.persistence.*;
-import jakarta.persistence.GeneratedValue;
-import jakarta.persistence.GenerationType;
-import jakarta.persistence.Id;
 import lombok.Data;
 
 @Data
 @Entity(name = "income_categories")
-public class IncomeCategory {
+public class IncomeCategory implements IMoneyTransactionCategory {
     @Id
     @GeneratedValue(strategy = GenerationType.IDENTITY)
-    private Long categoryId;
+    @Column(name = "category_id")
+    private Long id;
 
-    private String categoryName;
+    @Column(name = "category_name")
+    private String name;
 }
 

src/main/java/com/faf223/expensetrackerfaf/model/Role.java

@@ -1,4 +1,3 @@
-
 package com.faf223.expensetrackerfaf.model;
 
 public enum Role {

src/main/java/com/faf223/expensetrackerfaf/model/User.java

@@ -1,4 +1,3 @@
-
 package com.faf223.expensetrackerfaf.model;
 
 import jakarta.persistence.*;

src/main/java/com/faf223/expensetrackerfaf/repository/UserRepository.java

@@ -7,4 +7,6 @@ import java.util.Optional;
 
 public interface UserRepository extends JpaRepository<User, String> {
     Optional<User> getUserByUserUuid(String userUuid);
+
+    Optional<User> findByUsername(String username);
 }

src/main/java/com/faf223/expensetrackerfaf/service/AuthenticationService.java

@@ -4,6 +4,7 @@ import com.faf223.expensetrackerfaf.config.JwtService;
 import com.faf223.expensetrackerfaf.controller.auth.AuthenticationRequest;
 import com.faf223.expensetrackerfaf.controller.auth.AuthenticationResponse;
 import com.faf223.expensetrackerfaf.controller.auth.RegisterRequest;
+import com.faf223.expensetrackerfaf.controller.auth.TokenRefreshRequest;
 import com.faf223.expensetrackerfaf.model.Credential;
 import com.faf223.expensetrackerfaf.model.User;
 import com.faf223.expensetrackerfaf.repository.CredentialRepository;
@@ -12,10 +13,13 @@ import com.faf223.expensetrackerfaf.security.PersonDetails;
 import lombok.RequiredArgsConstructor;
 import org.springframework.security.authentication.AuthenticationManager;
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.security.core.userdetails.UsernameNotFoundException;
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.stereotype.Service;
 
+import java.util.Optional;
+
 @Service
 @RequiredArgsConstructor
 public class AuthenticationService {
@@ -38,9 +42,13 @@ public class AuthenticationService {
         Credential credential = new Credential(user, request.getEmail(), passwordEncoder.encode(request.getPassword()));
         credentialRepository.save(credential);
 
-        String jwtToken = jwtService.generateToken(new PersonDetails(credential));
+        UserDetails userDetails = new PersonDetails(credential);
+        String jwtToken = jwtService.generateToken(userDetails);
+        String refreshToken = jwtService.generateRefreshToken(userDetails);
+
         return AuthenticationResponse.builder()
-                .token(jwtToken)
+                .accessToken(jwtToken)
+                .refreshToken(refreshToken)
                 .build();
     }
 
@@ -49,10 +57,30 @@ public class AuthenticationService {
 
         Credential credential = credentialRepository.findByEmail(request.getEmail()).orElseThrow((() -> new UsernameNotFoundException("User not found")));
 
-        String jwtToken = jwtService.generateToken(new PersonDetails(credential));
+        UserDetails userDetails = new PersonDetails(credential);
+        String jwtToken = jwtService.generateToken(userDetails);
+        String refreshToken = jwtService.generateRefreshToken(userDetails);
         return AuthenticationResponse.builder()
-                .token(jwtToken)
+                .accessToken(jwtToken)
+                .refreshToken(refreshToken)
                 .build();
     }
 
+    public AuthenticationResponse refreshAccessToken(TokenRefreshRequest refreshRequest) {
+        String refreshToken = refreshRequest.getRefreshToken();
+
+        Optional<Credential> credential = credentialRepository.findByEmail(jwtService.extractUsername(refreshToken));
+        if (credential.isPresent()) {
+            UserDetails userDetails = new PersonDetails(credential.get());
+
+            String jwtToken = jwtService.generateToken(userDetails);
+            return AuthenticationResponse.builder()
+                    .accessToken(jwtToken)
+                    .refreshToken(refreshToken)
+                    .build();
+        } else {
+            throw new RuntimeException("Invalid or expired refresh token");
+        }
+    }
+
 }

src/main/java/com/faf223/expensetrackerfaf/service/ExpenseCategoryService.java

@@ -0,0 +1,26 @@
+package com.faf223.expensetrackerfaf.service;
+
+import com.faf223.expensetrackerfaf.model.ExpenseCategory;
+import com.faf223.expensetrackerfaf.repository.ExpenseCategoryRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+@RequiredArgsConstructor
+public class ExpenseCategoryService implements ICategoryService {
+
+    private final ExpenseCategoryRepository expenseCategoryRepository;
+
+    @Override
+    public List<ExpenseCategory> getAllCategories() {
+        return expenseCategoryRepository.findAll();
+    }
+
+    @Override
+    public ExpenseCategory getCategoryById(long id) {
+        return expenseCategoryRepository.getReferenceById(id);
+    }
+
+}

src/main/java/com/faf223/expensetrackerfaf/service/ExpenseService.java

@@ -1,11 +1,11 @@
 package com.faf223.expensetrackerfaf.service;
 
+import com.faf223.expensetrackerfaf.model.Credential;
 import com.faf223.expensetrackerfaf.model.Expense;
-import com.faf223.expensetrackerfaf.model.User;
+import com.faf223.expensetrackerfaf.model.IMoneyTransaction;
+import com.faf223.expensetrackerfaf.repository.CredentialRepository;
 import com.faf223.expensetrackerfaf.repository.ExpenseRepository;
-import com.faf223.expensetrackerfaf.repository.UserRepository;
 import lombok.RequiredArgsConstructor;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
 import java.util.ArrayList;
@@ -14,30 +14,34 @@ import java.util.Optional;
 
 @Service
 @RequiredArgsConstructor
-public class ExpenseService {
+public class ExpenseService implements ITransactionService {
 
     private final ExpenseRepository expenseRepository;
-    private final UserRepository userRepository;
+    private final CredentialRepository credentialRepository;
 
-    public void createOrUpdateExpense(Expense expense) {
+    public void createOrUpdate(IMoneyTransaction expense) {
-        expenseRepository.save(expense);
+        expenseRepository.save((Expense) expense);
     }
 
-    public List<Expense> getExpensesByUserId(String userUuid) {
+    public List<Expense> getTransactionsByEmail(String email) {
 
-        Optional<User> user = userRepository.getUserByUserUuid(userUuid);
+        Optional<Credential> credential = credentialRepository.findByEmail(email);
-        if (user.isPresent()) {
+        if (credential.isPresent()) {
-            return expenseRepository.findByUser(user.get());
+            return expenseRepository.findByUser(credential.get().getUser());
         }
 
         return new ArrayList<>();
     }
 
-    public List<Expense> getExpenses() {
+    public List<Expense> getTransactions() {
         return expenseRepository.findAll();
     }
 
-    public Expense getExpenseById(long id) {
+    public Expense getTransactionById(long id) {
         return expenseRepository.findById(id).orElse(null);
     }
+
+    public void deleteExpenseById(long id) {
+        expenseRepository.deleteById(id);
+    }
 }

src/main/java/com/faf223/expensetrackerfaf/service/ICategoryService.java

@@ -0,0 +1,12 @@
+package com.faf223.expensetrackerfaf.service;
+
+import com.faf223.expensetrackerfaf.model.IMoneyTransactionCategory;
+
+import java.util.List;
+
+public interface ICategoryService {
+
+    List<? extends IMoneyTransactionCategory> getAllCategories();
+    IMoneyTransactionCategory getCategoryById(long id);
+
+}

src/main/java/com/faf223/expensetrackerfaf/service/ITransactionService.java

@@ -0,0 +1,14 @@
+package com.faf223.expensetrackerfaf.service;
+
+import com.faf223.expensetrackerfaf.model.IMoneyTransaction;
+
+import java.util.List;
+
+public interface ITransactionService {
+
+    void createOrUpdate(IMoneyTransaction transaction);
+    List<? extends IMoneyTransaction> getTransactions();
+    List<? extends IMoneyTransaction> getTransactionsByEmail(String email);
+    IMoneyTransaction getTransactionById(long id);
+
+}

src/main/java/com/faf223/expensetrackerfaf/service/IncomeCategoryService.java

@@ -0,0 +1,25 @@
+package com.faf223.expensetrackerfaf.service;
+
+import com.faf223.expensetrackerfaf.model.IncomeCategory;
+import com.faf223.expensetrackerfaf.repository.IncomeCategoryRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+
+import java.util.List;
+
+@Service
+@RequiredArgsConstructor
+public class IncomeCategoryService implements ICategoryService {
+
+    private final IncomeCategoryRepository incomeCategoryRepository;
+
+    @Override
+    public List<IncomeCategory> getAllCategories() {
+        return incomeCategoryRepository.findAll();
+    }
+
+    @Override
+    public IncomeCategory getCategoryById(long id) {
+        return incomeCategoryRepository.getReferenceById(id);
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/service/IncomeService.java

@@ -1,11 +1,11 @@
 package com.faf223.expensetrackerfaf.service;
 
+import com.faf223.expensetrackerfaf.model.Credential;
+import com.faf223.expensetrackerfaf.model.IMoneyTransaction;
 import com.faf223.expensetrackerfaf.model.Income;
-import com.faf223.expensetrackerfaf.model.User;
+import com.faf223.expensetrackerfaf.repository.CredentialRepository;
 import com.faf223.expensetrackerfaf.repository.IncomeRepository;
-import com.faf223.expensetrackerfaf.repository.UserRepository;
 import lombok.RequiredArgsConstructor;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
 import java.util.ArrayList;
@@ -14,30 +14,34 @@ import java.util.Optional;
 
 @Service
 @RequiredArgsConstructor
-public class IncomeService {
+public class IncomeService implements ITransactionService {
 
     private final IncomeRepository incomeRepository;
-    private final UserRepository userRepository;
+    private final CredentialRepository credentialRepository;
 
-    public void createOrUpdateIncome(Income income) {
+    public void createOrUpdate(IMoneyTransaction income) {
-        incomeRepository.save(income);
+        incomeRepository.save((Income) income);
     }
 
-    public List<Income> getIncomes() {
+    public List<Income> getTransactions() {
         return incomeRepository.findAll();
     }
 
-    public List<Income> getIncomesByUserId(String userUuid) {
+    public List<Income> getTransactionsByEmail(String email) {
 
-        Optional<User> user = userRepository.getUserByUserUuid(userUuid);
+        Optional<Credential> credential = credentialRepository.findByEmail(email);
-        if (user.isPresent()) {
+        if (credential.isPresent()) {
-            return incomeRepository.findByUser(user.get());
+            return incomeRepository.findByUser(credential.get().getUser());
         }
 
         return new ArrayList<>();
     }
 
-    public Income getIncomeById(long id) {
+    public Income getTransactionById(long id) {
         return incomeRepository.findById(id).orElse(null);
     }
+
+    public void deleteIncomeById(long id) {
+        incomeRepository.deleteById(id);
+    }
 }

src/main/java/com/faf223/expensetrackerfaf/service/UserService.java

@@ -1,17 +1,21 @@
 package com.faf223.expensetrackerfaf.service;
 
+import com.faf223.expensetrackerfaf.model.Credential;
 import com.faf223.expensetrackerfaf.model.User;
+import com.faf223.expensetrackerfaf.repository.CredentialRepository;
 import com.faf223.expensetrackerfaf.repository.UserRepository;
 import lombok.RequiredArgsConstructor;
 import org.springframework.stereotype.Service;
 
 import java.util.List;
+import java.util.Optional;
 
 @Service
 @RequiredArgsConstructor
 public class UserService {
 
     private final UserRepository userRepository;
+    private final CredentialRepository credentialRepository;
 
     public void updateUser(User user) {
         userRepository.save(user);
@@ -24,4 +28,12 @@ public class UserService {
     public User getUserById(String userUuid) {
         return userRepository.findById(userUuid).orElse(null);
     }
+    public User getUserByEmail(String email) {
+        Optional<Credential> credential = credentialRepository.findByEmail(email);
+        if (credential.isPresent()) {
+            Optional<User> user = userRepository.findById(credential.get().getUser().getUserUuid());
+            return user.orElse(null);
+        }
+        return null;
+    }
 }

src/main/java/com/faf223/expensetrackerfaf/util/IMoneyTransaction.java

@@ -1,11 +0,0 @@
-package com.faf223.expensetrackerfaf.util;
-
-import com.faf223.expensetrackerfaf.model.User;
-
-public interface IMoneyTransaction {
-
-    User getUser();
-    int getAmount();
-    String getCategory();
-
-}

src/main/java/com/faf223/expensetrackerfaf/web/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

src/main/java/com/faf223/expensetrackerfaf/web/.eslintrc.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+	root: true,
+	extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

src/main/java/com/faf223/expensetrackerfaf/web/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

src/main/java/com/faf223/expensetrackerfaf/web/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

src/main/java/com/faf223/expensetrackerfaf/web/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

src/main/java/com/faf223/expensetrackerfaf/web/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

src/main/java/com/faf223/expensetrackerfaf/web/README.md

@@ -0,0 +1,6 @@
+# ExpenseTracker App
+
+![image](https://github.com/lumijiez/svelte-expensetracker/assets/59575049/7ceab8aa-6d85-4a6b-95fd-2cffbe505fdf)
+
+Responsive flexbox dashboard made with Chart.js and Svelte
+

src/main/java/com/faf223/expensetrackerfaf/web/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "expensetracker",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@fontsource/fira-mono": "^4.5.10",
+		"@neoconfetti/svelte": "^1.0.0",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"svelte": "^4.0.5",
+		"vite": "^4.4.2"
+	},
+	"type": "module",
+	"dependencies": {
+		"@fortawesome/free-brands-svg-icons": "^6.4.2",
+		"@fortawesome/free-solid-svg-icons": "^6.4.2",
+		"axios": "^1.5.1",
+		"chart.js": "^4.4.0",
+		"email-validator": "^2.0.4",
+		"js-cookie": "^3.0.5",
+		"stores": "^1.0.0",
+		"svelte-cookie": "^1.0.1",
+		"svelte-fa": "^3.0.4",
+		"svelte-simple-modal": "^1.6.1",
+		"svelte-spa-router": "^3.3.0"
+	}
+}

src/main/java/com/faf223/expensetrackerfaf/web/src/app.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+		<style>
+			body, html {
+        		margin: 0;
+        		padding: 0;
+        		height: 100%;
+    		}
+		</style>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

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

@@ -0,0 +1,20 @@
+<script>
+    import LoginForm from './LoginForm.svelte';
+</script>
+
+<div id="wrapper">
+    <LoginForm />
+</div>
+
+<style>
+    #wrapper {
+        background-color: #041721;
+        margin:0;
+        padding:0;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>

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

@@ -0,0 +1,180 @@
+<script>
+    import axios from "axios";
+    import {onMount} from "svelte";
+    import { getCookie, setCookie } from 'svelte-cookie';
+
+    let isErrorVisible = false;
+    let username, password;
+    let message = ""
+
+    onMount(async () => {
+
+        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();
+
+        try {
+            const response = await axios.post('http://localhost:8081/api/v1/auth/authenticate', {
+                email: username,
+                password: password,
+            });
+
+            const { access_token, refresh_token } = response.data;
+
+            setCookie('access_token', access_token);
+            setCookie('refresh_token', refresh_token);
+
+            window.location.href = '/dashboard'
+        } catch (error) {
+            console.error('Login failed:', error);
+        }
+    }
+</script>
+
+<div class="animated bounceInDown">
+    <div class="container">
+        {#if isErrorVisible}
+            <span class="error animated tada" id="msg">{message}</span>
+        {/if}
+        <form name="loginForm" class="loginForm" on:submit={submitForm}>
+            <h1 id="formTitle">Track<span>.io</span></h1>
+            <h5>Sign in to your account.</h5>
+            <input id="usernameInput" type="text" name="email" placeholder="Email or Username" autocomplete="off" on:input={
+                event => {username = event.target.value}
+            }>
+            <input id="passwordInput" type="password" name="password" placeholder="Password" autocomplete="off" on:input={
+                event => {password = event.target.value}
+            }>
+            <a href="/auth/recovery" class="recoveryPass">Forgot your password?</a>
+            <input type="submit" value="Sign in" class="submitButton">
+        </form>
+        <a href="/auth/register" class="noAccount">Don't have an account? Sign up</a>
+    </div> 
+</div>
+
+
+<style>
+    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
+
+    .container {
+        margin: 0;
+        top: 50px;
+        left: 50%;
+        font-family: 'Source Sans Pro', sans-serif;
+        position: absolute;
+        text-align: center;
+        transform: translateX(-50%);
+        background-color: rgb(33, 41, 66);
+        border-radius: 9px;
+        border-top: 10px solid #79a6fe;
+        border-bottom: 10px solid #8BD17C;
+        width: 400px;
+        height: 500px;
+        box-shadow: 1px 1px 108.8px 19.2px rgb(25, 31, 53);
+    }
+    
+    #formTitle {
+        font-family: 'Source Sans Pro', sans-serif;
+        color: #5c6bc0;
+        margin-top: 94px;
+    }
+    
+    #formTitle span {
+        color: #dfdeee;
+        font-weight: lighter;
+    }
+    
+    .loginForm h5 {
+        font-family: 'Source Sans Pro', sans-serif;
+        font-size: 13px;
+        color: #a1a4ad;
+        letter-spacing: 1.5px;
+        margin-top: -15px;
+        margin-bottom: 70px;
+    }
+    
+    .loginForm input[type="text"],
+    .loginForm input[type="password"] {
+        display: block;
+        margin: 20px auto;
+        background: #262e49;
+        border: 0;
+        border-radius: 5px;
+        padding: 14px 10px;
+        width: 320px;
+        outline: none;
+        color: #d6d6d6;
+        -webkit-transition: all .2s ease-out;
+        -moz-transition: all .2s ease-out;
+        -ms-transition: all .2s ease-out;
+        -o-transition: all .2s ease-out;
+        transition: all .2s ease-out;
+    }
+    
+    .loginForm input[type="text"]:focus,
+    .loginForm input[type="password"]:focus {
+        border: 1px solid #79A6FE;
+    }
+    
+    a {
+        color: #5c7fda;
+        text-decoration: none;
+    }
+    
+    a:hover {
+        text-decoration: underline;
+    }
+    
+    .submitButton {
+        border: 0;
+        background: #7f5feb;
+        color: #dfdeee;
+        border-radius: 100px;
+        width: 340px;
+        height: 49px;
+        font-size: 16px;
+        position: absolute;
+        top: 79%;
+        left: 8%;
+        transition: 0.3s;
+        cursor: pointer;
+    }
+    
+    .submitButton:hover {
+        background: #5d33e6;
+    }
+    
+    .recoveryPass {
+        position: relative;
+        float: right;
+        right: 28px;
+    }
+    
+    .noAccount {
+        position: absolute;
+        top: 92%;
+        left: 24%;
+    }
+    
+    .error {
+        text-align: center;
+        width: 337px;
+        height: 20px;
+        padding: 2px;
+        border: 0;
+        border-radius: 5px;
+        margin: 10px auto 10px;
+        position: absolute;
+        top: 31%;
+        left: 7.2%;
+        color: rgb(190, 67, 29);
+    }
+</style>

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

@@ -0,0 +1,20 @@
+<script>
+    import RegisterForm from './RegisterForm.svelte';
+</script>
+
+<div id="wrapper">
+    <RegisterForm />
+</div>
+
+<style>
+    #wrapper {
+        background-color: #041721;
+        margin:0;
+        padding:0;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+</style>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/register/RegisterForm.svelte

@@ -0,0 +1,178 @@
+<script>
+    import * as EmailValidator from 'email-validator';
+
+    let isErrorVisible = false;
+    let username, email, password;
+    let message = ""
+
+    function submitForm(event) {
+        event.preventDefault();
+        console.log("Tried to submit!");
+        console.log("Valid? ", (validateEmail() && validateUsername() && validatePassword() ? "Yes" : "No"));
+    }
+
+    function validateEmail() {
+        let valid = EmailValidator.validate(username);
+        isErrorVisible = valid ? false : true;
+        message = isErrorVisible ? "Invalid e-mail!" : "";
+        return valid;
+    }
+
+    function validatePassword() {
+        let valid = password.value != '';
+        isErrorVisible = valid ? false : true;
+        message = isErrorVisible ? "Invalid password!" : "";
+        return valid;
+    }
+
+    function validateUsername() {
+        let valid = username.value != '';
+        isErrorVisible = valid ? false : true;
+        message = isErrorVisible ? "Invalid password!" : "";
+        return valid;
+    }
+
+</script>
+
+<div class="animated bounceInDown">
+    <div class="container">
+        {#if isErrorVisible}
+            <span class="error animated tada" id="msg">{message}</span>
+        {/if}
+        <form name="registerForm" class="registerForm" on:submit={submitForm}>
+            <h1 id="formTitle">Track<span>.io</span></h1>
+            <h5>Sign up for a new account.</h5>
+            <input id="usernameInput" type="text" name="username" placeholder="Username" autocomplete="off" on:input={
+                event => {username = event.target.value}
+            }>
+            <input id="emailInput" type="text" name="email" placeholder="Email" autocomplete="off" on:input={
+                event => {email = event.target.value}
+            }>
+            <input id="passwordInput" type="password" name="password" placeholder="Password" autocomplete="off" on:input={
+                event => {password = event.target.password}
+            }>
+            <a href="/auth/recovery" class="recoveryPass">Forgot your password?</a>
+            <input type="submit" value="Sign up" class="submitButton">
+        </form>
+        <a href="/auth/login" class="noAccount">Already have an account? Sign in</a>
+    </div>
+</div>
+
+
+<style>
+    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
+
+    .container {
+        margin: 0;
+        top: 50px;
+        left: 50%;
+        font-family: 'Source Sans Pro', sans-serif;
+        position: absolute;
+        text-align: center;
+        transform: translateX(-50%);
+        background-color: rgb(33, 41, 66);
+        border-radius: 9px;
+        border-top: 10px solid #79a6fe;
+        border-bottom: 10px solid #8BD17C;
+        width: 400px;
+        height: 600px;
+        box-shadow: 1px 1px 108.8px 19.2px rgb(25, 31, 53);
+    }
+
+    #formTitle {
+        font-family: 'Source Sans Pro', sans-serif;
+        color: #5c6bc0;
+        margin-top: 94px;
+    }
+
+    #formTitle span {
+        color: #dfdeee;
+        font-weight: lighter;
+    }
+
+    .registerForm h5 {
+        font-family: 'Source Sans Pro', sans-serif;
+        font-size: 13px;
+        color: #a1a4ad;
+        letter-spacing: 1.5px;
+        margin-top: -15px;
+        margin-bottom: 70px;
+    }
+
+    .registerForm input[type="text"],
+    .registerForm input[type="password"] {
+        display: block;
+        margin: 20px auto;
+        background: #262e49;
+        border: 0;
+        border-radius: 5px;
+        padding: 14px 10px;
+        width: 320px;
+        outline: none;
+        color: #d6d6d6;
+        -webkit-transition: all .2s ease-out;
+        -moz-transition: all .2s ease-out;
+        -ms-transition: all .2s ease-out;
+        -o-transition: all .2s ease-out;
+        transition: all .2s ease-out;
+    }
+
+    .registerForm input[type="text"]:focus,
+    .registerForm input[type="password"]:focus {
+        border: 1px solid #79A6FE;
+    }
+
+    a {
+        color: #5c7fda;
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    .submitButton {
+        border: 0;
+        background: #7f5feb;
+        color: #dfdeee;
+        border-radius: 100px;
+        width: 340px;
+        height: 49px;
+        font-size: 16px;
+        position: absolute;
+        top: 79%;
+        left: 8%;
+        transition: 0.3s;
+        cursor: pointer;
+    }
+
+    .submitButton:hover {
+        background: #5d33e6;
+    }
+
+    .recoveryPass {
+        position: relative;
+        float: right;
+        right: 28px;
+    }
+
+    .noAccount {
+        position: absolute;
+        top: 92%;
+        left: 24%;
+    }
+
+    .error {
+        text-align: center;
+        width: 337px;
+        height: 20px;
+        padding: 2px;
+        border: 0;
+        border-radius: 5px;
+        margin: 10px auto 10px;
+        position: absolute;
+        top: 31%;
+        left: 7.2%;
+        color: rgb(190, 67, 29);
+    }
+</style>

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

@@ -0,0 +1,21 @@
+<script>
+    import Dashboard from './board/Dashboard.svelte';
+    import SideMenu from './menu/SideMenu.svelte';
+</script>
+
+<div id="wrapper">
+    <SideMenu />
+    <Dashboard />
+</div>
+
+<style>
+    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
+
+    #wrapper {
+        background-color: rgb(23,34,51);
+        display: flex;
+        align-items: stretch;
+        min-height: 100vh;
+        max-height: 100%;
+    }
+</style>

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

@@ -0,0 +1,64 @@
+<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 {incomeData, expenseData, incomeTypes, expenseTypes} from "../stores.js";
+
+    import axios from "axios";
+
+
+    onMount(async () => {
+            const token = getCookie('access_token');
+
+            if (token === '') {
+                    window.location.href = '/auth/login';
+                    return;
+            }
+
+            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);
+            }
+    });
+</script>
+
+<div id="dashboard">
+        <DashHeader />
+        <QuickInfobar />
+        <DataMenu />
+</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>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/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>

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

@@ -0,0 +1,93 @@
+<script>
+	import Chart from 'chart.js/auto';
+	import { onMount } from 'svelte';
+	import { expenseData } from "../../stores.js";
+
+	let ctx;
+	let chartCanvas;
+	let chart = null;
+
+	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 {
+						groupedData.set(category, expense.amount);
+					}
+				}
+		);
+		return groupedData;
+	}
+
+	function createGraph() {
+		try {
+			const groupedExpenseData = groupAndSumByCategory();
+
+			const chartLabels = Array.from(groupedExpenseData.keys());
+			const chartValues = Array.from(groupedExpenseData.values());
+
+			ctx = chartCanvas.getContext('2d');
+
+			if (!chart) {
+				chart = new Chart(ctx, {
+					type: 'bar',
+					data: {
+						labels: chartLabels,
+						datasets: [{
+							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
+					}
+				});
+			} else {
+				chart.data.labels = chartLabels;
+				chart.data.datasets[0].data = chartValues;
+				chart.update();
+			}
+		} catch (error) {
+			console.error('Error:', error);
+		}
+	}
+
+	$: {
+		if ($expenseData) {
+			createGraph();
+		}
+	}
+
+	onMount(() => {
+		createGraph();
+	});
+</script>
+
+<div id="chart">
+	<canvas bind:this={chartCanvas}></canvas>
+</div>
+
+<style>
+	#chart {
+		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+		transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+		flex: 1;
+		border-radius: 10px;
+		margin: 10px;
+		background-color: #d3d3d3;
+	}
+
+	#chart:hover {
+		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+	}
+</style>

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

@@ -0,0 +1,80 @@
+<script>
+	import Chart from 'chart.js/auto';
+	import { onMount } from 'svelte';
+	import { incomeData, expenseData } from "../../stores.js";
+
+	let ctx;
+	let chartCanvas;
+	let chart = null;
+
+	function createGraph() {
+		try {
+			const totalIncomes = $incomeData.reduce((total, item) => total + item.amount, 0);
+			const totalExpenses = $expenseData.reduce((total, item) => total + item.amount, 0);
+
+			const chartLabels = ['Incomes', 'Expenses'];
+			const chartValues = [totalIncomes, totalExpenses];
+
+			ctx = chartCanvas.getContext('2d');
+			if (!chart) {
+			chart = new Chart(ctx, {
+				type: 'pie',
+				data: {
+					labels: chartLabels,
+					datasets: [{
+						data: chartValues,
+						backgroundColor: [
+							'rgb(243, 188, 0)',
+							'rgb(0, 117, 164)'
+						],
+					}]
+				},
+				options: {
+					responsive: true,
+					maintainAspectRatio: false
+				}
+			});
+			} else {
+				const totalIncomesUpd = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
+				const totalExpensesUpd = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
+
+				const chartLabels = ['Incomes', 'Expenses'];
+				const chartValues = [totalIncomesUpd, totalExpensesUpd];
+				chart.data.labels = chartLabels;
+				chart.data.datasets[0].data = chartValues;
+				chart.update();
+			}
+		} catch (error) {
+			console.error('Error:', error);
+		}
+	}
+
+	$: {
+		if ($incomeData || $expenseData) {
+			createGraph();
+		}
+	}
+
+	onMount(() => {
+		createGraph();
+	});
+</script>
+
+<div id="chart">
+	<canvas bind:this={chartCanvas}></canvas>
+</div>
+
+<style>
+	#chart {
+		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+		transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+		flex: 1;
+		border-radius: 10px;
+		margin: 10px;
+		background-color: #d3d3d3;
+	}
+
+	#chart:hover {
+		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+	}
+</style>

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

@@ -0,0 +1,76 @@
+<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>

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

@@ -0,0 +1,75 @@
+<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>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/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>

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/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>

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

@@ -0,0 +1,57 @@
+<script>
+    export let showModal;
+
+    let dialog;
+
+    $: if (dialog && showModal) dialog.showModal();
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+        bind:this={dialog}
+        on:close={() => (showModal = false)}
+        on:click|self={() => dialog.close()}
+>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div on:click|stopPropagation>
+        <slot name="header" />
+        <slot />
+    </div>
+</dialog>
+
+<style>
+    dialog {
+        max-width: 32em;
+        border-radius: 20px;
+        border: none;
+        padding: 0;
+    }
+    dialog::backdrop {
+        background: rgba(0, 0, 0, 0.3);
+    }
+    dialog > div {
+        padding: 1em;
+    }
+    dialog[open] {
+        animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
+    @keyframes zoom {
+        from {
+            transform: scale(0.95);
+        }
+        to {
+            transform: scale(1);
+        }
+    }
+    dialog[open]::backdrop {
+        animation: fade 0.2s ease-out;
+    }
+    @keyframes fade {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+</style>

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

@@ -0,0 +1,66 @@
+<script>
+
+</script>
+
+<div id="header">
+    <div id="dashboardTitleWrapper">
+        <h5>Hello, welcome to your</h5>
+        <h1 id="dashboardTitle">Dashboard</h1>
+    </div>
+
+    <div id="icons">
+        <div class="headerbtn searchButton">
+            <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 512 512"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+        </div>
+        <div class="headerbtn notificationButton">
+            <svg xmlns="http://www.w3.org/2000/svg" height="1.3em" viewBox="0 0 448 512"><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
+        </div>
+    </div>
+</div>
+
+<style>
+    
+    #header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    #dashboardTitleWrapper {
+        display: flex;
+        flex-direction: column;
+        margin:20px;
+        margin-bottom: 0px;
+    }
+
+    #dashboardTitleWrapper h5 {
+        margin: 0;
+    }
+
+    #dashboardTitleWrapper h1 {
+        margin-top: 0;
+    }
+
+    #icons {
+        display: flex;
+        margin-right:20px;
+    }
+
+    .headerbtn {
+        width: 70px;
+        height: 70px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .headerbtn:hover::before {
+        content: "";
+        width: 40px;
+        height: 40px;
+        background-color: rgb(100, 100, 100, 0.25); 
+        border-radius: 50%;
+        position: absolute;
+    }
+</style>

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

@@ -0,0 +1,64 @@
+<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>

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

@@ -0,0 +1,71 @@
+<script>
+    import { onMount } from 'svelte';
+    import { incomeData, expenseData } from "../../stores.js";
+
+    let infobar1, infobar2, infobar3, infobar4;
+    let totalExpenses = 0;
+    let totalIncomes = 0;
+    let lastMonthIncome = 800; // Dummy last month's income
+    let lastMonthExpense = 200; // Dummy last month's expense
+
+    function updateInfo() {
+        totalExpenses = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
+        totalIncomes = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
+
+        const incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
+        const expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
+
+        try {
+            infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: 150%">${totalExpenses.toFixed(2)}$</span>`;
+            infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: 150%">${totalIncomes.toFixed(2)}$</span>`;
+
+            infobar3.innerHTML = `<span style="font-size: larger">Income by last month:</span><br><span style="color:blue;font-size: 150%">${incomeDifference.toFixed(2)}%</span>`;
+            infobar4.innerHTML = `<span style="font-size: larger">Expense by last month:</span><br><span style="color:orange;font-size: 150%">${expenseDifference.toFixed(2)}%</span>`;
+        } catch {
+            console.log("not yet loaded");
+        }
+    }
+
+    $: {
+        if ($incomeData || $expenseData) {
+            updateInfo();
+        }
+    }
+
+    onMount(() => {
+        updateInfo();
+    });
+</script>
+
+<div id="quickInfobar">
+    <div class="infobarElement" bind:this={infobar1}></div>
+    <div class="infobarElement" bind:this={infobar2}></div>
+    <div class="infobarElement" bind:this={infobar3}></div>
+    <div class="infobarElement" bind:this={infobar4}></div>
+</div>
+
+<style>
+    #quickInfobar {
+        display: flex;
+        justify-content: space-between;
+        margin: 20px;
+    }
+
+    .infobarElement {
+        margin: 10px;
+        width: 200px;
+        min-width: 100px;
+        height: 100px;
+        color: white;
+        padding: 10px;
+        border-radius: 10px;
+        background-color: #212942;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
+        overflow: hidden;
+    }
+
+    .infobarElement:hover {
+        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    }
+</style>

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

@@ -0,0 +1,150 @@
+<script>
+    import { onMount } from 'svelte';
+    import axios from 'axios';
+    import {deleteCookie, getCookie} from "svelte-cookie";
+
+    let username;
+
+    onMount(async () => {
+        const token = getCookie('access_token');
+
+        const config = {
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        };
+
+        try {
+            const response = await axios.get('http://localhost:8081/users/getUserData', config);
+            const data = response.data;
+            username = data.username;
+            console.log(username)
+
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    });
+
+</script>
+
+<div id="sideMenu">
+    <div id="iconSpace">
+        <div id="icon">
+            <img id="iconImg" src='./../../../src/lib/images/adidas.png' alt="icon"/>
+        </div>
+    </div>
+    
+    <div id="menuSpace">
+        <div class="sideMenuItem">
+            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 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="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
+            <span class="sideMenuItemText">Profile</span>
+        </div>
+
+        <div 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">
+            <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>
+
+        <div 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">General</span>
+        </div>
+
+        <div class="sideMenuItem">
+            <svg class="svgimg" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 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="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>
+            <span class="sideMenuItemText">Settings</span>
+        </div>
+    </div>
+
+    <div id="profileSpace">
+        <div id="profileInfo">Hello, {username}</div>
+        <div id="logout" role="button"
+        tabindex="0"
+        on:click={() => {
+        deleteCookie('access_token');
+        deleteCookie('refresh_token');
+        window.location.href = '/auth/login';
+    }}
+        on:keydown={e => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            deleteCookie('access_token');
+            deleteCookie('refresh_token');
+            window.location.href = '/auth/login';
+        }
+    }}>
+        Log out
+        </div>
+
+    </div>
+</div>
+
+<style>
+    #sideMenu {
+        font-family: 'Source Sans Pro', sans-serif;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-width: 150px;
+        max-width: 200px;
+        margin-left: 20px;
+    }
+
+    #iconSpace {
+        margin-top:20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .sideMenuItem {
+        min-height: 50px;
+        color:white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 20px;
+    }
+
+    .sideMenuItem:hover {
+        background-color: rgb(45, 60, 90);
+    }
+
+    .sideMenuItemText {
+        padding:10px;
+    }
+
+    .svgimg {
+        fill:white;
+    }
+
+    #iconImg {
+        max-width: 150px;
+    }
+
+    #profileSpace {
+        margin-bottom: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: white;
+        font-weight: 900;
+        font-size: larger;
+    }
+
+    #logout {
+        background: none;
+        cursor: pointer;
+        border-radius: 10px;
+        transition: background 0.3s ease;
+        padding: 5px;
+    }
+
+    #logout:hover {
+        background: rgba(128, 128, 128, 0.5);
+    }
+</style>

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

@@ -0,0 +1,9 @@
+import {writable} from "svelte/store";
+
+export const incomeData = writable([]);
+
+export const expenseData = writable([]);
+
+export const incomeTypes = writable([]);
+
+export const expenseTypes = writable([]);

src/main/java/com/faf223/expensetrackerfaf/web/static/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/main/java/com/faf223/expensetrackerfaf/web/svelte.config.js

@@ -0,0 +1,13 @@
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

src/main/java/com/faf223/expensetrackerfaf/web/vite.config.js

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});