Merge branch 'master' of https://github.com/lumijiez/ExpenseTrackerFAF into front-v3

Testing branch

.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. 

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "ExpenseTrackerFAF",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

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,13 +69,18 @@
             <version>0.11.5</version>
         </dependency>
         <dependency>
-            <groupId>org.projectlombok</groupId>
-            <artifactId>lombok</artifactId>
-            <version>1.18.20</version>
-            <scope>provided</scope>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-validation</artifactId>
+        </dependency>
+        <!-- https://mvnrepository.com/artifact/org.springframework.security/spring-security-web -->
+        <dependency>
+            <groupId>org.springframework.security</groupId>
+            <artifactId>spring-security-web</artifactId>
+            <version>6.1.5</version>
         </dependency>
     </dependencies>
     <build>
+        <defaultGoal>package</defaultGoal>
         <plugins>
             <plugin>
                 <groupId>org.springframework.boot</groupId>

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

@@ -6,6 +6,7 @@ import com.faf223.expensetrackerfaf.security.PersonDetails;
 import lombok.RequiredArgsConstructor;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.context.annotation.Primary;
 import org.springframework.security.authentication.AuthenticationManager;
 import org.springframework.security.authentication.AuthenticationProvider;
 import org.springframework.security.authentication.dao.DaoAuthenticationProvider;
@@ -19,12 +20,11 @@ import org.springframework.security.crypto.password.PasswordEncoder;
 @RequiredArgsConstructor
 public class ApplicationConfig {
 
-    private final UserRepository userRepository;
     private final CredentialRepository credentialRepository;
 
     @Bean
     public UserDetailsService userDetailsService() {
-        return username -> new PersonDetails(credentialRepository.findByEmail(username).orElseThrow((() -> new UsernameNotFoundException("User not found"))));
+        return username -> new PersonDetails(credentialRepository.findByEmail(username).orElseThrow(() -> new UsernameNotFoundException("User not found")));
     }
 
     @Bean
@@ -44,4 +44,10 @@ public class ApplicationConfig {
     public PasswordEncoder passwordEncoder() {
         return new BCryptPasswordEncoder();
     }
+    @Bean
+    @Primary
+    public JwtAuthenticationFilter customJwtAuthenticationFilter(JwtService jwtService, UserDetailsService userDetailsService) {
+        return new JwtAuthenticationFilter(jwtService, userDetailsService);
+    }
+
 }

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

@@ -1,5 +1,8 @@
 package com.faf223.expensetrackerfaf.config;
 
+import com.faf223.expensetrackerfaf.util.errors.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,22 +37,37 @@ 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) {
-            UserDetails userDetails = this.userDetailsService.loadUserByUsername(userEmail);
-            if (jwtService.isTokenValid(jwt, userDetails)) {
-                UsernamePasswordAuthenticationToken authToken = new UsernamePasswordAuthenticationToken(
-                        userDetails, null, userDetails.getAuthorities());
-                authToken.setDetails(new WebAuthenticationDetailsSource()
-                        .buildDetails(request));
-                SecurityContextHolder.getContext().setAuthentication(authToken);
+
+        try {
+            userEmail = jwtService.extractUsername(jwt);
+            if (userEmail != null && SecurityContextHolder.getContext().getAuthentication() == null) {
+                UserDetails userDetails = this.userDetailsService.loadUserByUsername(userEmail);
+                if (jwtService.isTokenValid(jwt, userDetails)) {
+                    UsernamePasswordAuthenticationToken authToken = new UsernamePasswordAuthenticationToken(
+                            userDetails, null, userDetails.getAuthorities());
+                    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("Your session has expired. Refresh your token.");
+            ObjectMapper objectMapper = new ObjectMapper();
+            response.getWriter().write(objectMapper.writeValueAsString(errorResponse));
+
+
+            response.getWriter().flush();
+            return;
         }
         filterChain.doFilter(request, response);
     }

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

@@ -5,6 +5,7 @@ import io.jsonwebtoken.Jwts;
 import io.jsonwebtoken.SignatureAlgorithm;
 import io.jsonwebtoken.io.Decoders;
 import io.jsonwebtoken.security.Keys;
+import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.stereotype.Service;
@@ -16,6 +17,7 @@ import java.util.Map;
 import java.util.function.Function;
 
 @Service
+@RequiredArgsConstructor
 public class JwtService {
 
     @Value("${application.security.jwt.secret-key}")
@@ -25,6 +27,7 @@ public class JwtService {
     @Value("${application.security.jwt.refresh-token.expiration}")
     private long refreshExpiration;
 
+
     public String extractUsername(String token) {
         return extractClaim(token, Claims::getSubject);
     }
@@ -38,6 +41,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 +52,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,37 +1,77 @@
 package com.faf223.expensetrackerfaf.config;
 
-import lombok.RequiredArgsConstructor;
+import com.faf223.expensetrackerfaf.controller.auth.JwtAuthenticationSuccessHandler;
 import org.springframework.context.annotation.Bean;
 import org.springframework.context.annotation.Configuration;
+import org.springframework.http.HttpStatus;
 import org.springframework.security.authentication.AuthenticationProvider;
-import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
+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.ClientRegistrationRepository;
+import org.springframework.security.web.AuthenticationEntryPoint;
 import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.security.web.authentication.HttpStatusEntryPoint;
 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;
     private final AuthenticationProvider authenticationProvider;
 
+    public SecurityConfiguration(JwtAuthenticationFilter jwtAuthFilter,
+                                 AuthenticationProvider authenticationProvider) {
+        this.jwtAuthFilter = jwtAuthFilter;
+        this.authenticationProvider = authenticationProvider;
+    }
+
     @Bean
     public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
         http
-                .csrf(csrf -> csrf.disable())
+                .cors(withDefaults())
+                .csrf(AbstractHttpConfigurer::disable)
                 .authorizeHttpRequests(auth -> auth
-                        .requestMatchers("/api/v1/auth/**").permitAll()
+                        .requestMatchers("/api/v1/auth/*").permitAll()
                         .anyRequest().authenticated()
                 )
+                //.oauth2Login(withDefaults())
                 .sessionManagement(session -> session.sessionCreationPolicy(SessionCreationPolicy.STATELESS))
                 .authenticationProvider(authenticationProvider)
-                .addFilterBefore(jwtAuthFilter, UsernamePasswordAuthenticationFilter.class); // will be executed before UsernamePasswordAuthenticationFilter
+                .addFilterBefore(jwtAuthFilter, UsernamePasswordAuthenticationFilter.class);
 
         return http.build();
     }
+
+    @Bean
+    public JwtAuthenticationSuccessHandler jwtAuthenticationSuccessHandler() {
+        return new JwtAuthenticationSuccessHandler();
+    }
+    @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;
+    }
+
+    @Bean
+    public AuthenticationEntryPoint authenticationEntryPoint() {
+        return new HttpStatusEntryPoint(HttpStatus.UNAUTHORIZED);
+    }
 }

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

@@ -4,14 +4,31 @@ 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 com.faf223.expensetrackerfaf.util.errors.ErrorResponse;
+import com.faf223.expensetrackerfaf.util.exceptions.TransactionDoesNotBelongToTheUserException;
+import com.faf223.expensetrackerfaf.util.exceptions.TransactionNotCreatedException;
+import com.faf223.expensetrackerfaf.util.exceptions.TransactionNotUpdatedException;
+import com.faf223.expensetrackerfaf.util.exceptions.TransactionsNotFoundException;
+import jakarta.validation.Valid;
 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.transaction.annotation.Transactional;
 import org.springframework.validation.BindingResult;
 import org.springframework.web.bind.annotation.*;
 
-import java.util.List;
+import java.time.LocalDate;
+import java.time.Month;
+import java.util.*;
 import java.util.stream.Collectors;
 
 @RestController
@@ -20,45 +37,112 @@ 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();
+        else throw new TransactionsNotFoundException("Transactions not found");
     }
 
     @PostMapping()
-    public ResponseEntity<ExpenseDTO> createNewExpense(@RequestBody ExpenseCreationDTO expenseDTO,
+    public ResponseEntity<Map<String, Long>> createNewExpense(@RequestBody @Valid ExpenseCreationDTO expenseDTO,
                                                        BindingResult bindingResult) {
+        if(bindingResult.hasErrors())
+            throw new TransactionNotCreatedException("Could not create new expense");
+
         Expense expense = expenseMapper.toExpense(expenseDTO);
-        if (!bindingResult.hasErrors()) {
-            expenseService.createOrUpdateExpense(expense);
-            return ResponseEntity.ok(expenseMapper.toDto(expense));
-        } else {
-            return ResponseEntity.notFound().build();
+
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
+
+            String email = userDetails.getUsername();
+            User user = userService.getUserByEmail(email);
+            expense.setUser(user);
+
+            expenseService.createOrUpdate(expense);
+            Map<String, Long> response = new HashMap<>();
+            response.put("expenseId", expense.getId());
+            return ResponseEntity.status(HttpStatus.CREATED).body(response);
         }
+
+        throw new TransactionNotCreatedException("Could not create new expense");
     }
 
-    @PatchMapping()
-    public ResponseEntity<ExpenseDTO> updateExpense(@RequestBody ExpenseCreationDTO expenseDTO,
+    @PatchMapping("/update/{id}")
+    public ResponseEntity<Void> updateExpense(@PathVariable long id, @RequestBody @Valid ExpenseCreationDTO expenseDTO,
                                                     BindingResult bindingResult) {
-        Expense expense = expenseMapper.toExpense(expenseDTO);
-        if (!bindingResult.hasErrors()) {
-            expenseService.createOrUpdateExpense(expense);
-            return ResponseEntity.ok(expenseMapper.toDto(expense));
-        } else {
-            return ResponseEntity.notFound().build();
-        }
+        if(bindingResult.hasErrors())
+            throw new TransactionNotUpdatedException(ErrorResponse.from(bindingResult).getMessage());
+
+        Expense expense = expenseService.getTransactionById(id);
+
+        if(expense == null)
+            throw new TransactionsNotFoundException("The expense has not been found");
+
+        if(!expenseService.belongsToUser(expense))
+            throw new TransactionDoesNotBelongToTheUserException("The transaction does not belong to you");
+
+        ExpenseCategory category = expenseCategoryService.getCategoryById(expenseDTO.getExpenseCategory());
+        expense.setCategory(category);
+        expense.setAmount(expenseDTO.getAmount());
+
+        expenseService.createOrUpdate(expense);
+        return ResponseEntity.status(HttpStatus.CREATED).build();
     }
 
-    @GetMapping("/{userUuid}")
-    public ResponseEntity<List<ExpenseDTO>> getExpensesByUser(@PathVariable String userUuid) {
-        List<ExpenseDTO> expenses = expenseService.getExpensesByUserId(userUuid).stream().map(expenseMapper::toDto).collect(Collectors.toList());
-        if (!expenses.isEmpty()) return ResponseEntity.ok(expenses);
-        else return ResponseEntity.notFound().build();
+    @GetMapping("/personal-expenses")
+    @Transactional(readOnly = true)
+    public ResponseEntity<List<ExpenseDTO>> getExpensesByUser(@RequestParam Optional<LocalDate> date,
+                                                              @RequestParam Optional<Integer> month,
+                                                              @RequestParam Optional<Integer> startYear,
+                                                              @RequestParam Optional<Integer> endYear,
+                                                              @RequestParam Optional<String> lastUnit) {
+
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
+
+            String email = userDetails.getUsername();
+            List<ExpenseDTO> expenses = Collections.emptyList();
+
+            if(date.isPresent())
+                expenses = expenseService.getTransactionsByDate(date.get(), email).stream().map(expenseMapper::toDto).toList();
+            else if(month.isPresent())
+                expenses = expenseService.getTransactionsByMonth(Month.of(month.get()), email).stream().map(expenseMapper::toDto).toList();
+            else if(startYear.isPresent() && endYear.isPresent())
+                expenses = expenseService.getYearIntervalTransactions(email, startYear.get(), endYear.get()).stream().map(expenseMapper::toDto).toList();
+            else if(lastUnit.isPresent()) {
+
+                if(lastUnit.get().equalsIgnoreCase("week"))
+                    expenses = expenseService.getLastWeekTransactions(email).stream().map(expenseMapper::toDto).toList();
+                else if(lastUnit.get().equalsIgnoreCase("month"))
+                    expenses = expenseService.getLastMonthTransactions(email).stream().map(expenseMapper::toDto).toList();
+
+            } else {
+                expenses = userService.getUserByEmail(email).getExpenses().stream().map(expenseMapper::toDto).toList();
+            }
+
+            return ResponseEntity.ok(expenses);
+        }
+
+        throw new TransactionsNotFoundException("The expenses have not been found");
+    }
+
+    @GetMapping("/categories")
+    public ResponseEntity<List<ExpenseCategory>> getAllCategories() {
+        List<ExpenseCategory> categories = expenseCategoryService.getAllCategories();
+        if (!categories.isEmpty()) return ResponseEntity.ok(categories);
+        else throw new TransactionsNotFoundException("The expenses have not been found");
+    }
+
+    @DeleteMapping("/delete/{id}")
+    public void deleteCategory(@PathVariable long id) {
+        expenseService.deleteTransactionById(id);
     }
 }
-

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

@@ -0,0 +1,83 @@
+package com.faf223.expensetrackerfaf.controller;
+
+import com.faf223.expensetrackerfaf.util.errors.ErrorResponse;
+import com.faf223.expensetrackerfaf.util.exceptions.*;
+import org.springframework.http.HttpStatus;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.ControllerAdvice;
+import org.springframework.web.bind.annotation.ExceptionHandler;
+
+@ControllerAdvice
+public class GlobalExceptionHandler {
+
+    @ExceptionHandler
+    private ResponseEntity<ErrorResponse> handleDoesNotBelongException(TransactionDoesNotBelongToTheUserException e) {
+        ErrorResponse response = new ErrorResponse(
+                e.getMessage(),
+                System.currentTimeMillis()
+        );
+
+        return new ResponseEntity<>(response, HttpStatus.FORBIDDEN);
+    }
+
+    @ExceptionHandler
+    private ResponseEntity<ErrorResponse> handleTransactionNotCreatedException(TransactionNotCreatedException e) {
+        ErrorResponse response = new ErrorResponse(
+                e.getMessage(),
+                System.currentTimeMillis()
+        );
+
+        return new ResponseEntity<>(response, HttpStatus.NOT_MODIFIED);
+    }
+
+    @ExceptionHandler
+    private ResponseEntity<ErrorResponse> handleTransactionsNotFoundException(TransactionsNotFoundException e) {
+        ErrorResponse response = new ErrorResponse(
+                e.getMessage(),
+                System.currentTimeMillis()
+        );
+
+        return new ResponseEntity<>(response, HttpStatus.NOT_FOUND);
+    }
+
+    @ExceptionHandler
+    private ResponseEntity<ErrorResponse> handleUserNotFoundException(UserNotFoundException e) {
+        ErrorResponse response = new ErrorResponse(
+                e.getMessage(),
+                System.currentTimeMillis()
+        );
+
+        return new ResponseEntity<>(response, HttpStatus.NOT_FOUND);
+    }
+
+    @ExceptionHandler
+    private ResponseEntity<ErrorResponse> handleTransactionNotUpdatedException(TransactionNotUpdatedException e) {
+        ErrorResponse response = new ErrorResponse(
+                e.getMessage(),
+                System.currentTimeMillis()
+        );
+
+        return new ResponseEntity<>(response, HttpStatus.NOT_MODIFIED);
+    }
+
+    @ExceptionHandler
+    private ResponseEntity<ErrorResponse> handleUserNotAuthenticatedException(UserNotAuthenticatedException e) {
+        ErrorResponse response = new ErrorResponse(
+                e.getMessage(),
+                System.currentTimeMillis()
+        );
+
+        return new ResponseEntity<>(response, HttpStatus.FORBIDDEN);
+    }
+
+    @ExceptionHandler
+    private ResponseEntity<ErrorResponse> handleUserNotCreatedException(UserNotCreatedException e) {
+        ErrorResponse response = new ErrorResponse(
+                e.getMessage(),
+                System.currentTimeMillis()
+        );
+
+        return new ResponseEntity<>(response, HttpStatus.NOT_MODIFIED);
+    }
+
+}

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

@@ -4,14 +4,31 @@ 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.IncomeCategory;
+import com.faf223.expensetrackerfaf.model.User;
+import com.faf223.expensetrackerfaf.service.IncomeCategoryService;
 import com.faf223.expensetrackerfaf.service.IncomeService;
+import com.faf223.expensetrackerfaf.service.UserService;
+import com.faf223.expensetrackerfaf.util.errors.ErrorResponse;
+import com.faf223.expensetrackerfaf.util.exceptions.TransactionDoesNotBelongToTheUserException;
+import com.faf223.expensetrackerfaf.util.exceptions.TransactionNotCreatedException;
+import com.faf223.expensetrackerfaf.util.exceptions.TransactionNotUpdatedException;
+import com.faf223.expensetrackerfaf.util.exceptions.TransactionsNotFoundException;
+import jakarta.validation.Valid;
 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.transaction.annotation.Transactional;
 import org.springframework.validation.BindingResult;
 import org.springframework.web.bind.annotation.*;
 
-import java.util.List;
+import java.time.LocalDate;
+import java.time.Month;
+import java.util.*;
 import java.util.stream.Collectors;
 
 @RestController
@@ -20,45 +37,112 @@ 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();
+        else throw new TransactionsNotFoundException("Transactions not found");
     }
 
     @PostMapping()
-    public ResponseEntity<IncomeDTO> createNewIncome(@RequestBody IncomeCreationDTO incomeDTO,
+    public ResponseEntity<Map<String, Long>> createNewIncome(@RequestBody @Valid IncomeCreationDTO incomeDTO,
                                                      BindingResult bindingResult) {
+        if(bindingResult.hasErrors())
+            throw new TransactionNotCreatedException(ErrorResponse.from(bindingResult).getMessage());
+
         Income income = incomeMapper.toIncome(incomeDTO);
-        if (!bindingResult.hasErrors()) {
-            incomeService.createOrUpdateIncome(income);
-            return ResponseEntity.ok(incomeMapper.toDto(income));
-        } else {
-            return ResponseEntity.notFound().build();
+
+        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);
+
+            incomeService.createOrUpdate(income);
+            Map<String, Long> response = new HashMap<>();
+            response.put("incomeId", income.getId());
+            return ResponseEntity.status(HttpStatus.CREATED).body(response);
         }
+
+        throw new TransactionNotCreatedException("Could not create new income");
     }
 
-    @PatchMapping()
-    public ResponseEntity<IncomeDTO> updateIncome(@RequestBody IncomeCreationDTO incomeDTO,
-                                                  BindingResult bindingResult) {
-        Income income = incomeMapper.toIncome(incomeDTO);
-        if (!bindingResult.hasErrors()) {
-            incomeService.createOrUpdateIncome(income);
-            return ResponseEntity.ok(incomeMapper.toDto(income));
-        } else {
-            return ResponseEntity.notFound().build();
-        }
+    @PatchMapping("/update/{id}")
+    public ResponseEntity<Void> updateIncome(@PathVariable long id, @RequestBody @Valid IncomeCreationDTO incomeDTO,
+                                                    BindingResult bindingResult) {
+        if(bindingResult.hasErrors())
+            throw new TransactionNotUpdatedException(ErrorResponse.from(bindingResult).getMessage());
+
+        Income income = incomeService.getTransactionById(id);
+
+        if(income == null)
+            throw new TransactionsNotFoundException("The income has not been found");
+
+        if(!incomeService.belongsToUser(income))
+            throw new TransactionDoesNotBelongToTheUserException("The transaction does not belong to you");
+
+        IncomeCategory category = incomeCategoryService.getCategoryById(incomeDTO.getIncomeCategory());
+        income.setCategory(category);
+        income.setAmount(incomeDTO.getAmount());
+
+        incomeService.createOrUpdate(income);
+        return ResponseEntity.status(HttpStatus.CREATED).build();
     }
 
-    @GetMapping("/{userUuid}")
-    public ResponseEntity<List<IncomeDTO>> getIncomesByUser(@PathVariable String userUuid) {
-        List<IncomeDTO> incomes = incomeService.getIncomesByUserId(userUuid).stream().map(incomeMapper::toDto).collect(Collectors.toList());
-        if (!incomes.isEmpty()) return ResponseEntity.ok(incomes);
-        else return ResponseEntity.notFound().build();
+    @GetMapping("/personal-incomes")
+    @Transactional(readOnly = true)
+    public ResponseEntity<List<IncomeDTO>> getIncomesByUser(@RequestParam Optional<LocalDate> date,
+                                                             @RequestParam Optional<Integer> month,
+                                                             @RequestParam Optional<Integer> startYear,
+                                                             @RequestParam Optional<Integer> endYear,
+                                                             @RequestParam Optional<String> lastUnit) {
+
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
+
+            String email = userDetails.getUsername();
+            List<IncomeDTO> incomes = Collections.emptyList();
+
+            if(date.isPresent())
+                incomes = incomeService.getTransactionsByDate(date.get(), email).stream().map(incomeMapper::toDto).toList();
+            else if(month.isPresent())
+                incomes = incomeService.getTransactionsByMonth(Month.of(month.get()), email).stream().map(incomeMapper::toDto).toList();
+            else if(startYear.isPresent() && endYear.isPresent())
+                incomes = incomeService.getYearIntervalTransactions(email, startYear.get(), endYear.get()).stream().map(incomeMapper::toDto).toList();
+            else if(lastUnit.isPresent()) {
+
+                if(lastUnit.get().equalsIgnoreCase("week"))
+                    incomes = incomeService.getLastWeekTransactions(email).stream().map(incomeMapper::toDto).toList();
+                else if(lastUnit.get().equalsIgnoreCase("month"))
+                    incomes = incomeService.getLastMonthTransactions(email).stream().map(incomeMapper::toDto).toList();
+
+            } else {
+                incomes = userService.getUserByEmail(email).getIncomes().stream().map(incomeMapper::toDto).toList();
+            }
+
+            return ResponseEntity.ok(incomes);
+        }
+
+        throw new TransactionsNotFoundException("The expenses have not been found");
+    }
+
+    @GetMapping("/categories")
+    public ResponseEntity<List<IncomeCategory>> getAllCategories() {
+        List<IncomeCategory> categories = incomeCategoryService.getAllCategories();
+        if (!categories.isEmpty()) return ResponseEntity.ok(categories);
+        else throw new TransactionsNotFoundException("The expenses have not been found");
+    }
+
+    @DeleteMapping("/delete/{id}")
+    public void deleteIncome(@PathVariable long id) {
+        incomeService.deleteTransactionById(id);
     }
 }
-

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

@@ -1,17 +1,34 @@
 package com.faf223.expensetrackerfaf.controller;
 
+import com.faf223.expensetrackerfaf.controller.auth.AuthenticationResponse;
+import com.faf223.expensetrackerfaf.controller.auth.ChangePasswordRequest;
 import com.faf223.expensetrackerfaf.dto.UserCreationDTO;
 import com.faf223.expensetrackerfaf.dto.UserDTO;
+import com.faf223.expensetrackerfaf.dto.UserUpdateDTO;
 import com.faf223.expensetrackerfaf.dto.mappers.UserMapper;
+import com.faf223.expensetrackerfaf.model.Credential;
 import com.faf223.expensetrackerfaf.model.User;
+import com.faf223.expensetrackerfaf.repository.CredentialRepository;
+import com.faf223.expensetrackerfaf.service.AuthenticationService;
 import com.faf223.expensetrackerfaf.service.UserService;
+import com.faf223.expensetrackerfaf.util.errors.ErrorResponse;
+import com.faf223.expensetrackerfaf.util.exceptions.UserNotCreatedException;
+import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
+import jakarta.validation.Valid;
 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.*;
 
 import java.util.ArrayList;
+import java.util.HashMap;
+import java.util.Map;
+import java.util.Optional;
 
 @RestController
 @RequestMapping("/users")
@@ -20,32 +37,109 @@ public class UserController {
 
     private final UserService userService;
     private final UserMapper userMapper;
+    private final CredentialRepository credentialRepository;
+    private final AuthenticationService authenticationService;
 
     @PatchMapping()
-    public ResponseEntity<UserDTO> updateUser(@RequestBody UserCreationDTO userDTO,
+    public ResponseEntity<UserDTO> updateUser(@RequestBody @Valid UserCreationDTO userDTO,
                                               BindingResult bindingResult) {
+        if (bindingResult.hasErrors())
+            throw new UserNotCreatedException(ErrorResponse.from(bindingResult).getMessage());
+
         User user = userMapper.toUser(userDTO);
+
         if (!bindingResult.hasErrors()) {
+
             userService.updateUser(user);
             return ResponseEntity.ok(userMapper.toDto(user));
+
         } else {
-            return ResponseEntity.notFound().build();
+            throw new UserNotFoundException("The user has not been found");
         }
     }
 
-    @GetMapping("/{userUuid}")
-    public ResponseEntity<UserDTO> getUser(@PathVariable String userUuid) {
-        User user = userService.getUserById(userUuid);
-        if (user != null) return ResponseEntity.ok(userMapper.toDto(user));
-        else return ResponseEntity.notFound().build();
+    @PatchMapping("/update-password")
+    public ResponseEntity<Void> updateUserPassword(@RequestBody ChangePasswordRequest password) {
+
+        authenticationService.updatePassword(password.getPassword());
+        return ResponseEntity.status(HttpStatus.OK).build();
+    }
+
+    @PatchMapping("/update-user-data")
+    public ResponseEntity<AuthenticationResponse> updateUserData(@RequestBody UserUpdateDTO userUpdateDTO) {
+
+        return ResponseEntity.ok(userService.updateUser(userUpdateDTO));
+    }
+
+    @GetMapping("/get-user-data")
+    public ResponseEntity<Map<String, String>> getUser() {
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
+            User user = userService.getUserByEmail(userDetails.getUsername());
+            Optional<Credential> credential = credentialRepository.findByUser(user);
+
+            if (credential.isPresent()) {
+                Map<String, String> userData = new HashMap<>();
+                userData.put("firstname", user.getFirstName());
+                userData.put("lastname", user.getLastName());
+                userData.put("username", user.getUsername());
+                userData.put("email", credential.get().getEmail());
+                userData.put("userrole", credential.get().getRole().toString());
+
+                return ResponseEntity.ok(userData);
+            }
+        }
+        throw new UserNotFoundException("The user has not been found");
     }
 
     @GetMapping()
     @PreAuthorize("hasRole('ADMIN')")
-    public ResponseEntity<ArrayList<UserDTO>> getAllUsers() {
+    public ResponseEntity<ArrayList<Map<String, String>>> getAllUsers() {
         ArrayList<User> users = new ArrayList<>(userService.getUsers());
 
-        return ResponseEntity.ok(userMapper.toDto(users));
+        ArrayList<Map<String, String>> mappedUsers = new ArrayList<>();
+
+        for (User u: users) {
+            Map<String, String> userData = new HashMap<>();
+            userData.put("firstname", u.getFirstName());
+            userData.put("lastname", u.getLastName());
+            userData.put("username", u.getUsername());
+            Optional<Credential> credential = credentialRepository.findByUser(u);
+            if (credential.isEmpty()) continue;
+            userData.put("email", credential.get().getEmail());
+            userData.put("userrole", credential.get().getRole().toString());
+            mappedUsers.add(userData);
+        }
+
+
+        return ResponseEntity.ok(mappedUsers);
+    }
+
+    @GetMapping("/delete/{username}")
+    @PreAuthorize("hasRole('ADMIN')")
+    public ResponseEntity<Void> deleteUserByUsername(@PathVariable String username) {
+
+        userService.deleteByUsername(username);
+
+        return ResponseEntity.status(HttpStatus.OK).build();
+    }
+
+    @GetMapping("/promote/{email}")
+    @PreAuthorize("hasRole('ADMIN')")
+    public ResponseEntity<Void> promoteUser(@PathVariable String email) {
+
+        userService.promoteUser(email);
+
+        return ResponseEntity.status(HttpStatus.OK).build();
+    }
+
+    @GetMapping("/demote/{email}")
+    @PreAuthorize("hasRole('ADMIN')")
+    public ResponseEntity<Void> demoteUser(@PathVariable String email) {
+
+        userService.demoteUser(email);
+
+        return ResponseEntity.status(HttpStatus.OK).build();
     }
 }
-

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/ChangePasswordRequest.java

@@ -0,0 +1,14 @@
+package com.faf223.expensetrackerfaf.controller.auth;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
+
+@Data
+@Builder
+@AllArgsConstructor
+@NoArgsConstructor
+public class ChangePasswordRequest {
+    private String password;
+}

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

@@ -0,0 +1,19 @@
+package com.faf223.expensetrackerfaf.controller.auth;
+import jakarta.servlet.ServletException;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.web.authentication.AuthenticationSuccessHandler;
+import org.springframework.security.web.authentication.SimpleUrlAuthenticationSuccessHandler;
+
+import java.io.IOException;
+
+public class JwtAuthenticationSuccessHandler extends SimpleUrlAuthenticationSuccessHandler implements AuthenticationSuccessHandler {
+
+    @Override
+    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException, ServletException {
+
+        super.onAuthenticationSuccess(request, response, authentication);
+    }
+}
+

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

@@ -0,0 +1,24 @@
+package com.faf223.expensetrackerfaf.controller.auth;
+
+import com.faf223.expensetrackerfaf.service.AuthenticationService;
+import lombok.RequiredArgsConstructor;
+import org.springframework.security.core.annotation.AuthenticationPrincipal;
+import org.springframework.security.oauth2.core.user.OAuth2User;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+@RequiredArgsConstructor
+public class OAuth2SuccessController {
+
+    private final AuthenticationService jwtService;
+
+    @GetMapping()
+    public AuthenticationResponse getUser(@AuthenticationPrincipal OAuth2User oAuth2User) {
+
+        AuthenticationResponse response = jwtService.register(oAuth2User);
+        System.out.println("Response: " + response);
+
+        return response;
+    }
+}

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

@@ -13,10 +13,10 @@ import lombok.NoArgsConstructor;
 @NoArgsConstructor
 public class RegisterRequest {
 
-    private String firstname;  // Change field name to match JSON
-    private String lastname;   // Change field name to match JSON
-    private String username;   // Change field name to match JSON
-    private String email;      // Change field name to match JSON
+    private String firstname;
+    private String lastname;
+    private String username;
+    private String email;
     private String password;
     private Role role;
 }

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

@@ -1,19 +1,19 @@
 package com.faf223.expensetrackerfaf.dto;
 
-import com.faf223.expensetrackerfaf.model.ExpenseCategory;
-import com.faf223.expensetrackerfaf.model.User;
+import jakarta.validation.constraints.DecimalMin;
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 
 import java.math.BigDecimal;
-import java.time.LocalDate;
 
 @Data
 @AllArgsConstructor
 public class ExpenseCreationDTO {
-    private long expenseId;
-    private User user;
-    private ExpenseCategory expenseCategory;
-    private LocalDate date;
+    @NotNull(message = "Category must not be null")
+    private int expenseCategory;
+
+    @NotNull(message = "Amount must not be null")
+    @DecimalMin(value = "0.0", inclusive = false, message = "Amount must be positive")
     private BigDecimal amount;
 }

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

@@ -1,6 +1,8 @@
 package com.faf223.expensetrackerfaf.dto;
 
 import com.faf223.expensetrackerfaf.model.ExpenseCategory;
+import jakarta.validation.constraints.DecimalMin;
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 
@@ -10,9 +12,19 @@ import java.time.LocalDate;
 @Data
 @AllArgsConstructor
 public class ExpenseDTO {
+    @NotNull(message = "ID must not be null")
     private long expenseId;
+
+    @NotNull(message = "User must not be null")
     private UserDTO userDTO;
+
+    @NotNull(message = "Category must not be null")
     private ExpenseCategory expenseCategory;
+
+    @NotNull(message = "Date must not be null")
     private LocalDate date;
+
+    @NotNull(message = "Amount must not be null")
+    @DecimalMin(value = "0.0", inclusive = false, message = "Amount must be positive")
     private BigDecimal amount;
 }

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

@@ -1,19 +1,19 @@
 package com.faf223.expensetrackerfaf.dto;
 
-import com.faf223.expensetrackerfaf.model.IncomeCategory;
-import com.faf223.expensetrackerfaf.model.User;
+import jakarta.validation.constraints.DecimalMin;
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 
 import java.math.BigDecimal;
-import java.time.LocalDate;
 
 @Data
 @AllArgsConstructor
 public class IncomeCreationDTO {
-    private long incomeId;
-    private User user;
-    private IncomeCategory category;
-    private LocalDate date;
+    @NotNull(message = "Category must not be null")
+    private int incomeCategory;
+
+    @NotNull(message = "Amount must not be null")
+    @DecimalMin(value = "0.0", inclusive = false, message = "Amount must be positive")
     private BigDecimal amount;
 }

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

@@ -1,6 +1,8 @@
 package com.faf223.expensetrackerfaf.dto;
 
 import com.faf223.expensetrackerfaf.model.IncomeCategory;
+import jakarta.validation.constraints.DecimalMin;
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 
@@ -10,9 +12,19 @@ import java.time.LocalDate;
 @Data
 @AllArgsConstructor
 public class IncomeDTO {
+    @NotNull(message = "ID must not be null")
     private long incomeId;
+
+    @NotNull(message = "User must not be null")
     private UserDTO userDTO;
-    private IncomeCategory category;
+
+    @NotNull(message = "Category must not be null")
+    private IncomeCategory incomeCategory;
+
+    @NotNull(message = "Date must not be null")
     private LocalDate date;
+
+    @NotNull(message = "Amount must not be null")
+    @DecimalMin(value = "0.0", inclusive = false, message = "Amount must be positive")
     private BigDecimal amount;
 }

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

@@ -1,15 +1,28 @@
 package com.faf223.expensetrackerfaf.dto;
 
+import jakarta.validation.constraints.Email;
+import jakarta.validation.constraints.NotEmpty;
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 
 @Data
 @AllArgsConstructor
 public class UserCreationDTO {
-  
+    @NotNull(message = "First name must not be null")
+    @NotEmpty(message = "First name must not be empty")
     private String firstname;
+    @NotNull(message = "Last name must not be null")
+    @NotEmpty(message = "Last name must not be empty")
     private String lastname;
+    @NotNull(message = "Username must not be null")
+    @NotEmpty(message = "Username must not be empty")
     private String username;
+    @NotNull(message = "Email must not be null")
+    @NotEmpty(message = "Email must not be empty")
+    @Email(message = "Email must be valid")
     private String email;
+    @NotNull(message = "Password must not be null")
+    @NotEmpty(message = "Password must not be empty")
     private String password;
 }

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

@@ -1,14 +1,20 @@
 package com.faf223.expensetrackerfaf.dto;
 
+import jakarta.validation.constraints.NotEmpty;
+import jakarta.validation.constraints.NotNull;
 import lombok.AllArgsConstructor;
 import lombok.Data;
 
 @Data
 @AllArgsConstructor
 public class UserDTO {
-
+    @NotNull(message = "Name must not be null")
+    @NotEmpty(message = "Name must not be empty")
     private String name;
+    @NotNull(message = "Surname must not be null")
+    @NotEmpty(message = "Surname must not be empty")
     private String surname;
+    @NotNull(message = "Username must not be null")
+    @NotEmpty(message = "Username must not be empty")
     private String username;
-
 }

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

@@ -0,0 +1,14 @@
+package com.faf223.expensetrackerfaf.dto;
+
+import lombok.AllArgsConstructor;
+import lombok.Data;
+
+@Data
+@AllArgsConstructor
+public class UserUpdateDTO {
+
+    private String firstname;
+    private String lastname;
+    private String username;
+    private String email;
+}

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

@@ -3,32 +3,29 @@ 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 lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Component;
 
+import java.time.LocalDate;
+
 @Component
+@RequiredArgsConstructor
 public class ExpenseMapper {
 
-    private final ExpenseService expenseService;
+    private final ExpenseCategoryService expenseCategoryService;
     private final UserMapper userMapper;
 
-    @Autowired
-    public ExpenseMapper(ExpenseService expenseService, UserMapper userMapper) {
-        this.expenseService = expenseService;
-        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(),
-                expenseDTO.getExpenseCategory(), expenseDTO.getDate(), expenseDTO.getAmount());
-        return expense;
+
+        return new Expense(expenseCategoryService.getCategoryById(expenseDTO.getExpenseCategory()), LocalDate.now(), expenseDTO.getAmount());
     }
 
 }

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

@@ -4,32 +4,28 @@ 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 lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Component;
 
+import java.time.LocalDate;
+
 @Component
+@RequiredArgsConstructor
 public class IncomeMapper {
 
-    private final IncomeService incomeService;
+    private final IncomeCategoryService incomeCategoryService;
     private final UserMapper userMapper;
 
-    @Autowired
-    public IncomeMapper(IncomeService incomeService, UserMapper userMapper) {
-        this.incomeService = incomeService;
-        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());
-        if(income == null) return new Income(incomeDTO.getIncomeId(), incomeDTO.getUser(),
-                incomeDTO.getCategory(), incomeDTO.getDate(), incomeDTO.getAmount());
-        return income;
+        return new Income(incomeCategoryService.getCategoryById(incomeDTO.getIncomeCategory()), LocalDate.now(), incomeDTO.getAmount());
     }
 
 }

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

@@ -1,35 +1,37 @@
-    package com.faf223.expensetrackerfaf.model;
+package com.faf223.expensetrackerfaf.model;
 
-    import jakarta.persistence.*;
-    import lombok.AllArgsConstructor;
-    import lombok.Data;
-    import lombok.NoArgsConstructor;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Data;
+import lombok.NoArgsConstructor;
 
-    @Data
-    @Entity(name = "credentials")
-    @NoArgsConstructor
-    @AllArgsConstructor
-    public class Credential {
-        @Id
-        @GeneratedValue(strategy = GenerationType.IDENTITY)
-        private Long credentialId;
+@Data
+@Entity(name = "credentials")
+@NoArgsConstructor
+@AllArgsConstructor
+@Builder
+public class Credential {
+    @Id
+    @GeneratedValue(strategy = GenerationType.IDENTITY)
+    private Long credentialId;
 
-        @ManyToOne
-        @JoinColumn(name = "user_uuid")
-        private User user;
+    @ManyToOne
+    @JoinColumn(name = "user_uuid")
+    private User user;
 
-        private String email;
-        private String password;
+    private String email;
+    private String password;
 
-        @Enumerated(EnumType.STRING)
-        private Role role;
+    @Enumerated(EnumType.STRING)
+    private Role role;
 
-        public Credential(User user, String email, String password) {
-            this.user = user;
-            this.email = email;
-            this.password = password;
+    public Credential(User user, String email, String password) {
+        this.user = user;
+        this.email = email;
+        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,10 @@
 package com.faf223.expensetrackerfaf.model;
+
 import com.fasterxml.jackson.annotation.JsonIgnore;
 import jakarta.persistence.*;
-import lombok.AllArgsConstructor;
-import lombok.Data;
-import lombok.ToString;
-import lombok.NoArgsConstructor;
+import jakarta.validation.constraints.DecimalMin;
+import jakarta.validation.constraints.NotNull;
+import lombok.*;
 
 import java.math.BigDecimal;
 import java.time.LocalDate;
@@ -13,10 +13,12 @@ import java.time.LocalDate;
 @AllArgsConstructor
 @NoArgsConstructor
 @Entity(name = "expenses")
-public class Expense {
+@Builder
+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")
@@ -26,9 +28,22 @@ public class Expense {
 
     @ManyToOne
     @JoinColumn(name = "category_id")
+    @NotNull
     private ExpenseCategory category;
 
+    @NotNull
     private LocalDate date;
-    private BigDecimal amount;
-}
 
+    @NotNull
+    @DecimalMin(value = "0.0", inclusive = false)
+    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,20 @@
 package com.faf223.expensetrackerfaf.model;
 
-import jakarta.persistence.Entity;
-import jakarta.persistence.GeneratedValue;
-import jakarta.persistence.GenerationType;
-import jakarta.persistence.Id;
+import jakarta.persistence.*;
+import jakarta.validation.constraints.NotEmpty;
+import jakarta.validation.constraints.NotNull;
 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")
+    @NotNull(message = "Name must not be null")
+    @NotEmpty(message = "Name must not be empty")
+    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,10 @@ package com.faf223.expensetrackerfaf.model;
 
 import com.fasterxml.jackson.annotation.JsonIgnore;
 import jakarta.persistence.*;
-import lombok.AllArgsConstructor;
-import lombok.Data;
-import lombok.ToString;
-import lombok.NoArgsConstructor;
+import jakarta.validation.constraints.DecimalMin;
+import jakarta.validation.constraints.NotNull;
+import lombok.*;
+
 import java.math.BigDecimal;
 import java.time.LocalDate;
 
@@ -13,10 +13,12 @@ import java.time.LocalDate;
 @AllArgsConstructor
 @NoArgsConstructor
 @Entity(name = "incomes")
-public class Income {
+@Builder
+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")
@@ -26,8 +28,19 @@ public class Income {
 
     @ManyToOne
     @JoinColumn(name = "category_id")
+    @NotNull
     private IncomeCategory category;
 
+    @NotNull
     private LocalDate date;
+
+    @NotNull
+    @DecimalMin(value = "0.0", inclusive = false)
     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,27 @@
 package com.faf223.expensetrackerfaf.model;
 
-import jakarta.persistence.Entity;
-import jakarta.persistence.GeneratedValue;
-import jakarta.persistence.GenerationType;
-import jakarta.persistence.Id;
+import jakarta.persistence.*;
+import jakarta.validation.constraints.NotEmpty;
+import jakarta.validation.constraints.NotNull;
+import lombok.AllArgsConstructor;
+import lombok.Builder;
 import lombok.Data;
+import lombok.NoArgsConstructor;
 
 @Data
 @Entity(name = "income_categories")
-public class IncomeCategory {
+@Builder
+@NoArgsConstructor
+@AllArgsConstructor
+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")
+    @NotNull(message = "Name must not be null")
+    @NotEmpty(message = "Name must not be empty")
+    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,39 +1,46 @@
+    package com.faf223.expensetrackerfaf.model;
 
-package com.faf223.expensetrackerfaf.model;
+    import jakarta.persistence.*;
+    import jakarta.validation.constraints.NotEmpty;
+    import jakarta.validation.constraints.NotNull;
+    import lombok.*;
 
-import jakarta.persistence.*;
-import lombok.*;
+    import java.util.List;
 
-import java.util.List;
+    @Entity(name = "users")
+    @Data
+    @Builder
+    @NoArgsConstructor
+    @AllArgsConstructor
+    public class User {
+        @Id
+        @Column(name = "user_uuid")
+        @GeneratedValue(strategy = GenerationType.UUID)
+        private String userUuid;
 
-@Entity(name = "users")
-@Data
-@Builder
-@NoArgsConstructor
-@AllArgsConstructor
-public class User {
-    @Id
-    @Column(name = "user_uuid")
-    @GeneratedValue(strategy = GenerationType.UUID)
-    private String userUuid;
+        @Column(name = "name")
+        @NotNull(message = "First name must not be null")
+        @NotEmpty(message = "First name must not be empty")
+        private String firstName;
 
-    @Column(name = "name")
-    private String firstName;
+        @Column(name = "surname")
+        @NotNull(message = "Last name must not be null")
+        @NotEmpty(message = "Last name must not be empty")
+        private String lastName;
 
-    @Column(name = "surname")
-    private String lastName;
+        @Column(name = "username")
+        @NotNull(message = "Username must not be null")
+        @NotEmpty(message = "Username must not be empty")
+        private String username;
 
-    @Column(name = "username")
-    private String username;
+        @Transient
+        private String password;
 
-    @Transient
-    private String password;
+        @OneToMany(mappedBy = "user", fetch = FetchType.LAZY, cascade = CascadeType.ALL)
+        @ToString.Exclude
+        private List<Expense> expenses;
 
-    @OneToMany(mappedBy = "user", fetch = FetchType.LAZY)
-    @ToString.Exclude
-    private List<Expense> expenses;
-
-    @OneToMany(mappedBy = "user", fetch = FetchType.LAZY)
-    @ToString.Exclude
-    private List<Income> incomes;
-}
+        @OneToMany(mappedBy = "user", fetch = FetchType.LAZY, cascade = CascadeType.ALL)
+        @ToString.Exclude
+        private List<Income> incomes;
+    }

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

@@ -1,6 +1,7 @@
 package com.faf223.expensetrackerfaf.repository;
 
 import com.faf223.expensetrackerfaf.model.Credential;
+import com.faf223.expensetrackerfaf.model.User;
 import org.springframework.data.jpa.repository.JpaRepository;
 import org.springframework.stereotype.Repository;
 
@@ -9,4 +10,8 @@ import java.util.Optional;
 @Repository
 public interface CredentialRepository extends JpaRepository<Credential, Long> {
     Optional<Credential> findByEmail(String email);
+
+    Optional<Credential> findByUser(User user);
+
+    void deleteByEmail(String email);
 }

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

@@ -3,11 +3,28 @@ package com.faf223.expensetrackerfaf.repository;
 import com.faf223.expensetrackerfaf.model.Expense;
 import com.faf223.expensetrackerfaf.model.User;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.query.Procedure;
 import org.springframework.stereotype.Repository;
 
+import java.time.LocalDate;
 import java.util.List;
 
 @Repository
 public interface ExpenseRepository extends JpaRepository<Expense, Long> {
     List<Expense> findByUser(User user);
+    List<Expense> findByDate(LocalDate date);
+
+    List<Expense> findByDateBetween(LocalDate start, LocalDate end);
+
+    @Procedure(procedureName = "get_expenses_by_month")
+    List<Expense> filterByMonth(int month);
+
+    @Procedure(procedureName = "get_last_week_expenses")
+    List<Expense> findLastWeek();
+
+    @Procedure(procedureName = "get_last_month_expenses")
+    List<Expense> findLastMonth();
+
+    @Procedure(procedureName = "get_expenses_by_year_interval")
+    List<Expense> filterByYearInterval(int start, int end);
 }

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

@@ -3,11 +3,33 @@ package com.faf223.expensetrackerfaf.repository;
 import com.faf223.expensetrackerfaf.model.Income;
 import com.faf223.expensetrackerfaf.model.User;
 import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.query.Procedure;
 import org.springframework.stereotype.Repository;
+import org.springframework.transaction.annotation.Transactional;
 
+import java.time.LocalDate;
 import java.util.List;
 
 @Repository
 public interface IncomeRepository extends JpaRepository<Income, Long> {
     List<Income> findByUser(User user);
+    List<Income> findByDate(LocalDate date);
+
+    List<Income> findByDateBetween(LocalDate start, LocalDate end);
+
+    @Transactional(readOnly = true)
+    @Procedure(procedureName = "get_incomes_by_month")
+    List<Income> filterByMonth(int month);
+
+    @Transactional(readOnly = true)
+    @Procedure(procedureName = "get_last_week_incomes")
+    List<Income> findLastWeek();
+
+    @Transactional(readOnly = true)
+    @Procedure(procedureName = "get_last_month_incomes")
+    List<Income> findLastMonth();
+
+    @Transactional(readOnly = true)
+    @Procedure(procedureName = "get_incomes_by_year_interval")
+    List<Income> filterByYearInterval(int start, int end);
 }

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

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

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

@@ -4,27 +4,37 @@ 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;
 import com.faf223.expensetrackerfaf.repository.UserRepository;
 import com.faf223.expensetrackerfaf.security.PersonDetails;
+import com.faf223.expensetrackerfaf.util.exceptions.UserNotAuthenticatedException;
+import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
 import lombok.RequiredArgsConstructor;
 import org.springframework.security.authentication.AuthenticationManager;
 import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
-import org.springframework.security.core.userdetails.UsernameNotFoundException;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.security.oauth2.core.user.OAuth2User;
 import org.springframework.stereotype.Service;
 
+import java.util.Optional;
+
 @Service
 @RequiredArgsConstructor
 public class AuthenticationService {
 
     private final UserRepository userRepository;
+    private final UserService userService;
     private final CredentialRepository credentialRepository;
     private final PasswordEncoder passwordEncoder;
     private final JwtService jwtService;
     private final AuthenticationManager authenticationManager;
+    private final PasswordGenerator passwordGenerator;
 
     public AuthenticationResponse register(RegisterRequest request) {
 
@@ -38,21 +48,110 @@ 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();
+    }
+
+    public AuthenticationResponse register(OAuth2User oAuth2User) {
+        String userEmail = oAuth2User.getAttribute("email");
+
+        // Check if the user is already registered
+        Optional<Credential> existingCredential = credentialRepository.findByEmail(userEmail);
+        if (existingCredential.isPresent()) {
+            UserDetails userDetails = new PersonDetails(existingCredential.get());
+            String jwtToken = jwtService.generateToken(userDetails);
+            String refreshToken = jwtService.generateRefreshToken(userDetails);
+
+            return AuthenticationResponse.builder()
+                    .accessToken(jwtToken)
+                    .refreshToken(refreshToken)
+                    .build();
+        }
+
+
+        String givenName = oAuth2User.getAttribute("given_name");
+        String familyName = oAuth2User.getAttribute("family_name");
+        String email = oAuth2User.getAttribute("email");
+
+        User user = User.builder()
+                .firstName(givenName)
+                .lastName(familyName)
+                .username(email)
+                .build();
+
+        String randomPassword = passwordGenerator.generateRandomPassword(8);
+
+        user.setPassword(passwordEncoder.encode(randomPassword));
+
+        userRepository.save(user);
+        Credential credential = new Credential(user, email, passwordEncoder.encode(randomPassword));
+        credentialRepository.save(credential);
+
+        UserDetails userDetails = new PersonDetails(credential);
+        String jwtToken = jwtService.generateToken(userDetails);
+        String refreshToken = jwtService.generateRefreshToken(userDetails);
+
+        System.out.println("New user: " + user);
+        System.out.println("New credentials: " + credential);
+
+        return AuthenticationResponse.builder()
+                .accessToken(jwtToken)
+                .refreshToken(refreshToken)
                 .build();
     }
 
     public AuthenticationResponse authenticate(AuthenticationRequest request) {
         authenticationManager.authenticate(new UsernamePasswordAuthenticationToken(request.getEmail(), request.getPassword()));
 
-        Credential credential = credentialRepository.findByEmail(request.getEmail()).orElseThrow((() -> new UsernameNotFoundException("User not found")));
+        Credential credential = credentialRepository.findByEmail(request.getEmail()).orElseThrow((() -> new UserNotFoundException("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 UserNotAuthenticatedException("Invalid or expired refresh token");
+        }
+    }
+
+    public void updatePassword(String newPassword) {
+
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
+            User user = userService.getUserByEmail(userDetails.getUsername());
+            Optional<Credential> credential = credentialRepository.findByUser(user);
+
+            if (credential.isPresent()) {
+
+                Credential updatedCredential = credential.get();
+                updatedCredential.setPassword(passwordEncoder.encode(newPassword));
+                credentialRepository.save(updatedCredential);
+            }
+        } else throw new UserNotFoundException("User not found!");
+    }
+
 }

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

@@ -0,0 +1,20 @@
+package com.faf223.expensetrackerfaf.service;
+
+import com.faf223.expensetrackerfaf.model.Credential;
+import com.faf223.expensetrackerfaf.repository.CredentialRepository;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Service;
+
+import java.util.Optional;
+
+@Service
+@RequiredArgsConstructor
+public class CredentialService {
+
+    private final CredentialRepository credentialRepository;
+
+    public Optional<Credential> findByEmail(String email) {
+        return credentialRepository.findByEmail(email);
+    }
+
+}

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,43 +1,138 @@
 package com.faf223.expensetrackerfaf.service;
 
+import com.faf223.expensetrackerfaf.model.Credential;
 import com.faf223.expensetrackerfaf.model.Expense;
+import com.faf223.expensetrackerfaf.model.IMoneyTransaction;
 import com.faf223.expensetrackerfaf.model.User;
+import com.faf223.expensetrackerfaf.repository.CredentialRepository;
 import com.faf223.expensetrackerfaf.repository.ExpenseRepository;
 import com.faf223.expensetrackerfaf.repository.UserRepository;
+import com.faf223.expensetrackerfaf.util.TransactionFilter;
+import com.faf223.expensetrackerfaf.util.exceptions.UserNotAuthenticatedException;
+import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
 import lombok.RequiredArgsConstructor;
-import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.stereotype.Service;
 
+import java.time.LocalDate;
+import java.time.Month;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
 
 @Service
 @RequiredArgsConstructor
-public class ExpenseService {
+public class ExpenseService implements ITransactionService {
 
     private final ExpenseRepository expenseRepository;
+    private final CredentialRepository credentialRepository;
     private final UserRepository userRepository;
+    private final TransactionFilter transactionFilter;
 
-    public void createOrUpdateExpense(Expense expense) {
-        expenseRepository.save(expense);
+    public void createOrUpdate(IMoneyTransaction expense) {
+        expenseRepository.save((Expense) expense);
     }
 
-    public List<Expense> getExpensesByUserId(String userUuid) {
+    public List<Expense> getTransactionsByEmail(String email) {
 
-        Optional<User> user = userRepository.getUserByUserUuid(userUuid);
-        if (user.isPresent()) {
-            return expenseRepository.findByUser(user.get());
+        Optional<Credential> credential = credentialRepository.findByEmail(email);
+        if (credential.isPresent()) {
+            return expenseRepository.findByUser(credential.get().getUser());
         }
 
         return new ArrayList<>();
     }
 
-    public List<Expense> getExpenses() {
+    @Override
+    public List<Expense> getTransactionsByDate(LocalDate date) {
+        return expenseRepository.findByDate(date);
+    }
+
+    @Override
+    @SuppressWarnings("unchecked")
+    public List<Expense> getTransactionsByDate(LocalDate date, String email) {
+        return (List<Expense>) transactionFilter.filterByEmail(getTransactionsByDate(date), email);
+    }
+
+    @Override
+    public List<Expense> getTransactionsByMonth(Month month) {
+        System.out.println(expenseRepository.filterByMonth(month.getValue()));
+        return expenseRepository.filterByMonth(month.getValue());
+    }
+
+    @Override
+    @SuppressWarnings("unchecked")
+    public List<Expense> getTransactionsByMonth(Month month, String email) {
+        return (List<Expense>) transactionFilter.filterByEmail(getTransactionsByMonth(month), email);
+    }
+
+    @Override
+    public List<Expense> getLastWeekTransactions() {
+        return expenseRepository.findLastWeek();
+    }
+
+    @Override
+    @SuppressWarnings("unchecked")
+    public List<Expense> getLastWeekTransactions(String email) {
+        return (List<Expense>) transactionFilter.filterByEmail(getLastWeekTransactions(), email);
+    }
+
+    @Override
+    public List<Expense> getLastMonthTransactions() {
+        return expenseRepository.findLastMonth();
+    }
+
+    @Override
+    @SuppressWarnings("unchecked")
+    public List<Expense> getLastMonthTransactions(String email) {
+        return (List<Expense>) transactionFilter.filterByEmail(getLastMonthTransactions(), email);
+    }
+
+    @Override
+    public List<Expense> getYearIntervalTransactions(int start, int end) {
+        return expenseRepository.filterByYearInterval(start, end);
+    }
+
+    @Override
+    @SuppressWarnings("unchecked")
+    public List<Expense> getYearIntervalTransactions(String email, int start, int end) {
+        return (List<Expense>) transactionFilter.filterByEmail(getYearIntervalTransactions(start, end), email);
+    }
+
+    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 deleteTransactionById(long id) {
+        expenseRepository.deleteById(id);
+    }
+
+    @Override
+    public boolean belongsToUser(IMoneyTransaction transaction) {
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
+
+            if(authentication.getAuthorities().stream().noneMatch(authority -> authority.getAuthority().equals("ADMIN"))) {
+
+                Optional<Credential> credential = credentialRepository.findByEmail(userDetails.getUsername());
+                if(credential.isEmpty()) throw new UserNotFoundException("The user has not been found");
+                Optional<User> user = userRepository.findById(credential.get().getUser().getUserUuid());
+                if(user.isEmpty()) throw new UserNotFoundException("The user has not been found");
+
+                return user.get().getExpenses().contains((Expense) transaction);
+
+            }
+
+        }
+
+        throw new UserNotAuthenticatedException("You are not authenticated");
+    }
+
 }

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,29 @@
+package com.faf223.expensetrackerfaf.service;
+
+import com.faf223.expensetrackerfaf.model.IMoneyTransaction;
+import com.faf223.expensetrackerfaf.model.Income;
+import com.faf223.expensetrackerfaf.model.User;
+
+import java.time.LocalDate;
+import java.time.Month;
+import java.util.List;
+
+public interface ITransactionService {
+
+    void createOrUpdate(IMoneyTransaction transaction);
+    List<? extends IMoneyTransaction> getTransactions();
+    List<? extends IMoneyTransaction> getTransactionsByEmail(String email);
+    List<? extends IMoneyTransaction> getTransactionsByDate(LocalDate date);
+    List<? extends IMoneyTransaction> getTransactionsByDate(LocalDate date, String email);
+    List<? extends IMoneyTransaction> getTransactionsByMonth(Month month);
+    List<? extends IMoneyTransaction> getTransactionsByMonth(Month month, String email);
+    List<? extends IMoneyTransaction> getLastWeekTransactions();
+    List<? extends IMoneyTransaction> getLastWeekTransactions(String email);
+    List<? extends IMoneyTransaction> getLastMonthTransactions();
+    List<? extends IMoneyTransaction> getLastMonthTransactions(String email);
+    List<? extends IMoneyTransaction> getYearIntervalTransactions(int start, int end);
+    List<? extends IMoneyTransaction> getYearIntervalTransactions(String email, int start, int end);
+    IMoneyTransaction getTransactionById(long id);
+    void deleteTransactionById(long it);
+    boolean belongsToUser(IMoneyTransaction transaction);
+}

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,43 +1,136 @@
 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 com.faf223.expensetrackerfaf.util.TransactionFilter;
+import com.faf223.expensetrackerfaf.util.exceptions.UserNotAuthenticatedException;
+import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
 import lombok.RequiredArgsConstructor;
-import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.core.userdetails.UserDetails;
 import org.springframework.stereotype.Service;
 
+import java.time.LocalDate;
+import java.time.Month;
 import java.util.ArrayList;
 import java.util.List;
 import java.util.Optional;
 
 @Service
 @RequiredArgsConstructor
-public class IncomeService {
+public class IncomeService implements ITransactionService {
 
     private final IncomeRepository incomeRepository;
+    private final CredentialRepository credentialRepository;
     private final UserRepository userRepository;
+    private final TransactionFilter transactionFilter;
 
-    public void createOrUpdateIncome(Income income) {
-        incomeRepository.save(income);
+    public void createOrUpdate(IMoneyTransaction 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);
-        if (user.isPresent()) {
-            return incomeRepository.findByUser(user.get());
+        Optional<Credential> credential = credentialRepository.findByEmail(email);
+        if (credential.isPresent()) {
+            return incomeRepository.findByUser(credential.get().getUser());
         }
 
         return new ArrayList<>();
     }
 
-    public Income getIncomeById(long id) {
+    @Override
+    public List<Income> getTransactionsByDate(LocalDate date) {
+        return incomeRepository.findByDate(date);
+    }
+
+    @Override
+    @SuppressWarnings("unchecked")
+    public List<Income> getTransactionsByDate(LocalDate date, String email) {
+        return (List<Income>) transactionFilter.filterByEmail(getTransactionsByDate(date), email);
+    }
+
+    @Override
+    public List<Income> getTransactionsByMonth(Month month) {
+        return incomeRepository.filterByMonth(month.getValue());
+    }
+
+    @Override
+    @SuppressWarnings("unchecked")
+    public List<Income> getTransactionsByMonth(Month month, String email) {
+        return (List<Income>) transactionFilter.filterByEmail(getTransactionsByMonth(month), email);
+    }
+
+    @Override
+    public List<Income> getLastWeekTransactions() {
+        return incomeRepository.findLastWeek();
+    }
+
+    @Override
+    @SuppressWarnings("unchecked")
+    public List<Income> getLastWeekTransactions(String email) {
+        return (List<Income>) transactionFilter.filterByEmail(getLastWeekTransactions(), email);
+    }
+
+    @Override
+    public List<Income> getLastMonthTransactions() {
+        return incomeRepository.findLastMonth();
+    }
+
+    @Override
+    @SuppressWarnings("unchecked")
+    public List<Income> getLastMonthTransactions(String email) {
+        return (List<Income>) transactionFilter.filterByEmail(getLastMonthTransactions(), email);
+    }
+
+    @Override
+    public List<Income> getYearIntervalTransactions(int start, int end) {
+        return incomeRepository.filterByYearInterval(start, end);
+    }
+
+    @Override
+    @SuppressWarnings("unchecked")
+    public List<Income> getYearIntervalTransactions(String email, int start, int end) {
+        return (List<Income>) transactionFilter.filterByEmail(getYearIntervalTransactions(start, end), email);
+    }
+
+    public Income getTransactionById(long id) {
         return incomeRepository.findById(id).orElse(null);
     }
+
+    public void deleteTransactionById(long id) {
+        incomeRepository.deleteById(id);
+    }
+
+    @Override
+    public boolean belongsToUser(IMoneyTransaction transaction) {
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
+
+            if(authentication.getAuthorities().stream().noneMatch(authority -> authority.getAuthority().equals("ADMIN"))) {
+
+                Optional<Credential> credential = credentialRepository.findByEmail(userDetails.getUsername());
+                if(credential.isEmpty()) throw new UserNotFoundException("The user has not been found");
+                Optional<User> user = userRepository.findById(credential.get().getUser().getUserUuid());
+                if(user.isEmpty()) throw new UserNotFoundException("The user has not been found");
+
+                return user.get().getIncomes().contains((Income) transaction);
+
+            }
+
+        }
+
+        throw new UserNotAuthenticatedException("You are not authenticated");
+    }
 }

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

@@ -0,0 +1,18 @@
+package com.faf223.expensetrackerfaf.service;
+
+import org.springframework.stereotype.Service;
+
+import java.security.SecureRandom;
+import java.util.Base64;
+
+@Service
+public class PasswordGenerator {
+
+    private final SecureRandom secureRandom = new SecureRandom();
+
+    public String generateRandomPassword(int length) {
+        byte[] randomBytes = new byte[length];
+        secureRandom.nextBytes(randomBytes);
+        return Base64.getUrlEncoder().withoutPadding().encodeToString(randomBytes);
+    }
+}

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

@@ -1,22 +1,73 @@
 package com.faf223.expensetrackerfaf.service;
 
+import com.faf223.expensetrackerfaf.config.JwtService;
+import com.faf223.expensetrackerfaf.controller.auth.AuthenticationResponse;
+import com.faf223.expensetrackerfaf.dto.UserUpdateDTO;
+import com.faf223.expensetrackerfaf.model.Credential;
+import com.faf223.expensetrackerfaf.model.Role;
 import com.faf223.expensetrackerfaf.model.User;
+import com.faf223.expensetrackerfaf.repository.CredentialRepository;
 import com.faf223.expensetrackerfaf.repository.UserRepository;
+import com.faf223.expensetrackerfaf.security.PersonDetails;
+import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
+import jakarta.transaction.Transactional;
 import lombok.RequiredArgsConstructor;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.core.userdetails.UserDetails;
 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;
+    private final JwtService jwtService;
 
     public void updateUser(User user) {
         userRepository.save(user);
     }
 
+    public AuthenticationResponse updateUser(UserUpdateDTO userUpdate) {
+        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
+
+        if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
+            User user = getUserByEmail(userDetails.getUsername());
+            Optional<Credential> credential = credentialRepository.findByUser(user);
+
+            if (credential.isPresent()) {
+
+                Credential credentialToUpdate = credential.get();
+
+                if (userUpdate.getUsername() != null)
+                    user.setUsername(userUpdate.getUsername());
+                if (userUpdate.getFirstname() != null)
+                    user.setFirstName(userUpdate.getFirstname());
+                if (userUpdate.getLastname() != null)
+                    user.setLastName(userUpdate.getLastname());
+                if (userUpdate.getEmail() != null)
+                    credentialToUpdate.setEmail(userUpdate.getEmail());
+
+                userRepository.save(user);
+                credentialRepository.save(credentialToUpdate);
+
+                UserDetails details = new PersonDetails(credentialToUpdate);
+                String jwtToken = jwtService.generateToken(details);
+                String refreshToken = jwtService.generateRefreshToken(details);
+
+                return AuthenticationResponse.builder()
+                        .accessToken(jwtToken)
+                        .refreshToken(refreshToken)
+                        .build();
+            }
+        }
+        throw new UserNotFoundException("User not found!");
+    }
+
     public List<User> getUsers() {
         return userRepository.findAll();
     }
@@ -24,4 +75,51 @@ 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;
+    }
+
+    @Transactional
+    public void deleteByUsername(String username) {
+
+        Optional<User> user = userRepository.findByUsername(username);
+        if (user.isPresent()) {
+
+            Optional<Credential> credential = credentialRepository.findByUser(user.get());
+
+            if (credential.isPresent()) {
+
+                credentialRepository.deleteByEmail(credential.get().getEmail());
+                userRepository.deleteByUsername(username);
+            }
+        }
+    }
+
+    public void promoteUser(String email) {
+        Optional<Credential> credential = credentialRepository.findByEmail(email);
+        if (credential.isPresent()) {
+
+            System.out.println(email);
+            Credential updatedCredential = credential.get();
+            updatedCredential.setRole(Role.ROLE_ADMIN);
+            credentialRepository.save(updatedCredential);
+        }
+    }
+
+    public void demoteUser(String email) {
+        Optional<Credential> credential = credentialRepository.findByEmail(email);
+        if (credential.isPresent()) {
+
+            System.out.println(email);
+            Credential updatedCredential = credential.get();
+            updatedCredential.setRole(Role.ROLE_USER);
+            credentialRepository.save(updatedCredential);
+        }
+    }
 }

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/util/TransactionFilter.java

@@ -0,0 +1,30 @@
+package com.faf223.expensetrackerfaf.util;
+
+import com.faf223.expensetrackerfaf.model.Credential;
+import com.faf223.expensetrackerfaf.model.IMoneyTransaction;
+import com.faf223.expensetrackerfaf.service.CredentialService;
+import com.faf223.expensetrackerfaf.util.exceptions.UserNotFoundException;
+import lombok.RequiredArgsConstructor;
+import org.springframework.stereotype.Component;
+
+import java.util.List;
+import java.util.Optional;
+
+@Component
+@RequiredArgsConstructor
+public class TransactionFilter {
+
+    private final CredentialService credentialService;
+
+    public List<? extends IMoneyTransaction> filterByEmail(List<? extends IMoneyTransaction> transactions, String email) {
+        Optional<Credential> credential = credentialService.findByEmail(email);
+        if(credential.isEmpty())
+            throw new UserNotFoundException("The user has not been found");
+
+        return transactions
+                .stream()
+                .filter(transaction -> credential.get().getUser().equals(transaction.getUser()))
+                .toList();
+    }
+
+}

src/main/java/com/faf223/expensetrackerfaf/util/errors/ErrorResponse.java

@@ -0,0 +1,40 @@
+package com.faf223.expensetrackerfaf.util.errors;
+
+import lombok.Data;
+import org.springframework.validation.BindingResult;
+import org.springframework.validation.FieldError;
+
+import java.util.List;
+
+@Data
+public class ErrorResponse {
+    private String message;
+    private long timestamp;
+
+    public ErrorResponse(String message, long timestamp) {
+        this.message = message;
+        this.timestamp = timestamp;
+    }
+
+    public ErrorResponse(String message) {
+        this.message = message;
+        this.timestamp = System.currentTimeMillis();
+    }
+
+    public static ErrorResponse from(BindingResult bindingResult) {
+        if(bindingResult.hasErrors()) {
+            StringBuilder errorMessage = new StringBuilder();
+
+            List<FieldError> errors = bindingResult.getFieldErrors();
+            for(FieldError fieldError : errors)
+                errorMessage.append(fieldError.getField())
+                        .append(" - ")
+                        .append(fieldError.getDefaultMessage())
+                        .append(";");
+
+            return new ErrorResponse(errorMessage.toString(), System.currentTimeMillis());
+        }
+
+        return new ErrorResponse("No error message was provided", System.currentTimeMillis());
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/util/exceptions/TransactionDoesNotBelongToTheUserException.java

@@ -0,0 +1,7 @@
+package com.faf223.expensetrackerfaf.util.exceptions;
+
+public class TransactionDoesNotBelongToTheUserException extends RuntimeException {
+    public TransactionDoesNotBelongToTheUserException(String message) {
+        super(message);
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/util/exceptions/TransactionNotCreatedException.java

@@ -0,0 +1,7 @@
+package com.faf223.expensetrackerfaf.util.exceptions;
+
+public class TransactionNotCreatedException extends RuntimeException {
+    public TransactionNotCreatedException(String message) {
+        super(message);
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/util/exceptions/TransactionNotUpdatedException.java

@@ -0,0 +1,7 @@
+package com.faf223.expensetrackerfaf.util.exceptions;
+
+public class TransactionNotUpdatedException extends RuntimeException {
+    public TransactionNotUpdatedException(String message) {
+        super(message);
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/util/exceptions/TransactionsNotFoundException.java

@@ -0,0 +1,7 @@
+package com.faf223.expensetrackerfaf.util.exceptions;
+
+public class TransactionsNotFoundException extends RuntimeException {
+    public TransactionsNotFoundException(String message) {
+        super(message);
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/util/exceptions/UserNotAuthenticatedException.java

@@ -0,0 +1,7 @@
+package com.faf223.expensetrackerfaf.util.exceptions;
+
+public class UserNotAuthenticatedException extends RuntimeException {
+    public UserNotAuthenticatedException(String message) {
+        super(message);
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/util/exceptions/UserNotCreatedException.java

@@ -0,0 +1,7 @@
+package com.faf223.expensetrackerfaf.util.exceptions;
+
+public class UserNotCreatedException extends RuntimeException {
+    public UserNotCreatedException(String message) {
+        super(message);
+    }
+}

src/main/java/com/faf223/expensetrackerfaf/util/exceptions/UserNotFoundException.java

@@ -0,0 +1,7 @@
+package com.faf223.expensetrackerfaf.util.exceptions;
+
+public class UserNotFoundException extends RuntimeException {
+    public UserNotFoundException(String message) {
+        super(message);
+    }
+}

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/fullchain.pem

@@ -0,0 +1,86 @@
+-----BEGIN CERTIFICATE-----
+MIIEHTCCAwWgAwIBAgISBGYC3YGfvdZxQg6y2YUSjvzLMA0GCSqGSIb3DQEBCwUA
+MDIxCzAJBgNVBAYTAlVTMRYwFAYDVQQKEw1MZXQncyBFbmNyeXB0MQswCQYDVQQD
+EwJSMzAeFw0yMzEyMTIxOTAxNTVaFw0yNDAzMTExOTAxNTRaMBkxFzAVBgNVBAMT
+DnRyYWNraW8ub25saW5lMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEirToCuVv
+qNiT3Rxqsyu2+OmD7TYBW+CV9639OW4FhwHaFxyzoCWI3/w3gZNVE/5Y1CvwHAsw
+qfuam0LjfbnKOKOCAg8wggILMA4GA1UdDwEB/wQEAwIHgDAdBgNVHSUEFjAUBggr
+BgEFBQcDAQYIKwYBBQUHAwIwDAYDVR0TAQH/BAIwADAdBgNVHQ4EFgQUmUFyQf+b
+b16jD80QRaO9ipw7h9kwHwYDVR0jBBgwFoAUFC6zF7dYVsuuUAlA5h+vnYsUwsYw
+VQYIKwYBBQUHAQEESTBHMCEGCCsGAQUFBzABhhVodHRwOi8vcjMuby5sZW5jci5v
+cmcwIgYIKwYBBQUHMAKGFmh0dHA6Ly9yMy5pLmxlbmNyLm9yZy8wGQYDVR0RBBIw
+EIIOdHJhY2tpby5vbmxpbmUwEwYDVR0gBAwwCjAIBgZngQwBAgEwggEDBgorBgEE
+AdZ5AgQCBIH0BIHxAO8AdQA7U3d1Pi25gE6LMFsG/kA7Z9hPw/THvQANLXJv4frU
+FwAAAYxfnyo6AAAEAwBGMEQCIBqYq5pa2GE7UNJHzN+1AAbw///s8PtWNkauU9UO
+igWZAiAktf1uf/O90k1l/+ihkPxJXToxcH5yeOiqATqDMol5PwB2AHb/iD8KtvuV
+UcJhzPWHujS0pM27KdxoQgqf5mdMWjp0AAABjF+fKoMAAAQDAEcwRQIgfNyTycHQ
+D1OMAOBA8vHAyu//5SjnY0BtCxOITyY/W1oCIQCCHFH+VKTFCglsqcp2hwQJHGq/
+jiSj4tR0jYIm5xMlaTANBgkqhkiG9w0BAQsFAAOCAQEAqu7cvsrkAnyrBgQHovQ4
+r+F1S/H6vu/Bvt9x+d125uDa/pT55JO/wG1IvdT9fxws2oYcc/nc8DjvW9U7+peu
+5K675kH09QTi+GhBAU4gZBhx3PohA6qG0Wm/6gC4lOq+S7o32x6RpoptcSvB3UXQ
+9BkgbO6LgDu99jPm6Acv4wre6trXAbPOpSlruSKSENnda7l/CamfiOX0cRKHjZdX
+PNpIfqWXokXNNYDAdrcXbOm7mFVMo1WcjBQM6E++IXfDRqHQ82Y94YVhEdH/hCo6
+3ce9uSrgL9+HcwhHzlZj20rTHFJ6iX/+Ffk8wbYfR4Eu7MXDg8ULT0z93yIvDxgy
+uw==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFFjCCAv6gAwIBAgIRAJErCErPDBinU/bWLiWnX1owDQYJKoZIhvcNAQELBQAw
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwHhcNMjAwOTA0MDAwMDAw
+WhcNMjUwOTE1MTYwMDAwWjAyMQswCQYDVQQGEwJVUzEWMBQGA1UEChMNTGV0J3Mg
+RW5jcnlwdDELMAkGA1UEAxMCUjMwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK
+AoIBAQC7AhUozPaglNMPEuyNVZLD+ILxmaZ6QoinXSaqtSu5xUyxr45r+XXIo9cP
+R5QUVTVXjJ6oojkZ9YI8QqlObvU7wy7bjcCwXPNZOOftz2nwWgsbvsCUJCWH+jdx
+sxPnHKzhm+/b5DtFUkWWqcFTzjTIUu61ru2P3mBw4qVUq7ZtDpelQDRrK9O8Zutm
+NHz6a4uPVymZ+DAXXbpyb/uBxa3Shlg9F8fnCbvxK/eG3MHacV3URuPMrSXBiLxg
+Z3Vms/EY96Jc5lP/Ooi2R6X/ExjqmAl3P51T+c8B5fWmcBcUr2Ok/5mzk53cU6cG
+/kiFHaFpriV1uxPMUgP17VGhi9sVAgMBAAGjggEIMIIBBDAOBgNVHQ8BAf8EBAMC
+AYYwHQYDVR0lBBYwFAYIKwYBBQUHAwIGCCsGAQUFBwMBMBIGA1UdEwEB/wQIMAYB
+Af8CAQAwHQYDVR0OBBYEFBQusxe3WFbLrlAJQOYfr52LFMLGMB8GA1UdIwQYMBaA
+FHm0WeZ7tuXkAXOACIjIGlj26ZtuMDIGCCsGAQUFBwEBBCYwJDAiBggrBgEFBQcw
+AoYWaHR0cDovL3gxLmkubGVuY3Iub3JnLzAnBgNVHR8EIDAeMBygGqAYhhZodHRw
+Oi8veDEuYy5sZW5jci5vcmcvMCIGA1UdIAQbMBkwCAYGZ4EMAQIBMA0GCysGAQQB
+gt8TAQEBMA0GCSqGSIb3DQEBCwUAA4ICAQCFyk5HPqP3hUSFvNVneLKYY611TR6W
+PTNlclQtgaDqw+34IL9fzLdwALduO/ZelN7kIJ+m74uyA+eitRY8kc607TkC53wl
+ikfmZW4/RvTZ8M6UK+5UzhK8jCdLuMGYL6KvzXGRSgi3yLgjewQtCPkIVz6D2QQz
+CkcheAmCJ8MqyJu5zlzyZMjAvnnAT45tRAxekrsu94sQ4egdRCnbWSDtY7kh+BIm
+lJNXoB1lBMEKIq4QDUOXoRgffuDghje1WrG9ML+Hbisq/yFOGwXD9RiX8F6sw6W4
+avAuvDszue5L3sz85K+EC4Y/wFVDNvZo4TYXao6Z0f+lQKc0t8DQYzk1OXVu8rp2
+yJMC6alLbBfODALZvYH7n7do1AZls4I9d1P4jnkDrQoxB3UqQ9hVl3LEKQ73xF1O
+yK5GhDDX8oVfGKF5u+decIsH4YaTw7mP3GFxJSqv3+0lUFJoi5Lc5da149p90Ids
+hCExroL1+7mryIkXPeFM5TgO9r0rvZaBFOvV2z0gp35Z0+L4WPlbuEjN/lxPFin+
+HlUjr8gRsI3qfJOQFy/9rKIJR0Y/8Omwt/8oTWgy1mdeHmmjk7j1nYsvC9JSQ6Zv
+MldlTTKB3zhThV1+XWYp6rjd5JW1zbVWEkLNxE7GJThEUG3szgBVGP7pSWTUTsqX
+nLRbwHOoq7hHwg==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIFYDCCBEigAwIBAgIQQAF3ITfU6UK47naqPGQKtzANBgkqhkiG9w0BAQsFADA/
+MSQwIgYDVQQKExtEaWdpdGFsIFNpZ25hdHVyZSBUcnVzdCBDby4xFzAVBgNVBAMT
+DkRTVCBSb290IENBIFgzMB4XDTIxMDEyMDE5MTQwM1oXDTI0MDkzMDE4MTQwM1ow
+TzELMAkGA1UEBhMCVVMxKTAnBgNVBAoTIEludGVybmV0IFNlY3VyaXR5IFJlc2Vh
+cmNoIEdyb3VwMRUwEwYDVQQDEwxJU1JHIFJvb3QgWDEwggIiMA0GCSqGSIb3DQEB
+AQUAA4ICDwAwggIKAoICAQCt6CRz9BQ385ueK1coHIe+3LffOJCMbjzmV6B493XC
+ov71am72AE8o295ohmxEk7axY/0UEmu/H9LqMZshftEzPLpI9d1537O4/xLxIZpL
+wYqGcWlKZmZsj348cL+tKSIG8+TA5oCu4kuPt5l+lAOf00eXfJlII1PoOK5PCm+D
+LtFJV4yAdLbaL9A4jXsDcCEbdfIwPPqPrt3aY6vrFk/CjhFLfs8L6P+1dy70sntK
+4EwSJQxwjQMpoOFTJOwT2e4ZvxCzSow/iaNhUd6shweU9GNx7C7ib1uYgeGJXDR5
+bHbvO5BieebbpJovJsXQEOEO3tkQjhb7t/eo98flAgeYjzYIlefiN5YNNnWe+w5y
+sR2bvAP5SQXYgd0FtCrWQemsAXaVCg/Y39W9Eh81LygXbNKYwagJZHduRze6zqxZ
+Xmidf3LWicUGQSk+WT7dJvUkyRGnWqNMQB9GoZm1pzpRboY7nn1ypxIFeFntPlF4
+FQsDj43QLwWyPntKHEtzBRL8xurgUBN8Q5N0s8p0544fAQjQMNRbcTa0B7rBMDBc
+SLeCO5imfWCKoqMpgsy6vYMEG6KDA0Gh1gXxG8K28Kh8hjtGqEgqiNx2mna/H2ql
+PRmP6zjzZN7IKw0KKP/32+IVQtQi0Cdd4Xn+GOdwiK1O5tmLOsbdJ1Fu/7xk9TND
+TwIDAQABo4IBRjCCAUIwDwYDVR0TAQH/BAUwAwEB/zAOBgNVHQ8BAf8EBAMCAQYw
+SwYIKwYBBQUHAQEEPzA9MDsGCCsGAQUFBzAChi9odHRwOi8vYXBwcy5pZGVudHJ1
+c3QuY29tL3Jvb3RzL2RzdHJvb3RjYXgzLnA3YzAfBgNVHSMEGDAWgBTEp7Gkeyxx
++tvhS5B1/8QVYIWJEDBUBgNVHSAETTBLMAgGBmeBDAECATA/BgsrBgEEAYLfEwEB
+ATAwMC4GCCsGAQUFBwIBFiJodHRwOi8vY3BzLnJvb3QteDEubGV0c2VuY3J5cHQu
+b3JnMDwGA1UdHwQ1MDMwMaAvoC2GK2h0dHA6Ly9jcmwuaWRlbnRydXN0LmNvbS9E
+U1RST09UQ0FYM0NSTC5jcmwwHQYDVR0OBBYEFHm0WeZ7tuXkAXOACIjIGlj26Ztu
+MA0GCSqGSIb3DQEBCwUAA4IBAQAKcwBslm7/DlLQrt2M51oGrS+o44+/yQoDFVDC
+5WxCu2+b9LRPwkSICHXM6webFGJueN7sJ7o5XPWioW5WlHAQU7G75K/QosMrAdSW
+9MUgNTP52GE24HGNtLi1qoJFlcDyqSMo59ahy2cI2qBDLKobkx/J3vWraV0T9VuG
+WCLKTVXkcGdtwlfFRjlBz4pYg1htmf5X6DYO8A4jqv2Il9DjXA6USbW1FzXSLr9O
+he8Y4IWS6wY7bCkjCWDcRQJMEhg76fsO3txE+FiYruq9RUWhiF1myv4Q6W+CyBFC
+Dfvp7OOGAN6dEOM4+qR9sdjoSYKEBpsr6GtPAQw4dy753ec5
+-----END CERTIFICATE-----

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

@@ -0,0 +1,38 @@
+{
+	"name": "expensetracker",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev --host",
+		"devs": "vite dev --host --https",
+		"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",
+		"bootstrap": "^5.3.2",
+		"chart.js": "^4.4.0",
+		"email-validator": "^2.0.4",
+		"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/privkey.pem

@@ -0,0 +1,5 @@
+-----BEGIN PRIVATE KEY-----
+MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQg9kCIfgqNqFYgYU0Q
+HGi/jc5nLxhZxoXST5qeXBGtOAehRANCAASKtOgK5W+o2JPdHGqzK7b46YPtNgFb
+4JX3rf05bgWHAdoXHLOgJYjf/DeBk1UT/ljUK/AcCzCp+5qbQuN9uco4
+-----END PRIVATE KEY-----

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="/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/+page.svelte

@@ -0,0 +1,8 @@
+<script>
+    import { onMount } from "svelte";
+
+    onMount(() => {
+        window.location.href = '/auth/login';
+    });
+</script>
+

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,186 @@
+<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('https://trackio.online:8081/api/v1/auth/authenticate', {
+                email: username,
+                password: password,
+            });
+
+            console.log(response.data)
+
+            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>
+
+<svelte:head>
+    <link rel="icon" type="image/x-icon" href="../favicon.png" />
+    <title>Login into Track.IO</title>
+</svelte:head>
+
+<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,234 @@
+<script>
+    // eslint-disable-next-line no-unused-vars
+    import * as EmailValidator from 'email-validator';
+    import {onMount} from "svelte";
+    import {getCookie, setCookie} from "svelte-cookie";
+    import axios from "axios";
+
+    let isErrorVisible = false;
+
+    // eslint-disable-next-line no-unused-vars
+    let username, email, password, name, surname;
+    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 data = {
+                firstname: name,
+                lastname: surname,
+                username: username,
+                email: email,
+                password: password,
+            };
+
+            console.log(data)
+
+            const response = await axios.post('https://trackio.online:8081/api/v1/auth/register', data);
+
+            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);
+        }
+    }
+
+    // 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>
+
+<svelte:head>
+    <link rel="icon" type="image/x-icon" href="../favicon.png" />
+    <title>Register into Track.IO</title>
+</svelte:head>
+
+
+<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="nameInput" type="text" name="name" placeholder="Name" autocomplete="off" on:input={
+                event => {name = event.target.value}
+            }>
+            <input id="surnameInput" type="text" name="surname" placeholder="Surname" autocomplete="off" on:input={
+                event => {surname = 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.value}
+            }>
+            <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: 750px;
+        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,62 @@
+<script>
+    import Dashboard from './board/Dashboard.svelte';
+    import SideMenu from './menu/SideMenu.svelte';
+    import {selectedTab} from "./stores.js";
+    import {globalStyles} from "./styles.js";
+    import StickyMenu from "./menu/StickyMenu.svelte";
+    import {onMount} from "svelte";
+
+    function handleTabClick(tab) {
+        selectedTab.set(tab);
+        // $isCategorizedIncome = false;
+        // $isCategorizedExpense = false;
+    }
+
+    let screenWidth;
+
+    onMount(() => {
+        screenWidth = window.innerWidth;
+        const handleResize = () => {
+            console.log(screenWidth);
+            screenWidth = window.innerWidth;
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    });
+
+</script>
+
+<div id="wrapper" style="background-color: {$globalStyles.mainColor}">
+    {#if screenWidth < 900}
+        <StickyMenu onTabClick={handleTabClick} />
+    {:else}
+        <SideMenu onTabClick={handleTabClick} />
+    {/if}
+    <Dashboard />
+</div>
+
+<style>
+    @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400');
+    @import url('https://fonts.googleapis.com/css?family=Inconsolata');
+
+    #wrapper {
+        padding: 0;
+        font-family: Inconsolata,"Source Sans Pro",sans-serif;
+        margin: 0;
+        display: flex;
+        align-items: stretch;
+        min-height: 100vh;
+        max-height: 100%;
+        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+    }
+
+    @media only screen and (max-width: 900px) {
+        #wrapper {
+            flex-direction: column;
+        }
+    }
+</style>

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

@@ -0,0 +1,80 @@
+<script>
+    import { onMount } from "svelte";
+    import axios from "axios";
+    import { getCookie } from "svelte-cookie";
+
+    let isLoaded = false;
+
+    onMount(async () => {
+        isLoaded = false;
+        isLoaded = true;
+        const token = getCookie('access_token');
+
+        if (token === '') {
+            window.location.href = '/auth/login';
+            return;
+        }
+
+        const config = {
+            headers: {
+                'Authorization': `Bearer ${token}`
+            }
+        };
+
+        try {
+            const response = await axios.get('https://trackio.online:8081/users', config);
+            const userResponse = response.data;
+            userData = userResponse;
+
+        } catch (error) {
+            console.error(error)
+        }
+    });
+</script>
+
+<div class="adminContainer">
+    {#if !isLoaded}
+        <div class="loading-container">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">Loading...</div>
+        </div>
+    {:else}
+        LOL
+    {/if}
+</div>
+
+<style>
+
+    .adminContainer {
+        display: flex;
+        height: 100%;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .loading-container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+    }
+
+    .loading-spinner {
+        border: 8px solid rgba(0, 0, 0, 0.1);
+        border-top: 8px solid #3498db;
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    .loading-text {
+        margin-top: 10px;
+    }
+</style>

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

@@ -0,0 +1,133 @@
+<script>
+        import { getCookie } from "svelte-cookie";
+        import { onMount } from "svelte";
+        import ExpenseDashboard from "./ExpenseDashboard.svelte";
+        import IncomeDashboard from "./IncomeDashboard.svelte";
+        import Settings from "./Settings.svelte";
+        import {
+            incomeData,
+            expenseData,
+            incomeTypes,
+            expenseTypes,
+            selectedTab,
+            monthIncome,
+            monthExpense,
+            tempExpense,
+            tempIncome, copyExpenseData, copyIncomeData,
+            isAdmin, username
+        } from "../stores.js";
+        import {globalStyles} from "../styles.js";
+
+        let componentStyles;
+
+        $: {
+                console.log("got here")
+                componentStyles = $globalStyles;
+        }
+
+        import axios from "axios";
+        import Statistics from "./Statistics.svelte";
+        import AdminPanel from "./AdminPanel.svelte";
+        import Profile from "./Profile.svelte";
+
+        onMount(async () => {
+                const token = getCookie('access_token');
+
+                if (token === '') {
+                        window.location.href = '/auth/login';
+                        return;
+                }
+
+                const config = {
+                        headers: {
+                                'Authorization': `Bearer ${token}`
+                        }
+                };
+
+            try {
+
+                try {
+                    const response = await axios.get('https://trackio.online:8081/users/get-user-data', config);
+                    const data = response.data;
+                    $username = data.username;
+                    $isAdmin = data.userrole === 'ROLE_ADMIN';
+
+                } catch (error) {
+                    console.error('Error:', error);
+                }
+
+                const currentDate = new Date();
+                const currentMonth = currentDate.getMonth() + 1;
+                const [incomeResponse, expenseResponse, incomeTypesResponse, expenseTypesResponse] = await Promise.all([
+                    axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + currentMonth , config),
+                    axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + currentMonth, config),
+                    axios.get('https://trackio.online:8081/incomes/categories', config),
+                    axios.get('https://trackio.online:8081/expenses/categories', config)
+                ]);
+
+                console.log("Data", incomeResponse.data);
+
+                incomeData.set(incomeResponse.data);
+                expenseData.set(expenseResponse.data);
+
+                copyExpenseData.set(expenseResponse.data);
+                copyIncomeData.set(incomeResponse.data);
+
+                incomeTypes.set(incomeTypesResponse.data);
+                expenseTypes.set(expenseTypesResponse.data);
+
+                tempExpense.set(expenseResponse.data);
+                tempIncome.set(incomeResponse.data);
+
+                monthIncome.set(incomeResponse.data);
+                monthExpense.set(expenseResponse.data);
+            } catch (error) {
+                console.error('Error:', error);
+            }
+        });
+</script>
+
+<svelte:head>
+    <link rel="icon" type="image/x-icon" href="../favicon.png" />
+    <title>Track.IO</title>
+</svelte:head>
+
+<div id="dashboard" style="background-color: {componentStyles.dashColor}; color: {componentStyles.color}">
+                {#if $selectedTab === 'expenses'}
+                        <ExpenseDashboard />
+                {:else if $selectedTab === 'incomes'}
+                        <IncomeDashboard />
+                {:else if $selectedTab === 'settings'}
+                        <Settings />
+                {:else if $selectedTab === 'statistics'}
+                        <Statistics />
+                {:else if $selectedTab === 'admin'}
+                        <AdminPanel />
+                {:else if $selectedTab === 'profile'}
+                        <Profile />
+                {/if}
+</div>
+
+<style>
+
+        #dashboard {
+                font-family: 'Source Sans Pro', sans-serif;
+                border-radius: 20px;
+                margin: 20px;
+                min-width: 100px;
+                display: flex;
+                flex: 1 1 auto;
+                flex-direction: column;
+                align-items: stretch;
+                justify-content: stretch;
+                transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+        }
+
+        @media only screen and (max-width: 900px) {
+            #dashboard {
+                margin: 0;
+                flex-wrap: wrap;
+                width: 100%;
+            }
+        }
+</style>

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

@@ -0,0 +1,67 @@
+<script>
+    import DashHeader from "./expenses/other/DashHeader.svelte";
+    import QuickInfobar from "./expenses/other/QuickInfobar.svelte";
+    import Expenses from "./expenses/infolists/Expenses.svelte";
+    import Graph3 from "./expenses/graphs/Graph3.svelte";
+    import Graph2 from "./expenses/graphs/Graph2.svelte";
+</script>
+
+<div class="expenseContainer">
+    <div class="dataHalf">
+        <div>
+            <DashHeader />
+            <QuickInfobar />
+        </div>
+
+        <div class="graphs">
+            <Graph3 />
+            <Graph2 />
+        </div>
+    </div>
+    <Expenses />
+</div>
+
+<style>
+    @media only screen and (max-width: 900px) {
+        .expenseContainer {
+            flex-wrap: wrap;
+            flex: 1 1 auto;
+            width: 100%;
+        }
+
+        .graphs {
+            flex-wrap: wrap;
+        }
+    }
+
+    .graphs {
+        display:flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: stretch;
+        min-width: 0;
+        min-height: 0;
+        height: 100% !important;
+        width: 100% !important;
+        flex: 1 1 auto;
+    }
+    .expenseContainer {
+        display: flex;
+        height: 100%;
+        background-color: #172233;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .dataHalf {
+        display:flex;
+        min-height: 0;
+        min-width: 0;
+        flex-direction: column;
+        flex: 1 1 auto;
+        background-color: #212942;
+        border-radius: 20px;
+        /*padding: 10px;*/
+    }
+</style>
+

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

@@ -0,0 +1,67 @@
+<script>
+    import DashHeader from "./incomes/other/DashHeader.svelte";
+    import QuickInfobar from "./incomes/other/QuickInfobar.svelte";
+    import Incomes from "./incomes/infolists/Incomes.svelte";
+    import Graph3 from "./incomes/graphs/Graph3.svelte";
+    import Graph2 from "./incomes/graphs/Graph2.svelte";
+</script>
+
+<div class="incomeContainer">
+    <div class="dataHalf">
+        <div>
+            <DashHeader />
+            <QuickInfobar />
+        </div>
+
+        <div class="graphs">
+            <Graph3 />
+            <Graph2 />
+        </div>
+    </div>
+    <Incomes />
+</div>
+
+<style>
+    @media only screen and (max-width: 900px) {
+        .incomeContainer {
+            flex-wrap: wrap;
+            flex: 1 1 auto;
+            width: 100%;
+        }
+
+        .graphs {
+            flex-wrap: wrap;
+        }
+    }
+
+    .graphs {
+        display:flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: stretch;
+        min-width: 0;
+        min-height: 0;
+        height: 100% !important;
+        width: 100% !important;
+        flex: 1 1 auto;
+    }
+    .incomeContainer {
+        display: flex;
+        height: 100%;
+        background-color: #172233;
+        flex-direction: row;
+        justify-content: space-between;
+    }
+
+    .dataHalf {
+        display:flex;
+        min-height: 0;
+        min-width: 0;
+        flex-direction: column;
+        flex: 1 1 auto;
+        background-color: #212942;
+        border-radius: 20px;
+        /*padding: 10px;*/
+    }
+</style>
+

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

@@ -0,0 +1 @@
+<h1>PROFILE</h1>

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

@@ -0,0 +1,90 @@
+<script>
+    import {globalStyles} from "../styles.js";
+    import {themeDark} from "../styles.js";
+    import {themeDefault} from "../styles.js";
+    import {themeColorful} from "../styles.js";
+
+    function theme_dark() {
+        $globalStyles = themeDark;
+    }
+
+    function theme_default() {
+        $globalStyles = themeDefault;
+    }
+
+    function theme_colorful() {
+        $globalStyles = themeColorful;
+    }
+</script>
+
+<div style="color: {$globalStyles.dashTextColor}">
+    <h1>Settings</h1>
+    <div id="buttonContainer">
+        <div class="settingEntry">
+            <span><svg style="fill: yellow" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg></span>
+            <h3 class="settingName">Light Mode</h3>
+            <button class="button-32" on:click={() => theme_default()}>Select</button>
+        </div>
+
+        <div class="settingEntry">
+            <span><svg style="fill:darkblue" xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"/></svg></span>
+            <h3 class="settingName">Dark Mode</h3>
+            <button class="button-32" on:click={() => theme_dark()}>Select</button>
+        </div>
+
+        <div class="settingEntry">
+            <span><svg style="fill:pink" xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M160 0a48 48 0 1 1 0 96 48 48 0 1 1 0-96zM88 384H70.2c-10.9 0-18.6-10.7-15.2-21.1L93.3 248.1 59.4 304.5c-9.1 15.1-28.8 20-43.9 10.9s-20-28.8-10.9-43.9l53.6-89.2c20.3-33.7 56.7-54.3 96-54.3h11.6c39.3 0 75.7 20.6 96 54.3l53.6 89.2c9.1 15.1 4.2 34.8-10.9 43.9s-34.8 4.2-43.9-10.9l-33.9-56.3L265 362.9c3.5 10.4-4.3 21.1-15.2 21.1H232v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V384H152v96c0 17.7-14.3 32-32 32s-32-14.3-32-32V384z"/></svg></span>
+            <h3 class="settingName">Pinky Theme</h3>
+            <button class="button-32" on:click={() => theme_colorful()}>Select</button>
+        </div>
+    </div>
+
+</div>
+
+<style>
+    .button-32 {
+        background-color: #fff000;
+        border-radius: 12px;
+        color: #000;
+        cursor: pointer;
+        font-weight: bold;
+        padding: 10px 15px;
+        text-align: center;
+        transition: 200ms;
+        width: 100px;
+        box-sizing: border-box;
+        border: 0;
+        font-size: 16px;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    .button-32:not(:disabled):hover,
+    .button-32:not(:disabled):focus {
+        outline: 0;
+        background: #f4e603;
+        box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
+    }
+
+    .button-32:disabled {
+        filter: saturate(0.2) opacity(0.5);
+        -webkit-filter: saturate(0.2) opacity(0.5);
+        cursor: not-allowed;
+    }
+
+    #buttonContainer {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .settingEntry {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+    }
+
+    .settingName {
+        margin: 20px;
+    }
+</style>

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

@@ -0,0 +1,2 @@
+<h1>ACT LIKE THERE'S A NEURAL NETWORK HERE</h1>
+<h1>IT'S REALLY IN THE WORKS THOUGH</h1>

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

@@ -0,0 +1,133 @@
+<script>
+	import Chart from 'chart.js/auto';
+	import {onMount} from 'svelte';
+	import {monthExpense} from "../../../stores.js";
+	import {globalStyles} from "../../../styles.js";
+
+	let ctx;
+	let chartCanvas;
+	let chart = null;
+
+	function groupAndSumByCategory() {
+		const groupedData = new Map();
+		$monthExpense.forEach(expense => {
+					const category = expense.expenseCategory.name;
+					if (groupedData.has(category)) {
+						groupedData.set(category, groupedData.get(category) + parseInt(expense.amount));
+					} else {
+						groupedData.set(category, parseInt(expense.amount));
+					}
+				}
+		);
+
+		return new Map([...groupedData.entries()].sort());
+	}
+
+	function createGraph() {
+		try {
+			const groupedExpenseData = groupAndSumByCategory();
+
+			const chartLabels = [];
+			const chartValues = [];
+
+			for (const [label, value] of groupedExpenseData.entries()) {
+				chartLabels.push(label);
+				chartValues.push(value);
+			}
+
+			ctx = chartCanvas.getContext('2d');
+
+			if (!chart) {
+				chart = new Chart(ctx, {
+					type: 'doughnut',
+					data: {
+						labels: chartLabels,
+						datasets: [{
+							label: 'Spendings',
+							data: chartValues
+						}]
+					},
+					options: {
+						responsive: true,
+						maintainAspectRatio: false,
+						backgroundColor: [
+							'rgb(255, 140, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(255, 200, 140)',
+							'rgb(160, 200, 160)',
+							'rgb(160, 130, 200)',
+							'rgb(255, 160, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(160, 255, 160)',
+							'rgb(255, 140, 120)',
+							'rgb(160, 140, 200)',
+							'rgb(255, 220, 140)',
+							'rgb(140, 255, 255)',
+							'rgb(255, 160, 140)',
+							'rgb(160, 255, 160)',
+							'rgb(160, 160, 255)'
+						],
+						plugins: {
+							legend: {
+								position: 'bottom',
+								align: 'start',
+								fullWidth: false,
+								labels: {
+									font: {
+										weight: 'bold'
+									},
+									color: '#fff'
+								}
+							}
+						}
+					}
+				});
+			} else {
+				chart.data.labels = chartLabels;
+				chart.data.datasets[0].data = chartValues;
+				chart.update();
+			}
+		} catch (error) {
+			console.error('Error:', error);
+		}
+	}
+
+	$: {
+		if ($monthExpense) {
+			createGraph();
+		}
+	}
+
+	onMount(() => {
+		createGraph();
+	});
+</script>
+
+<div id="chart" style="background-color: {$globalStyles.mainColor}">
+	<canvas bind:this={chartCanvas}></canvas>
+</div>
+
+<style>
+	#chart {
+		min-width: 0;
+		min-height:0;
+		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);
+		display: flex;
+		flex: 1 1 auto;
+		flex-grow: 1;
+		padding: 10px;
+		border-radius: 10px;
+		margin: 0 10px 10px;
+	}
+
+	#chart:hover {
+		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
+	}
+</style>

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

@@ -0,0 +1,156 @@
+<script>
+	import Chart from 'chart.js/auto';
+	import { onMount } from 'svelte';
+	import {monthIncome, monthExpense, isCategorizedExpense, categorizedExpense, expenseCategoryLabel} from "../../../stores.js";
+	import { globalStyles } from "../../../styles.js";
+
+	let ctx;
+	let chartCanvas;
+	let chart = null;
+
+	let generatedData;
+
+	function createGraph() {
+		try {
+			if (chartCanvas.getContext('2d') !== undefined) {
+				ctx = chartCanvas.getContext('2d');
+				if (!chart) {
+					console.log(generatedData);
+					chart = new Chart(ctx, {
+						type: 'line',
+						data: generatedData,
+						options: {
+							scales: {
+								y: {
+									ticks: {
+										color: 'rgb(255,255,255)'
+									}
+								},
+								x: {
+									ticks: {
+										color: 'rgb(255,255,255)'
+									}
+								}
+							},
+							responsive: true,
+							maintainAspectRatio: false
+						}
+					});
+				} else {
+					if ($isCategorizedExpense === true) {
+						chart.data.labels = generatedData.labels;
+						chart.data.datasets = generatedData.datasets;
+					} else {
+						generatedData.datasets = generatedData.datasets.filter(dataset => dataset.label !== $expenseCategoryLabel);
+						chart.data.labels = generatedData.labels;
+						chart.data.datasets = generatedData.datasets;
+					}
+					chart.update();
+				}
+			}
+		} catch (error) {
+			console.error('Error:', error);
+		}
+	}
+
+	$: {
+		if (isCategorizedExpense) {
+			const allDates = [...new Set([...$monthExpense, ...$categorizedExpense].map(item => item.date))];
+			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
+
+			const categorizedValues = uniqueDates.map(date => $categorizedExpense.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+			const expenseValues = uniqueDates.map(date => $monthExpense.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+
+			generatedData = {
+				labels: uniqueDates,
+				datasets: [
+					{
+						label: $expenseCategoryLabel,
+						backgroundColor: "rgba(21, 194, 58, 0.4)",
+						borderColor: "rgba(21, 194, 58, 1)",
+						data: categorizedValues,
+						tension: 0.2,
+						fill: true
+					},
+					{
+						label: "Expense",
+						backgroundColor: "rgba(194, 21, 96, 0.4)",
+						borderColor: "rgba(194, 21, 96, 1)",
+						data: expenseValues,
+						tension: 0.4,
+						fill: true
+					}
+				]
+			};
+
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
+		} else {
+			const allDates = [...new Set([...$monthExpense].map(item => item.date))];
+			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
+
+			const expenseValues = uniqueDates.map(date => $monthExpense.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+
+			generatedData = {
+				labels: uniqueDates,
+				datasets:
+						{
+							label: "Expense",
+							backgroundColor: "rgba(194, 21, 96, 0.4)",
+							borderColor: "rgba(194, 21, 96, 1)",
+							data: expenseValues,
+							tension: 0.4,
+							fill: true
+						}
+			};
+
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
+		}
+
+		if ($monthIncome || $monthExpense || $isCategorizedExpense || $categorizedExpense) {
+			createGraph();
+		}
+	}
+
+	onMount(() => {
+		createGraph();
+	});
+</script>
+
+<div id="chart" style="background-color: {$globalStyles.mainColor}">
+	<canvas id="canvas" bind:this={chartCanvas}></canvas>
+</div>
+
+<style>
+	#chart {
+		min-width: 0;
+		min-height:0;
+		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);
+		display: flex;
+		flex: 1 1 auto;
+		flex-grow: 2;
+		border-radius: 10px;
+		margin: 0 10px 10px;
+		padding: 10px;
+	}
+
+	#chart:hover {
+		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
+	}
+</style>

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

@@ -0,0 +1,222 @@
+<script>
+    import { writable } from 'svelte/store';
+    import axios from 'axios';
+    import { getCookie } from "svelte-cookie";
+    import {expenseTypes, expenseData, dateText} from "../../../stores.js";
+    import { slide } from 'svelte/transition';
+
+    let showModal = false;
+    let amount = '';
+    let newData;
+
+    const selectedExpenseId = writable('');
+
+    function addNewExpense(expid, id, amount) {
+        const today = new Date().toISOString().split('T')[0];
+        const expenseCategory = $expenseTypes.find(incomeType => incomeType.id === id);
+
+        if (expenseCategory) {
+            const newExpense = {
+                expenseId: expid,
+                expenseCategory: expenseCategory,
+                date: today,
+                amount: parseInt(amount)
+            };
+
+            newData = $expenseData;
+            newData.push(newExpense);
+            $expenseData = newData;
+        } else {
+            console.error('Expense category not found for id:', id);
+        }
+    }
+
+    const createExpense = async () => {
+        showModal = false;
+        const selectedExpense = $expenseTypes.find(expense => expense.id === $selectedExpenseId);
+        const data = {
+            expenseCategory: selectedExpense.id,
+            amount: parseInt(amount),
+        };
+
+        try {
+            const token = getCookie('access_token');
+
+            const response = await axios.post('https://trackio.online:8081/expenses', data, {
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            if (response.status === 201) {
+                addNewExpense(response.data.expenseId, selectedExpense.id, parseInt(amount));
+            } else {
+                console.error('Error:', response.status);
+            }
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    };
+
+    function toggleModal() {
+        showModal = !showModal;
+    }
+</script>
+
+<div id="exp">
+    <div id="optionField">
+        <h2>Expenses: {$dateText}</h2>
+        <div id="openModal" class="plus-button" role="button" tabindex="0" on:click={toggleModal} on:keydown={() => console.log("keydown")}>
+            +
+        </div>
+    </div>
+        {#if showModal}
+        <div class="expense-form" transition:slide>
+            <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>
+
+            <div style="display: flex; justify-content: space-around">
+                <button class="btn btn-primary" on:click={createExpense}>SUBMIT</button>
+                <button class="btn btn-primary" on:click={() => showModal = false}>CANCEL</button>
+            </div>
+
+        </div>
+    {/if}
+</div>
+
+
+<style>
+    #exp {
+        padding: 10px 20px;
+        text-align: center;
+    }
+
+    button {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    button:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    #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;
+        color: black;
+    }
+
+    input[type=text] {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+
+    select {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 16px;
+    }
+
+    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/expenses/infolists/Expenses.svelte

@@ -0,0 +1,712 @@
+<script>
+    import ContentExpense from "./ContentExpense.svelte";
+    import {
+        dateText,
+        expenseData,
+        expenseTypes,
+        incomeData,
+        tempExpense,
+        tempIncome,
+        monthIncome,
+        monthExpense,
+        isCategorizedExpense,
+        categorizedExpense,
+        expenseCategoryLabel,
+        currencyLabel, copyExpenseData, copyIncomeData, isCategorizedIncome
+    } from "../../../stores.js";
+    import {globalStyles} from "../../../styles.js";
+    import {onMount} from "svelte";
+    import axios from "axios";
+    import {getCookie} from "svelte-cookie";
+    import {slide} from 'svelte/transition'
+    import EditEntry from "../util/EditEntry.svelte";
+
+    const textToIcon = {
+        'Groceries': "<svg fill=\"#299146\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>",
+        'Utilities': "<svg fill=\"#8f0611\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M176 88v40H336V88c0-4.4-3.6-8-8-8H184c-4.4 0-8 3.6-8 8zm-48 40V88c0-30.9 25.1-56 56-56H328c30.9 0 56 25.1 56 56v40h28.1c12.7 0 24.9 5.1 33.9 14.1l51.9 51.9c9 9 14.1 21.2 14.1 33.9V304H384V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H192V288c0-17.7-14.3-32-32-32s-32 14.3-32 32v16H0V227.9c0-12.7 5.1-24.9 14.1-33.9l51.9-51.9c9-9 21.2-14.1 33.9-14.1H128zM0 416V336H128v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H320v16c0 17.7 14.3 32 32 32s32-14.3 32-32V336H512v80c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64z\"/></svg>",
+        'Rent': "<svg fill=\"#386907\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z\"/></svg>",
+        'Transportation': "<svg fill=\"#027874\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"/></svg>",
+        'Education': "<svg fill=\"#091094\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M337.8 5.4C327-1.8 313-1.8 302.2 5.4L166.3 96H48C21.5 96 0 117.5 0 144V464c0 26.5 21.5 48 48 48H256V416c0-35.3 28.7-64 64-64s64 28.7 64 64v96H592c26.5 0 48-21.5 48-48V144c0-26.5-21.5-48-48-48H473.7L337.8 5.4zM96 192h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V208c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V208zM96 320h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V336c0-8.8 7.2-16 16-16zm400 16c0-8.8 7.2-16 16-16h32c8.8 0 16 7.2 16 16v64c0 8.8-7.2 16-16 16H512c-8.8 0-16-7.2-16-16V336zM232 176a88 88 0 1 1 176 0 88 88 0 1 1 -176 0zm88-48c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H336V144c0-8.8-7.2-16-16-16z\"/></svg>",
+        'Restaurants & Cafes': "<svg fill=\"#961115\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 192c0-35.3 28.7-64 64-64c.5 0 1.1 0 1.6 0C73 91.5 105.3 64 144 64c15 0 29 4.1 40.9 11.2C198.2 49.6 225.1 32 256 32s57.8 17.6 71.1 43.2C339 68.1 353 64 368 64c38.7 0 71 27.5 78.4 64c.5 0 1.1 0 1.6 0c35.3 0 64 28.7 64 64c0 11.7-3.1 22.6-8.6 32H8.6C3.1 214.6 0 203.7 0 192zm0 91.4C0 268.3 12.3 256 27.4 256H484.6c15.1 0 27.4 12.3 27.4 27.4c0 70.5-44.4 130.7-106.7 154.1L403.5 452c-2 16-15.6 28-31.8 28H140.2c-16.1 0-29.8-12-31.8-28l-1.8-14.4C44.4 414.1 0 353.9 0 283.4z\"/></svg>",
+        'Home Maintenance': "<svg fill=\"#386907\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z\"/></svg>",
+        'Transport': "<svg fill=\"#027874\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M135.2 117.4L109.1 192H402.9l-26.1-74.6C372.3 104.6 360.2 96 346.6 96H165.4c-13.6 0-25.7 8.6-30.2 21.4zM39.6 196.8L74.8 96.3C88.3 57.8 124.6 32 165.4 32H346.6c40.8 0 77.1 25.8 90.6 64.3l35.2 100.5c23.2 9.6 39.6 32.5 39.6 59.2V400v48c0 17.7-14.3 32-32 32H448c-17.7 0-32-14.3-32-32V400H96v48c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V400 256c0-26.7 16.4-49.6 39.6-59.2zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"/></svg>",
+        'Shopping': "<svg fill=\"#2b26ad\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z\"/></svg>",
+        'Miscellaneous': "<svg fill=\"#299146\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V160H352c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96h32V64c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V416H352c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8h32V320c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z\"/></svg>",
+        'Charity': "<svg fill=\"#961189\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M163.9 136.9c-29.4-29.8-29.4-78.2 0-108s77-29.8 106.4 0l17.7 18 17.7-18c29.4-29.8 77-29.8 106.4 0s29.4 78.2 0 108L310.5 240.1c-6.2 6.3-14.3 9.4-22.5 9.4s-16.3-3.1-22.5-9.4L163.9 136.9zM568.2 336.3c13.1 17.8 9.3 42.8-8.5 55.9L433.1 485.5c-23.4 17.2-51.6 26.5-80.7 26.5H192 32c-17.7 0-32-14.3-32-32V416c0-17.7 14.3-32 32-32H68.8l44.9-36c22.7-18.2 50.9-28 80-28H272h16 64c17.7 0 32 14.3 32 32s-14.3 32-32 32H288 272c-8.8 0-16 7.2-16 16s7.2 16 16 16H392.6l119.7-88.2c17.8-13.1 42.8-9.3 55.9 8.5zM193.6 384l0 0-.9 0c.3 0 .6 0 .9 0z\"/></svg>",
+        'Legal Services': "<svg fill=\"#916129\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M318.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-120 120c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l4-4L325.4 293.4l-4 4c-12.5 12.5-12.5 32.8 0 45.3l16 16c12.5 12.5 32.8 12.5 45.3 0l120-120c12.5-12.5 12.5-32.8 0-45.3l-16-16c-12.5-12.5-32.8-12.5-45.3 0l-4 4L330.6 74.6l4-4c12.5-12.5 12.5-32.8 0-45.3l-16-16zm-152 288c-12.5-12.5-32.8-12.5-45.3 0l-112 112c-12.5 12.5-12.5 32.8 0 45.3l48 48c12.5 12.5 32.8 12.5 45.3 0l112-112c12.5-12.5 12.5-32.8 0-45.3l-1.4-1.4L272 285.3 226.7 240 168 298.7l-1.4-1.4z\"/></svg>"
+    };
+
+    let isDateDropdownExpanded = false
+    let isCategoryDropdownExpanded = false
+    let isCurrencyDropdownExpanded = false
+    let isFilterDown = false;
+
+    let dropdownStates = {};
+    let deleteDropdownStates = {}
+
+    $: {
+        dropdownStates = {};
+        deleteDropdownStates = {};
+        $expenseData.toReversed().forEach(data => {
+            dropdownStates[data.expenseId] = false;
+            deleteDropdownStates[data.expenseId] = false;
+        });
+    }
+
+    function clickFilter() {
+        isDateDropdownExpanded = false;
+        isCategoryDropdownExpanded = false;
+        isFilterDown = !isFilterDown;
+        isCurrencyDropdownExpanded = false;
+    }
+    function clickHandlerDate() {
+        isDateDropdownExpanded = !isDateDropdownExpanded
+        isCategoryDropdownExpanded = false;
+    }
+
+    function clickHandlerCategory() {
+        isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
+        isDateDropdownExpanded = false;
+    }
+
+    function clickHandlerCurrency() {
+        isCurrencyDropdownExpanded = !isCurrencyDropdownExpanded;
+        isCategoryDropdownExpanded = false;
+        isDateDropdownExpanded = false;
+        isFilterDown = false;
+    }
+
+    function clickItemHandler(id) {
+        dropdownStates[id] = !dropdownStates[id];
+        if (deleteDropdownStates[id] === true) deleteDropdownStates[id] = false;
+    }
+
+    function clickDeleteHandler(id) {
+        deleteDropdownStates[id] = !deleteDropdownStates[id];
+        if (dropdownStates[id] === true) dropdownStates[id] = false;
+    }
+
+    function clickOutsideHandler(event) {
+        const isDateButton = event.target.closest("#expenseInfo");
+
+        if (!isDateButton) {
+            isFilterDown = false;
+            isCategoryDropdownExpanded = false;
+            isDateDropdownExpanded = false;
+            isCurrencyDropdownExpanded = false;
+        }
+    }
+
+    onMount(() => {
+        document.body.addEventListener("click", clickOutsideHandler);
+        return () => {
+            document.body.removeEventListener("click", clickOutsideHandler);
+        };
+    });
+
+    async function getToday() {
+        const currentDate = new Date();
+        const currentDay = currentDate.toISOString().split('T')[0];
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            copyIncomeData.set(response1.data);
+            $dateText = "Today"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getYesterday() {
+        const currentDate = new Date();
+
+        const yesterday = new Date(currentDate);
+        yesterday.setDate(currentDate.getDate() - 1);
+
+        const yesterdayString = yesterday.toISOString().split('T')[0];
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + yesterdayString, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "Yesterday"
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getMonth() {
+        const currentDate = new Date();
+        const year = currentDate.getMonth() + 1;
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "This Month"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastMonth() {
+        const currentDate = new Date();
+        const year = currentDate.getMonth();
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data)
+            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "Last Month"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastYear() {
+        const currentDate = new Date();
+        const year = currentDate.getFullYear();
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?year=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "This Year"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    function filterByCategory(category) {
+        $isCategorizedExpense = true;
+        $expenseCategoryLabel = category;
+        console.log($isCategorizedExpense);
+        let tempArr = $tempExpense.filter(expense => expense.expenseCategory.name === category);
+        categorizedExpense.set(tempArr);
+        expenseData.set(tempArr);
+    }
+
+    function getAll() {
+        categorizedExpense.set([]);
+        $expenseCategoryLabel = "Category";
+        $isCategorizedExpense = false;
+        console.log($isCategorizedExpense);
+        expenseData.set($tempExpense);
+    }
+
+    function doNothing() {
+
+    }
+
+    function changeCurrency(currency) {
+        if (currency === 'USD') {
+            expenseData.set($copyExpenseData);
+            incomeData.set($copyIncomeData);
+            $currencyLabel = "USD";
+        }
+        if (currency === 'MDL') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 0.056
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 0.056
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "MDL";
+        }
+        if (currency === 'EUR') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.08
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.08
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "EUR";
+        }
+
+        if (currency === 'GBP') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.26
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.26
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "GBP";
+        }
+    }
+</script>
+
+<div id="expenseInfo" style="background-color: {$globalStyles.mainColor}">
+    <ContentExpense />
+    <div style="display: flex; justify-content: space-around">
+
+        <div id="dropdown" style="margin: 10px; display: flex; justify-content: space-between">
+            <button id="btn1" class="button" on:click={clickFilter}>Filter ▼</button>
+        </div>
+
+        <div id="dropdown-currency" style="margin: 10px;">
+            <button id="btn2" class="button" on:click={clickHandlerCurrency}>Currency ▼</button>
+        </div>
+    </div>
+
+    <div>
+        {#if isFilterDown}
+            <div style="margin: 10px; display: flex; justify-content: space-between" transition:slide>
+                <div id="dropdown-date" style="margin: 10px;">
+                    <button id="btn3" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button></div>
+
+                <div id="dropdown-category" style="margin: 10px;">
+                    <button id="btn4" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
+                </div>
+            </div>
+        {/if}
+
+        {#if isDateDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => getToday()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Today
+                </div>
+                <div class="date-entry" on:click={() => getYesterday()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Yesterday
+                </div>
+                <div class="date-entry" on:click={() => getMonth()} role="button" tabindex="0"
+                     on:keydown={doNothing}>This month
+                </div>
+                <div class="date-entry" on:click={() => getLastMonth()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Last month
+                </div>
+                <div class="date-entry" on:click={() => getLastYear()} role="button" tabindex="0"
+                     on:keydown={doNothing}>This year
+                </div>
+            </div>
+        {/if}
+
+        {#if isCategoryDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => getAll()} role="button"
+                     tabindex="0" on:keydown={doNothing}>All</div>
+                {#each $expenseTypes as expense (expense.id)}
+                    {#if expense.id !== undefined}
+                        <div class="date-entry" on:click={() => filterByCategory(expense.name)} role="button"
+                             tabindex="0" on:keydown={doNothing}>{expense.name}</div>
+                    {/if}
+                {/each}
+            </div>
+        {/if}
+
+        {#if isCurrencyDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => changeCurrency("MDL")} role="button"
+                     tabindex="0" on:keydown={doNothing}>MDL Leu</div>
+                <div class="date-entry" on:click={() => changeCurrency("GBP")} role="button"
+                     tabindex="0" on:keydown={doNothing}>GBP Pound</div>
+                <div class="date-entry" on:click={() => changeCurrency("USD")} role="button"
+                     tabindex="0" on:keydown={doNothing}>USD Dollar</div>
+                <div class="date-entry" on:click={() => changeCurrency("EUR")} role="button"
+                     tabindex="0" on:keydown={doNothing}>EUR Euro</div>
+            </div>
+        {/if}
+    </div>
+    <div id="listContainer" style="color: {$globalStyles.color}">
+        <ul>
+            {#each $expenseData.toReversed() as item (item.expenseId)}
+                <li style="display:flex; flex-direction: column; justify-content: space-between; color: {$globalStyles.color}">
+                    <div style="display:flex; flex-direction: row; justify-content: space-between; align-items: center;">
+                    <div>
+                        {#if textToIcon[item.expenseCategory.name]}
+                        {@html textToIcon[item.expenseCategory.name]}
+                    {/if}
+                        <span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
+                    <span style="font-weight:bold; margin-right: 10px; color: red; font-size: larger">{item.incomeCategory ? `+${item.amount.toFixed(2)} ${$currencyLabel}` : `-${item.amount.toFixed(2)} ${$currencyLabel}`}</span>
+                    </div>
+                        <div style="margin-right: 5px; display: flex; flex-direction: row">
+
+                            <div>
+                                {`${item.date}`}
+                            </div>
+
+                            <div id="editBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickItemHandler(item.expenseId)}>
+                                <span id="editBtn"><svg
+                                        xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path
+                                        d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg></span>
+                            </div>
+
+                            <div id="deleteBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickDeleteHandler(item.expenseId)}>
+                                <span id="deleteBtn"><svg
+                                        xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path
+                                        d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg></span>
+                            </div>
+                            </div>
+                    </div>
+
+                    {#if dropdownStates[item.expenseId]}
+                        <EditEntry {item} bind:isOn={dropdownStates[item.expenseId]}/>
+                    {/if}
+
+                    {#if deleteDropdownStates[item.expenseId]}
+                        <div style="padding: 5px; margin-top: 5px; display:flex; flex-direction: column; justify-content: space-evenly"
+                             class="inputForm" transition:slide>
+                            <span id="textf" style="text-align: center; margin-bottom: 10px">Confirm deletion?</span>
+                            <div style="display:flex; flex-direction: row; justify-content: space-evenly">
+                                <button id="confirmBtn">CONFIRM</button>
+                                <button id="cancelBtn">CANCEL</button>
+                            </div>
+
+                            <!--                            <button style="background-color: #8BD17C" on:click={() => console.log("LOL")}>Delete</button>-->
+                            <!--                            <button style="background-color: palevioletred" on:click={clickItemHandler(item.expenseId)}>Cancel</button>-->
+                        </div>
+                    {/if}
+
+                </li>
+            {/each}
+        </ul>
+    </div>
+</div>
+
+<style>
+
+    #textf {
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 20px;
+        font-weight: 500;
+    }
+
+    #confirmBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #confirmBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    #cancelBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #cancelBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    @media only screen and (max-width: 900px) {
+        #listContainer {
+            max-height: 50vh;
+            width: 100%;
+        }
+
+        #expenseInfo {
+            margin: 0;
+            width: 100%;
+        }
+    }
+
+    #editBtn {
+        margin-left: 10px;
+        margin-right: 5px;
+        fill: darkblue;
+    }
+
+    .inputForm {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10px;
+    }
+
+    #editBtn:hover {
+        cursor: pointer;
+        fill: lightseagreen;
+    }
+
+    #deleteBtn {
+        fill: red;
+        margin-left: 5px;
+    }
+
+    #deleteBtn:hover {
+        cursor: pointer;
+        fill: palevioletred;
+    }
+
+    #expenseInfo {
+        min-width: 350px;
+        min-height: 0;
+        background-color: #212942;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+    }
+
+    #listContainer {
+        flex: 1 1 auto;
+        overflow-y: auto;
+        min-height: 0;
+        padding: 0 10px 10px;
+        /*margin: 0 0 10px;*/
+        box-sizing: border-box;
+        border-radius: 0 0 10px 10px;
+    }
+
+    ::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+
+    #listContainer ul {
+        list-style: none;
+        padding: 0;
+        border-radius: 0 0 10px 10px;
+    }
+
+    #listContainer 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);
+    }
+
+    #listContainer li:hover {
+        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    }
+
+    .button {
+        align-items: center;
+        background-color: #0A66C2;
+        border: 0;
+        border-radius: 100px;
+        box-sizing: border-box;
+        color: #ffffff;
+        cursor: pointer;
+        display: inline-flex;
+        font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
+        font-size: 16px;
+        font-weight: 600;
+        justify-content: center;
+        line-height: 20px;
+        max-width: 480px;
+        min-height: 40px;
+        min-width: 0;
+        overflow: hidden;
+        padding: 0 20px;
+        text-align: center;
+        touch-action: manipulation;
+        transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+        user-select: none;
+        -webkit-user-select: none;
+        vertical-align: middle;
+    }
+
+    .button:hover,
+    .button:focus {
+        background-color: #16437E;
+        color: #ffffff;
+    }
+
+    .button:active {
+        background: #09223b;
+        color: rgb(255, 255, 255, .7);
+    }
+
+    .button:disabled {
+        cursor: not-allowed;
+        background: rgba(0, 0, 0, .08);
+        color: rgba(0, 0, 0, .3);
+    }
+
+    #date-list {
+        background-color: black;
+        margin: 0 20px 20px;
+        max-height: 400px;
+        overflow-y: scroll;
+        border-radius: 20px;
+    }
+
+    .date-entry {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .3s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+        margin: 10px;
+    }
+
+    .date-entry:hover {
+        box-shadow: rgba(255, 255, 255, 0.8) 0 0 20px;
+    }
+</style>

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

@@ -0,0 +1,61 @@
+<script>
+
+import {globalStyles} from "../../../styles.js";
+</script>
+
+<div id="header">
+    <div id="dashboardTitleWrapper" style="color: white">
+        <h1 id="dashboardTitle">Dashboard - Expenses</h1>
+    </div>
+
+    <div id="icons">
+        <div class="headerbtn searchButton">
+            <svg style="fill: white" 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 style="fill: white" 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 20px 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/expenses/other/QuickInfobar.svelte

@@ -0,0 +1,140 @@
+<script>
+    import { onMount } from 'svelte';
+    import { incomeData, expenseData, currencyLabel } from "../../../stores.js";
+    import {globalStyles} from "../../../styles.js";
+
+    let infobar1, infobar2, infobar3, infobar4;
+    let totalExpenses = 0;
+    let totalIncomes = 0;
+    let lastMonthIncome = 800;
+    let lastMonthExpense = 200;
+    let incomeDifference;
+    let expenseDifference;
+
+    function updateInfo() {
+        totalExpenses = $expenseData.reduce((total, item) => total + parseInt(item.amount), 0);
+        totalIncomes = $incomeData.reduce((total, item) => total + parseInt(item.amount), 0);
+
+        incomeDifference = ((totalIncomes - lastMonthIncome) / lastMonthIncome) * 100;
+        expenseDifference = ((lastMonthExpense - totalExpenses) / lastMonthExpense) * 100;
+    }
+
+    $: {
+        if ($currencyLabel) {
+            if ($currencyLabel === 'USD') {
+                lastMonthIncome = 800;
+                lastMonthExpense = 200;
+            }
+
+            if ($currencyLabel === 'MDL') {
+                lastMonthIncome = 800 / 0.056;
+                lastMonthExpense = 200 / 0.056;
+            }
+
+            if ($currencyLabel === 'EUR') {
+                lastMonthIncome = 800 / 1.08;
+                lastMonthExpense = 200 / 1.08;
+            }
+
+            if ($currencyLabel === 'GBP') {
+                lastMonthIncome = 800 / 1.26;
+                lastMonthExpense = 200 / 1.26;
+            }
+        }
+
+        if ($incomeData || $expenseData) {
+            updateInfo();
+        }
+
+
+    }
+
+    onMount(() => {
+        updateInfo();
+    });
+</script>
+
+<div id="quickInfobar">
+    <div class="firstTwo">
+        <div class="infobarElement" bind:this={infobar1} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Total expenses:</span><br><span class="dataSpan" style="color:#ab1a3c">{totalExpenses.toFixed(2)} {$currencyLabel}</span>
+        </div>
+        <div class="infobarElement" bind:this={infobar2} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Total incomes:</span><br><span class="dataSpan" style="color:#38cc1b">{totalIncomes.toFixed(2)} {$currencyLabel}</span>
+        </div>
+    </div>
+
+    <div class="secondTwo">
+        <div class="infobarElement" bind:this={infobar3} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Income by last month:</span><br><span class="dataSpan" style="color:#2763db">{incomeDifference.toFixed(2)}%</span>
+        </div>
+        <div class="infobarElement" bind:this={infobar4} style="background-color: {$globalStyles.mainColor}">
+            <span class="infobarSpan">Expense by last month:</span><br><span class="dataSpan" style="color:#dba527">{expenseDifference.toFixed(2)}%</span>
+        </div>
+    </div>
+
+</div>
+
+<style>
+
+    .firstTwo {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .secondTwo {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+
+    .infobarSpan {
+        font-size: larger;
+        color: #00FEFC
+    }
+
+    .dataSpan {
+        color:#ab1a3c;
+        font-size: xxx-large;
+    }
+
+    #quickInfobar {
+        /*display: flex;*/
+        /*justify-content: space-between;*/
+        /*flex-wrap: wrap;*/
+        min-height: 0;
+        flex: 1 1 auto;
+        margin: 20px;
+    }
+
+    @media only screen and (min-width: 768px) and (max-width: 1200px) {
+        .infobarSpan {
+            font-size: medium;
+        }
+
+        .dataSpan {
+            font-size: large;
+        }
+    }
+
+    .infobarElement {
+        font-family: Inconsolata,"Source Sans Pro",sans-serif;
+        font-size: larger;
+        margin: 10px;
+        min-width: 0;
+        min-height: 0;
+        flex: 1 1 auto;
+        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/board/expenses/util/EditEntry.svelte

@@ -0,0 +1,114 @@
+<script>
+    import {expenseTypes} from "../../../stores.js";
+    import { slide } from 'svelte/transition'
+    export let item;
+    export let isOn;
+
+    function handleSave() {
+        const amount = document.getElementById('amountInput').value;
+        const expenseCategory = document.getElementById('expenseCategory').value;
+
+        console.log("tryna save: " + item.expenseId + " " + amount + " " + expenseCategory)
+        // saveFunction(item.expenseId, amount, expenseCategory);
+    }
+</script>
+
+<div style="display: flex; flex-direction: column" transition:slide>
+    <span id="textf" style="margin-top: 10px; text-align: center">Edit Entry</span>
+    <input type="text" id="amountInput" bind:value={item.amount}>
+    <select id="expenseCategory" class="form-control">
+        {#each $expenseTypes as expense (expense.id)}
+            {#if expense.id !== undefined}
+                {#if expense.id === item.expenseCategory.id}
+                    <option value={expense.id} selected>{expense.name}</option>
+                {:else}
+                    <option value={expense.id}>{expense.name}</option>
+                {/if}
+            {/if}
+        {/each}
+    </select>
+    <div style="margin: 10px; display:flex; flex-direction: row; justify-content: space-evenly">
+        <button class="buttonCL" id="saveBtn" on:click={handleSave}>SAVE</button>
+        <button class="buttonCL" id="cancelBtn" on:click={() => isOn = false}>CANCEL</button>
+    </div>
+</div>
+
+<style>
+
+    #textf {
+        font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+        font-size: 20px;
+        font-weight: 500;
+    }
+
+    input[type=text] {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+
+    select {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 16px;
+    }
+
+    #saveBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #saveBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    #cancelBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #cancelBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+</style>

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

@@ -0,0 +1,133 @@
+<script>
+	import Chart from 'chart.js/auto';
+	import {onMount} from 'svelte';
+	import {monthIncome} from "../../../stores.js";
+	import {globalStyles} from "../../../styles.js";
+
+	let ctx;
+	let chartCanvas;
+	let chart = null;
+
+	function groupAndSumByCategory() {
+		const groupedData = new Map();
+		$monthIncome.forEach(income => {
+					const category = income.incomeCategory.name;
+					if (groupedData.has(category)) {
+						groupedData.set(category, groupedData.get(category) + parseInt(income.amount));
+					} else {
+						groupedData.set(category, parseInt(income.amount));
+					}
+				}
+		);
+
+		return new Map([...groupedData.entries()].sort());
+	}
+
+	function createGraph() {
+		try {
+			const groupedIncomeData = groupAndSumByCategory();
+
+			const chartLabels = [];
+			const chartValues = [];
+
+			for (const [label, value] of groupedIncomeData.entries()) {
+				chartLabels.push(label);
+				chartValues.push(value);
+			}
+
+			ctx = chartCanvas.getContext('2d');
+
+			if (!chart) {
+				chart = new Chart(ctx, {
+					type: 'doughnut',
+					data: {
+						labels: chartLabels,
+						datasets: [{
+							label: 'Incomes',
+							data: chartValues
+						}]
+					},
+					options: {
+						responsive: true,
+						maintainAspectRatio: false,
+						backgroundColor: [
+							'rgb(255, 140, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(255, 200, 140)',
+							'rgb(160, 200, 160)',
+							'rgb(160, 130, 200)',
+							'rgb(255, 160, 140)',
+							'rgb(140, 180, 255)',
+							'rgb(160, 255, 160)',
+							'rgb(255, 140, 120)',
+							'rgb(160, 140, 200)',
+							'rgb(255, 220, 140)',
+							'rgb(140, 255, 255)',
+							'rgb(255, 160, 140)',
+							'rgb(160, 255, 160)',
+							'rgb(160, 160, 255)'
+						],
+						plugins: {
+							legend: {
+								position: 'bottom',
+								align: 'start',
+								fullWidth: false,
+								labels: {
+									font: {
+										weight: 'bold'
+									},
+									color: '#fff'
+								}
+							}
+						}
+					}
+				});
+			} else {
+				chart.data.labels = chartLabels;
+				chart.data.datasets[0].data = chartValues;
+				chart.update();
+			}
+		} catch (error) {
+			console.error('Error:', error);
+		}
+	}
+
+	$: {
+		if ($monthIncome) {
+			createGraph();
+		}
+	}
+
+	onMount(() => {
+		createGraph();
+	});
+</script>
+
+<div id="chart" style="background-color: {$globalStyles.mainColor}">
+	<canvas bind:this={chartCanvas}></canvas>
+</div>
+
+<style>
+	#chart {
+		min-width: 0;
+		min-height:0;
+		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);
+		display: flex;
+		flex: 1 1 auto;
+		flex-grow: 1;
+		padding: 10px;
+		border-radius: 10px;
+		margin: 0 10px 10px;
+	}
+
+	#chart:hover {
+		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
+	}
+</style>

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

@@ -0,0 +1,154 @@
+<script>
+	import Chart from 'chart.js/auto';
+	import { onMount } from 'svelte';
+	import {monthIncome, monthExpense, isCategorizedIncome, categorizedIncome, incomeCategoryLabel} from "../../../stores.js";
+	import { globalStyles } from "../../../styles.js";
+
+	let ctx;
+	let chartCanvas;
+	let chart = null;
+
+	let generatedData;
+
+	function createGraph() {
+		try {
+			if (chartCanvas.getContext('2d') !== undefined) {
+				ctx = chartCanvas.getContext('2d');
+				if (!chart) {
+					chart = new Chart(ctx, {
+						type: 'line',
+						data: generatedData,
+						options: {
+							scales: {
+								y: {
+									ticks: {
+										color: 'rgb(255,255,255)'
+									}
+								},
+								x: {
+									ticks: {
+										color: 'rgb(255,255,255)'
+									}
+								}
+							},
+							responsive: true,
+							maintainAspectRatio: false
+						}
+					});
+				} else {
+					if ($isCategorizedIncome === true) {
+						chart.data.labels = generatedData.labels;
+						chart.data.datasets = generatedData.datasets;
+					} else {
+						generatedData.datasets = generatedData.datasets.filter(dataset => dataset.label !== $incomeCategoryLabel);
+						chart.data.labels = generatedData.labels;
+						chart.data.datasets = generatedData.datasets;
+					}
+					chart.update();
+				}
+			}
+		} catch (error) {
+			console.error('Error:', error);
+		}
+	}
+
+	$: {
+		if (isCategorizedIncome) {
+			const allDates = [...new Set([...$monthIncome, ...$categorizedIncome].map(item => item.date))];
+			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
+
+			const categorizedValues = uniqueDates.map(date => $categorizedIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+			const incomeValues = uniqueDates.map(date => $monthIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+
+			generatedData = {
+				labels: uniqueDates,
+				datasets: [
+					{
+						label: $incomeCategoryLabel,
+						backgroundColor: "rgba(21, 194, 58, 0.4)",
+						borderColor: "rgba(21, 194, 58, 1)",
+						data: categorizedValues,
+						tension: 0.2,
+						fill: true
+					},
+					{
+						label: "Revenue",
+						backgroundColor: "rgba(194, 21, 96, 0.4)",
+						borderColor: "rgba(194, 21, 96, 1)",
+						data: incomeValues,
+						tension: 0.4,
+						fill: true
+					}
+				]
+			};
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
+		} else {
+			const allDates = [...new Set([...$monthIncome].map(item => item.date))];
+			const uniqueDates = allDates.sort((a, b) => new Date(a) - new Date(b));
+
+			const incomeValues = uniqueDates.map(date => $monthIncome.filter(item => item.date === date).reduce((total, item) => total + item.amount, 0));
+
+			generatedData = {
+				labels: uniqueDates,
+				datasets:
+						{
+							label: "Income",
+							backgroundColor: "rgba(194, 21, 96, 0.4)",
+							borderColor: "rgba(194, 21, 96, 1)",
+							data: incomeValues,
+							tension: 0.4,
+							fill: true
+						}
+			};
+
+			const tempData = generatedData.datasets.filter(dataset => dataset.label !== undefined);
+
+			generatedData = {
+				labels: generatedData.labels || [],
+				datasets: tempData
+			};
+		}
+
+		if ($monthIncome || $monthExpense || $isCategorizedIncome || $categorizedIncome) {
+			createGraph();
+		}
+	}
+
+	onMount(() => {
+		createGraph();
+	});
+</script>
+
+<div id="chart" style="background-color: {$globalStyles.mainColor}">
+	<canvas id="canvas" bind:this={chartCanvas}></canvas>
+</div>
+
+<style>
+	#chart {
+		min-width: 0;
+		min-height:0;
+		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);
+		display: flex;
+		flex: 1 1 auto;
+		flex-grow: 2;
+		border-radius: 10px;
+		margin: 0 10px 10px;
+		padding: 10px;
+	}
+
+	#chart:hover {
+		box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+	}
+
+	@media only screen and (max-width: 900px) {
+		#chart {
+			min-height: 400px;
+		}
+	}
+</style>

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

@@ -0,0 +1,222 @@
+<script>
+    import { writable } from 'svelte/store';
+    import axios from 'axios';
+    import { getCookie } from "svelte-cookie";
+    import {incomeTypes, incomeData, dateText} from "../../../stores.js";
+    import { slide } from 'svelte/transition';
+
+    let showModal = false;
+    let amount = '';
+    let newData;
+
+    const selectedIncomeId = writable('');
+
+    function addNewIncome(expid, id, amount) {
+        const today = new Date().toISOString().split('T')[0];
+        const incomeCategory = $incomeTypes.find(incomeType => incomeType.id === id);
+
+        if (incomeCategory) {
+            const newIncome = {
+                incomeId: expid,
+                incomeCategory: incomeCategory,
+                date: today,
+                amount: parseInt(amount)
+            };
+
+            newData = $incomeData;
+            newData.push(newIncome);
+            $incomeData = newData;
+        } else {
+            console.error('Expense category not found for id:', id);
+        }
+    }
+
+    const createIncome = async () => {
+        showModal = false;
+        const selectedIncome = $incomeTypes.find(income => income.id === $selectedIncomeId);
+        const data = {
+            incomeCategory: selectedIncome.id,
+            amount: parseInt(amount),
+        };
+
+        try {
+            const token = getCookie('access_token');
+
+            const response = await axios.post('https://trackio.online:8081/incomes', data, {
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+            });
+
+            if (response.status === 201) {
+                addNewIncome(response.data.incomeId, selectedIncome.id, parseInt(amount));
+            } else {
+                console.error('Error:', response.status);
+            }
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    };
+
+    function toggleModal() {
+        showModal = !showModal;
+    }
+</script>
+
+<div id="exp">
+    <div id="optionField">
+        <h2>Incomes: {$dateText}</h2>
+        <div id="openModal" class="plus-button" role="button" tabindex="0" on:click={toggleModal} on:keydown={() => console.log("keydown")}>
+            +
+        </div>
+    </div>
+        {#if showModal}
+        <div class="income-form" transition:slide>
+            <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>
+
+            <div style="display: flex; justify-content: space-around">
+                <button class="btn btn-primary" on:click={createIncome}>SUBMIT</button>
+                <button class="btn btn-primary" on:click={() => showModal = false}>CANCEL</button>
+            </div>
+
+        </div>
+    {/if}
+</div>
+
+
+<style>
+    #exp {
+        padding: 10px 20px;
+        text-align: center;
+    }
+
+    button {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    button:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    #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: 20px;
+        padding: 20px;
+        max-width: 400px;
+        color: black;
+    }
+
+    input[type=text] {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+    }
+
+    select {
+        padding: 12px 20px;
+        margin: 8px 0;
+        display: inline-block;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 16px;
+    }
+
+    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/incomes/infolists/Incomes.svelte

@@ -0,0 +1,710 @@
+<script>
+    import ContentIncome from "./ContentIncome.svelte";
+    import {
+        dateText,
+        expenseData,
+        incomeData,
+        tempExpense,
+        tempIncome,
+        monthIncome,
+        monthExpense,
+        isCategorizedExpense,
+        categorizedExpense,
+        currencyLabel, copyExpenseData, copyIncomeData, incomeCategoryLabel, categorizedIncome, isCategorizedIncome, incomeTypes
+    } from "../../../stores.js";
+    import {globalStyles} from "../../../styles.js";
+    import {onMount} from "svelte";
+    import axios from "axios";
+    import {getCookie} from "svelte-cookie";
+    import {slide} from 'svelte/transition'
+    import EditEntry from "../util/EditEntry.svelte";
+
+    const textToIcon = {
+        'Interest': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M539.7 237.3c3.1-12.3 4.3-24.8 4.3-37.4C544 107.4 468.6 32 376.1 32c-77.2 0-144.6 53-163 127.8-15.3-13.2-34.9-20.5-55.2-20.5-46.3 0-84 37.7-84 84 0 7.4 .9 15 3.1 22.4-42.9 20.2-70.8 63.7-70.8 111.2C6.2 424.8 61.7 480 129.4 480h381.2c67.7 0 123.2-55.2 123.2-123.2 0-56.4-38.9-106-94.1-119.5zM199.9 401.6c0 8.3-7 15.3-15.3 15.3H153.6c-8.3 0-15.3-7-15.3-15.3V290.6c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v110.9zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V270.1c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v131.5zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V238.8c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v162.7zm87 0c0 8.3-7 15.3-15.3 15.3h-28.5c-8.3 0-15.3-7-15.3-15.3V176.9c0-8.6 7-15.6 15.3-15.6h28.5c8.3 0 15.3 7 15.3 15.6v224.6z\"/></svg>",
+        'Salary': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free 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>",
+        'Freelance Income': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free 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>",
+        'Investment Income': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"20\" viewBox=\"0 0 640 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M539.7 237.3c3.1-12.3 4.3-24.8 4.3-37.4C544 107.4 468.6 32 376.1 32c-77.2 0-144.6 53-163 127.8-15.3-13.2-34.9-20.5-55.2-20.5-46.3 0-84 37.7-84 84 0 7.4 .9 15 3.1 22.4-42.9 20.2-70.8 63.7-70.8 111.2C6.2 424.8 61.7 480 129.4 480h381.2c67.7 0 123.2-55.2 123.2-123.2 0-56.4-38.9-106-94.1-119.5zM199.9 401.6c0 8.3-7 15.3-15.3 15.3H153.6c-8.3 0-15.3-7-15.3-15.3V290.6c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v110.9zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V270.1c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v131.5zm89.5 0c0 8.3-7 15.3-15.3 15.3h-30.9c-8.3 0-15.3-7-15.3-15.3V238.8c0-8.3 7-15.3 15.3-15.3h30.9c8.3 0 15.3 7 15.3 15.3v162.7zm87 0c0 8.3-7 15.3-15.3 15.3h-28.5c-8.3 0-15.3-7-15.3-15.3V176.9c0-8.6 7-15.6 15.3-15.6h28.5c8.3 0 15.3 7 15.3 15.6v224.6z\"/></svg>",
+        'Comission': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M64 64C28.7 64 0 92.7 0 128v64c0 8.8 7.4 15.7 15.7 18.6C34.5 217.1 48 235 48 256s-13.5 38.9-32.3 45.4C7.4 304.3 0 311.2 0 320v64c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V320c0-8.8-7.4-15.7-15.7-18.6C541.5 294.9 528 277 528 256s13.5-38.9 32.3-45.4c8.3-2.9 15.7-9.8 15.7-18.6V128c0-35.3-28.7-64-64-64H64zm64 112l0 160c0 8.8 7.2 16 16 16H432c8.8 0 16-7.2 16-16V176c0-8.8-7.2-16-16-16H144c-8.8 0-16 7.2-16 16zM96 160c0-17.7 14.3-32 32-32H448c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32H128c-17.7 0-32-14.3-32-32V160z\"/></svg>",
+        'Sold Products': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free 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>",
+        'Gifts': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d=\"M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z\"/></svg>",
+        'Government Payments': "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"18\" viewBox=\"0 0 576 512\"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free 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>"
+    };
+
+    let isDateDropdownExpanded = false
+    let isCategoryDropdownExpanded = false
+    let isCurrencyDropdownExpanded = false
+    let isFilterDown = false;
+
+    let dropdownStates = {};
+    let deleteDropdownStates = {}
+
+    $: {
+        dropdownStates = {};
+        deleteDropdownStates = {};
+        $incomeData.toReversed().forEach(data => {
+            dropdownStates[data.incomeId] = false;
+            deleteDropdownStates[data.incomeId] = false;
+        });
+    }
+
+    function clickFilter() {
+        isDateDropdownExpanded = false;
+        isCategoryDropdownExpanded = false;
+        isFilterDown = !isFilterDown;
+        isCurrencyDropdownExpanded = false;
+    }
+    function clickHandlerDate() {
+        isDateDropdownExpanded = !isDateDropdownExpanded
+        isCategoryDropdownExpanded = false;
+    }
+
+    function clickHandlerCategory() {
+        isCategoryDropdownExpanded = !isCategoryDropdownExpanded;
+        isDateDropdownExpanded = false;
+    }
+
+    function clickHandlerCurrency() {
+        isCurrencyDropdownExpanded = !isCurrencyDropdownExpanded;
+        isCategoryDropdownExpanded = false;
+        isDateDropdownExpanded = false;
+        isFilterDown = false;
+    }
+
+    function clickItemHandler(id) {
+        dropdownStates[id] = !dropdownStates[id];
+        if (deleteDropdownStates[id] === true) deleteDropdownStates[id] = false;
+    }
+
+    function clickDeleteHandler(id) {
+        deleteDropdownStates[id] = !deleteDropdownStates[id];
+        if (dropdownStates[id] === true) dropdownStates[id] = false;
+    }
+
+    function clickOutsideHandler(event) {
+        const isDateButton = event.target.closest("#incomeInfo");
+
+        if (!isDateButton) {
+            isFilterDown = false;
+            isCategoryDropdownExpanded = false;
+            isDateDropdownExpanded = false;
+            isCurrencyDropdownExpanded = false;
+        }
+    }
+
+    onMount(() => {
+        $isCategorizedExpense = false;
+        $isCategorizedIncome = false;
+
+        document.body.addEventListener("click", clickOutsideHandler);
+
+        return () => {
+            document.body.removeEventListener("click", clickOutsideHandler);
+        };
+    });
+
+    async function getToday() {
+        const currentDate = new Date();
+        const currentDay = currentDate.toISOString().split('T')[0];
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + currentDay, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + currentDay, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            copyIncomeData.set(response1.data);
+            $dateText = "Today"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getYesterday() {
+        const currentDate = new Date();
+
+        const yesterday = new Date(currentDate);
+        yesterday.setDate(currentDate.getDate() - 1);
+
+        const yesterdayString = yesterday.toISOString().split('T')[0];
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?date=' + yesterdayString, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?date=' + yesterdayString, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "Yesterday"
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getMonth() {
+        const currentDate = new Date();
+        const year = currentDate.getMonth() + 1;
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "This Month"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastMonth() {
+        const currentDate = new Date();
+        const year = currentDate.getMonth();
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data)
+            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?month=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "Last Month"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    async function getLastYear() {
+        const currentDate = new Date();
+        const year = currentDate.getFullYear();
+
+        try {
+            const response1 = await axios.get('https://trackio.online:8081/expenses/personal-expenses?year=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            expenseData.set(response1.data);
+            tempExpense.set(response1.data);
+            monthExpense.set(response1.data);
+            copyExpenseData.set(response1.data);
+            const response2 = await axios.get('https://trackio.online:8081/incomes/personal-incomes?year=' + year, {
+                headers: {
+                    'Authorization': `Bearer ${getCookie('access_token')}`
+                }
+            });
+
+            incomeData.set(response2.data);
+            tempIncome.set(response2.data);
+            monthIncome.set(response2.data);
+            copyIncomeData.set(response2.data);
+            $dateText = "This Year"
+
+            $isCategorizedExpense = false;
+            categorizedExpense.set([]);
+            changeCurrency($currencyLabel);
+        } catch (error) {
+            console.error("Error fetching expenses:", error);
+        }
+    }
+
+    function filterByCategory(category) {
+        $isCategorizedIncome = true;
+        $incomeCategoryLabel = category;
+        console.log($isCategorizedIncome);
+        let tempArr = $tempIncome.filter(income => income.incomeCategory.name === category);
+        categorizedIncome.set(tempArr);
+        incomeData.set(tempArr);
+    }
+
+    function getAll() {
+        categorizedIncome.set([]);
+        $incomeCategoryLabel = "Category";
+        $isCategorizedIncome = false;
+        console.log($isCategorizedIncome);
+        incomeData.set($tempIncome);
+    }
+
+    function doNothing() {
+
+    }
+
+    function changeCurrency(currency) {
+        if (currency === 'USD') {
+            expenseData.set($copyExpenseData);
+            incomeData.set($copyIncomeData);
+            $currencyLabel = "USD";
+        }
+        if (currency === 'MDL') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 0.056
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 0.056
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "MDL";
+        }
+        if (currency === 'EUR') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.08
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.08
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "EUR";
+        }
+
+        if (currency === 'GBP') {
+            const tempData1 = $copyExpenseData.map(expense => ({
+                ...expense,
+                amount: expense.amount / 1.26
+            }));
+            expenseData.set(tempData1);
+
+            const tempData2 = $copyIncomeData.map(income => ({
+                ...income,
+                amount: income.amount / 1.26
+            }));
+            incomeData.set(tempData2);
+            $currencyLabel = "GBP";
+        }
+    }
+</script>
+
+<div id="incomeInfo" style="background-color: {$globalStyles.mainColor}">
+    <ContentIncome />
+    <div style="display: flex; justify-content: space-around">
+
+        <div id="dropdown" style="margin: 10px; display: flex; justify-content: space-between">
+            <button id="btn1" class="button" on:click={clickFilter}>Filter ▼</button>
+        </div>
+
+        <div id="dropdown-currency" style="margin: 10px;">
+            <button id="btn2" class="button" on:click={clickHandlerCurrency}>Currency ▼</button>
+        </div>
+    </div>
+
+    <div>
+        {#if isFilterDown}
+            <div style="margin: 10px; display: flex; justify-content: space-between" transition:slide>
+                <div id="dropdown-date" style="margin: 10px;">
+                    <button id="btn3" class="button" on:click={clickHandlerDate}>Filter by Date ▼</button></div>
+
+                <div id="dropdown-category" style="margin: 10px;">
+                    <button id="btn4" class="button" on:click={clickHandlerCategory}>Filter by Category ▼</button>
+                </div>
+            </div>
+        {/if}
+
+        {#if isDateDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => getToday()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Today
+                </div>
+                <div class="date-entry" on:click={() => getYesterday()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Yesterday
+                </div>
+                <div class="date-entry" on:click={() => getMonth()} role="button" tabindex="0"
+                     on:keydown={doNothing}>This month
+                </div>
+                <div class="date-entry" on:click={() => getLastMonth()} role="button" tabindex="0"
+                     on:keydown={doNothing}>Last month
+                </div>
+                <div class="date-entry" on:click={() => getLastYear()} role="button" tabindex="0"
+                     on:keydown={doNothing}>This year
+                </div>
+            </div>
+        {/if}
+
+        {#if isCategoryDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => getAll()} role="button"
+                     tabindex="0" on:keydown={doNothing}>All</div>
+                {#each $incomeTypes as income (income.id)}
+                    {#if income.id !== undefined}
+                        <div class="date-entry" on:click={() => filterByCategory(income.name)} role="button"
+                             tabindex="0" on:keydown={doNothing}>{income.name}</div>
+                    {/if}
+                {/each}
+            </div>
+        {/if}
+
+        {#if isCurrencyDropdownExpanded}
+            <div id="date-list" transition:slide>
+                <div class="date-entry" on:click={() => changeCurrency("MDL")} role="button"
+                     tabindex="0" on:keydown={doNothing}>MDL Leu</div>
+                <div class="date-entry" on:click={() => changeCurrency("GBP")} role="button"
+                     tabindex="0" on:keydown={doNothing}>GBP Pound</div>
+                <div class="date-entry" on:click={() => changeCurrency("USD")} role="button"
+                     tabindex="0" on:keydown={doNothing}>USD Dollar</div>
+                <div class="date-entry" on:click={() => changeCurrency("EUR")} role="button"
+                     tabindex="0" on:keydown={doNothing}>EUR Euro</div>
+            </div>
+        {/if}
+    </div>
+    <div id="listContainer" style="color: {$globalStyles.color}">
+        <ul>
+            {#each $incomeData.toReversed() as item (item.incomeId)}
+                <li style="display:flex; flex-direction: column; justify-content: space-between; color: {$globalStyles.color}">
+                    <div style="display:flex; flex-direction: row; justify-content: space-between; align-items: center;">
+                    <div>
+                        {#if textToIcon[item.incomeCategory.name]}
+                        {@html textToIcon[item.incomeCategory.name]}
+                    {/if}
+                        <span style="font-weight: bold">{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}</span>
+                    <span style="font-weight:bold; margin-right: 10px; color: limegreen; font-size: larger">{item.incomeCategory ? `+${item.amount.toFixed(2)} ${$currencyLabel}` : `-${item.amount.toFixed(2)} ${$currencyLabel}`}</span>
+                    </div>
+                        <div style="margin-right: 5px; display: flex; flex-direction: row">
+
+                            <div>
+                                {`${item.date}`}
+                            </div>
+
+                            <div id="editBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickItemHandler(item.incomeId)}>
+                                <span id="editBtn"><svg
+                                        xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path
+                                        d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg></span>
+                            </div>
+
+                            <div id="deleteBtnDiv" role="button" tabindex="0" on:keydown={doNothing}
+                                 on:click={() => clickDeleteHandler(item.incomeId)}>
+                                <span id="deleteBtn"><svg
+                                        xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path
+                                        d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg></span>
+                            </div>
+                            </div>
+                    </div>
+
+                    {#if dropdownStates[item.incomeId]}
+                        <EditEntry {item} bind:isOn={dropdownStates[item.incomeId]}/>
+                    {/if}
+
+                    {#if deleteDropdownStates[item.incomeId]}
+                        <div style="padding: 5px; margin-top: 5px; display:flex; flex-direction: column; justify-content: space-evenly"
+                             class="inputForm" transition:slide>
+                            <span id="textf" style="text-align: center; margin-bottom: 10px">Confirm deletion?</span>
+                            <div style="display:flex; flex-direction: row; justify-content: space-evenly">
+                                <button id="confirmBtn">CONFIRM</button>
+                                <button id="cancelBtn">CANCEL</button>
+                            </div>
+
+                            <!--                            <button style="background-color: #8BD17C" on:click={() => console.log("LOL")}>Delete</button>-->
+                            <!--                            <button style="background-color: palevioletred" on:click={clickItemHandler(item.expenseId)}>Cancel</button>-->
+                        </div>
+                    {/if}
+
+                </li>
+            {/each}
+        </ul>
+    </div>
+</div>
+
+<style>
+
+    #textf {
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 20px;
+        font-weight: 500;
+    }
+
+    #confirmBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #confirmBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    #cancelBtn {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .5s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+    }
+
+    #cancelBtn:hover {
+        box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
+        transition-duration: .1s;
+    }
+
+    @media only screen and (max-width: 900px) {
+        #listContainer {
+            max-height: 50vh;
+            width: 100%;
+        }
+
+        #incomeInfo {
+            margin: 0;
+            width: 100%;
+        }
+    }
+
+    #editBtn {
+        margin-left: 10px;
+        margin-right: 5px;
+        fill: darkblue;
+    }
+
+    .inputForm {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 10px;
+    }
+
+    #editBtn:hover {
+        cursor: pointer;
+        fill: lightseagreen;
+    }
+
+    #deleteBtn {
+        fill: red;
+        margin-left: 5px;
+    }
+
+    #deleteBtn:hover {
+        cursor: pointer;
+        fill: palevioletred;
+    }
+
+    #incomeInfo {
+        min-width: 350px;
+        min-height: 0;
+        background-color: #212942;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+    }
+
+    #listContainer {
+        flex: 1 1 auto;
+        overflow-y: auto;
+        min-height: 0;
+        padding: 0 10px 10px;
+        /*margin: 0 0 10px;*/
+        box-sizing: border-box;
+        border-radius: 0 0 10px 10px;
+    }
+
+    ::-webkit-scrollbar {
+        width: 10px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: #f1f1f1;
+        border-radius: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background: #888;
+        border-radius: 10px;
+    }
+
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+
+    #listContainer ul {
+        list-style: none;
+        padding: 0;
+        border-radius: 0 0 10px 10px;
+    }
+
+    #listContainer 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);
+    }
+
+    #listContainer li:hover {
+        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
+    }
+
+    .button {
+        align-items: center;
+        background-color: #0A66C2;
+        border: 0;
+        border-radius: 100px;
+        box-sizing: border-box;
+        color: #ffffff;
+        cursor: pointer;
+        display: inline-flex;
+        font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
+        font-size: 16px;
+        font-weight: 600;
+        justify-content: center;
+        line-height: 20px;
+        max-width: 480px;
+        min-height: 40px;
+        min-width: 0;
+        overflow: hidden;
+        padding: 0 20px;
+        text-align: center;
+        touch-action: manipulation;
+        transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+        user-select: none;
+        -webkit-user-select: none;
+        vertical-align: middle;
+    }
+
+    .button:hover,
+    .button:focus {
+        background-color: #16437E;
+        color: #ffffff;
+    }
+
+    .button:active {
+        background: #09223b;
+        color: rgb(255, 255, 255, .7);
+    }
+
+    .button:disabled {
+        cursor: not-allowed;
+        background: rgba(0, 0, 0, .08);
+        color: rgba(0, 0, 0, .3);
+    }
+
+    #date-list {
+        background-color: black;
+        margin: 0 20px 20px;
+        max-height: 400px;
+        overflow-y: scroll;
+        border-radius: 20px;
+    }
+
+    .date-entry {
+        background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
+        border-radius: 8px;
+        border-style: none;
+        box-sizing: border-box;
+        color: #FFFFFF;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        height: 3rem;
+        padding: 0 1.6rem;
+        text-align: center;
+        text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+        transition: all .3s;
+        user-select: none;
+        -webkit-user-select: none;
+        touch-action: manipulation;
+        margin: 10px;
+    }
+
+    .date-entry:hover {
+        box-shadow: rgba(255, 255, 255, 0.8) 0 0 20px;
+    }
+</style>

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

@@ -0,0 +1,61 @@
+<script>
+
+import {globalStyles} from "../../../styles.js";
+</script>
+
+<div id="header">
+    <div id="dashboardTitleWrapper" style="color: white">
+        <h1 id="dashboardTitle">Dashboard - Incomes</h1>
+    </div>
+
+    <div id="icons">
+        <div class="headerbtn searchButton">
+            <svg style="fill: white" 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 style="fill: white" 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 20px 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>