From c3093ace9d65a43cdb6a1ac541ccd1ca3c988a59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Thu, 8 Jan 2026 20:09:02 +0100
Subject: [PATCH 01/11] Fix linting

lint
---
 frontend/Exence/eslint.config.mjs                  |  3 +++
 .../src/app/shared/auth/guard/logged-in.guard.ts   |  1 -
 .../auth/interceptors/refresh-token.interceptor.ts | 14 +++++++-------
 frontend/Exence/src/app/shared/error.service.ts    | 13 +++++++------
 .../src/app/shared/user/current-user.service.ts    |  4 ++--
 5 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/frontend/Exence/eslint.config.mjs b/frontend/Exence/eslint.config.mjs
index b0e3949..224ed1f 100644
--- a/frontend/Exence/eslint.config.mjs
+++ b/frontend/Exence/eslint.config.mjs
@@ -11,6 +11,7 @@ export default defineConfig([
 		languageOptions: {
 			parserOptions: {
 				projectService: true,
+				allowDefaultProject: ['eslint.config.mjs'],
 			},
 		},
 	},
@@ -56,6 +57,7 @@ export default defineConfig([
                 }
             ],
 			"@typescript-eslint/method-signature-style": ["error", "property"],
+			"@typescript-eslint/require-await": "off",
     		"@typescript-eslint/no-deprecated": "warn",
 			"@typescript-eslint/no-inferrable-types": "warn",
 			"@typescript-eslint/no-misused-promises": [
@@ -78,6 +80,7 @@ export default defineConfig([
 			"@typescript-eslint/no-floating-promises": "off",
 			"@typescript-eslint/unbound-method": "off",
 			"@typescript-eslint/no-unsafe-assignment": "off",
+			"@typescript-eslint/no-unsafe-arguments": "off",
 			"no-unused-vars": "off",
     		"@typescript-eslint/no-unused-vars": [
 				"warn",
diff --git a/frontend/Exence/src/app/shared/auth/guard/logged-in.guard.ts b/frontend/Exence/src/app/shared/auth/guard/logged-in.guard.ts
index 67b4d30..2ae794e 100644
--- a/frontend/Exence/src/app/shared/auth/guard/logged-in.guard.ts
+++ b/frontend/Exence/src/app/shared/auth/guard/logged-in.guard.ts
@@ -17,7 +17,6 @@ export const loggedInGuard: CanActivateFn = (
 		filter(user => user !== null),
 		take(1),
 		map((user) => {
-			console.log(user)
 			if (user && currentUserService.isAuthenticated()) {
 				return true;
 			} else {
diff --git a/frontend/Exence/src/app/shared/auth/interceptors/refresh-token.interceptor.ts b/frontend/Exence/src/app/shared/auth/interceptors/refresh-token.interceptor.ts
index 2025c04..b887927 100644
--- a/frontend/Exence/src/app/shared/auth/interceptors/refresh-token.interceptor.ts
+++ b/frontend/Exence/src/app/shared/auth/interceptors/refresh-token.interceptor.ts
@@ -8,6 +8,13 @@ import { CurrentUserService } from '../../user/current-user.service';
 
 export const SUPPRESS_ERROR_SNACKBAR = new HttpContextToken<boolean>(() => false);
 
+function setErrorContext(errorWithContext: HttpErrorResponse, req: HttpRequest<unknown>): void {
+	Object.defineProperty(errorWithContext, 'context', {
+		value: req.context.set(SUPPRESS_ERROR_SNACKBAR, true),
+		enumerable: false
+	});
+}
+
 export function refreshTokenInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {
 	const router = inject(Router);
 	const navigationService = inject(NavigationService);
@@ -48,11 +55,4 @@ export function refreshTokenInterceptor(req: HttpRequest<unknown>, next: HttpHan
 			);
 		})
 	);
-}
-
-function setErrorContext(errorWithContext: HttpErrorResponse, req: HttpRequest<unknown>) {
-	Object.defineProperty(errorWithContext, 'context', {
-		value: req.context.set(SUPPRESS_ERROR_SNACKBAR, true),
-		enumerable: false
-	});
 }
\ No newline at end of file
diff --git a/frontend/Exence/src/app/shared/error.service.ts b/frontend/Exence/src/app/shared/error.service.ts
index 56561e5..e6590f6 100644
--- a/frontend/Exence/src/app/shared/error.service.ts
+++ b/frontend/Exence/src/app/shared/error.service.ts
@@ -1,9 +1,9 @@
-import { inject, Injectable } from "@angular/core";
-import { SnackbarService } from "./snackbar/snackbar.service";
-import { HttpErrorResponse } from "@angular/common/http";
-import { ErrorResponse } from "../data-model/modules/ErrorResponse";
-import { SUPPRESS_ERROR_SNACKBAR } from "./auth/interceptors/refresh-token.interceptor";
-import { HttpSettings } from "./http/http.service";
+import { inject, Injectable } from '@angular/core';
+import { SnackbarService } from './snackbar/snackbar.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ErrorResponse } from '../data-model/modules/ErrorResponse';
+import { SUPPRESS_ERROR_SNACKBAR } from './auth/interceptors/refresh-token.interceptor';
+import { HttpSettings } from './http/http.service';
 
 @Injectable({
 	providedIn: 'root'
@@ -14,6 +14,7 @@ export class ErrorService {
 	handleError(errorResponse: HttpErrorResponse, settings?: HttpSettings): void {
 		settings = settings ?? {};
 
+		// eslint-disable-next-line
 		const suppressFromInterceptor = (errorResponse as any).context?.get?.(SUPPRESS_ERROR_SNACKBAR) ?? false;
 
 		if (!settings.suppressErrorMessage && !suppressFromInterceptor) {
diff --git a/frontend/Exence/src/app/shared/user/current-user.service.ts b/frontend/Exence/src/app/shared/user/current-user.service.ts
index c410849..fb01f1a 100644
--- a/frontend/Exence/src/app/shared/user/current-user.service.ts
+++ b/frontend/Exence/src/app/shared/user/current-user.service.ts
@@ -7,10 +7,10 @@ import { User } from '../../data-model/modules/auth/User';
 export class CurrentUserService {
 	private _user: WritableSignal<User | null | undefined> = signal(null);
 
+	isAuthenticated = computed(() => !!this._user());
+	
 	get user(): Signal<User> { return this._user.asReadonly() as Signal<User>; }
 	set user(user: User | null | undefined) { this._user.set(user); }
-	
-	isAuthenticated = computed(() => !!this._user());
 
 	clearUser(): void {
 		this.user = undefined;

From dca448e7aa3ea47df7ad585d0323f17f1e06afb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Fri, 9 Jan 2026 20:46:39 +0100
Subject: [PATCH 02/11] #EX-139: Add filter-menu.component, matBadge stlyles

---
 .../filter-menu/filter-menu.component.html    | 35 +++++++++++++++++++
 .../filter-menu/filter-menu.component.scss    |  0
 .../filter-menu/filter-menu.component.ts      | 24 +++++++++++++
 .../Exence/src/styles/components/badge.scss   |  7 ++++
 frontend/Exence/src/styles/styles.scss        |  1 +
 5 files changed, 67 insertions(+)
 create mode 100644 frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
 create mode 100644 frontend/Exence/src/app/shared/filter-menu/filter-menu.component.scss
 create mode 100644 frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts
 create mode 100644 frontend/Exence/src/styles/components/badge.scss

diff --git a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
new file mode 100644
index 0000000..840d186
--- /dev/null
+++ b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
@@ -0,0 +1,35 @@
+<ex-button
+	color="primary"
+	filled
+	matIcon="filter_alt"
+	collapseUnder="md"
+	collapsedStyle="filled"
+	[matMenuTriggerFor]="filterMenu"
+	[matBadgeHidden]="!appliedFiltersCount()"
+	[matBadge]="appliedFiltersCount()"
+	matBadgePosition="before"
+>
+	Add filter
+</ex-button>
+
+<mat-menu #filterMenu>
+	<div
+		class="d-flex flex-column gap-3 p-4"
+		(click)="$event.stopPropagation()"
+	>
+		<div
+			class="d-flex flex-row align-items-center justify-content-between gap-2"
+		>
+			<h3 class="m-0">Filters</h3>
+			<ex-button
+				iconButton
+				color="primary"
+				matIcon="filter_alt_off"
+				[disabled]="!appliedFiltersCount()"
+				(click)="clearFilters()"
+			/>
+		</div>
+
+		<ng-content />
+	</div>
+</mat-menu>
diff --git a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.scss b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts
new file mode 100644
index 0000000..abac9dc
--- /dev/null
+++ b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts
@@ -0,0 +1,24 @@
+import { Component, input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatBadgeModule } from '@angular/material/badge';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+	selector: 'ex-filter-menu',
+	templateUrl: './filter-menu.component.html',
+	styleUrl: './filter-menu.component.scss',
+	imports: [
+		MatMenuModule,
+		MatBadgeModule,
+		ButtonComponent,
+	],
+})
+export class FilterMenuComponent {
+	form = input.required<FormGroup>();
+	appliedFiltersCount = input.required<number>();
+	
+	clearFilters(): void {
+		this.form().reset();
+	}
+}
\ No newline at end of file
diff --git a/frontend/Exence/src/styles/components/badge.scss b/frontend/Exence/src/styles/components/badge.scss
new file mode 100644
index 0000000..c0e343c
--- /dev/null
+++ b/frontend/Exence/src/styles/components/badge.scss
@@ -0,0 +1,7 @@
+.mat-badge-medium.mat-badge-overlap span.mat-badge-content {
+	--mat-badge-container-overlap-offset: -10px;
+    --mat-badge-text-size: 10px;
+    --mat-badge-container-padding: 1px 7px;
+    --mat-badge-background-color: var(--default-text-color);
+    --mat-badge-text-color: var(--secondary-text-color);
+}
\ No newline at end of file
diff --git a/frontend/Exence/src/styles/styles.scss b/frontend/Exence/src/styles/styles.scss
index 5aedb74..5846dd5 100644
--- a/frontend/Exence/src/styles/styles.scss
+++ b/frontend/Exence/src/styles/styles.scss
@@ -15,6 +15,7 @@
 @import './components/dialog.scss';
 @import './components/divider.scss';
 @import './components/snackbar.scss';
+@import './components/badge.scss';
 @import './fonts/material-icons.scss';
 
 * {

From b0a19fca4f79d21dfe24cc2bdfab7bca6da521fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Fri, 9 Jan 2026 21:10:08 +0100
Subject: [PATCH 03/11] Remove unnecessary comments, code, fix max value
 validator message

---
 .../Exence/src/app/private/dashboard/dashboard.component.ts   | 1 -
 .../create-transaction-dialog.component.html                  | 1 -
 .../transactions-and-categories.component.scss                | 1 -
 .../transactions-and-categories.component.ts                  | 4 ++--
 .../src/app/shared/data-table/data-table.component.scss       | 1 -
 .../Exence/src/app/shared/data-table/data-table.component.ts  | 1 -
 6 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/frontend/Exence/src/app/private/dashboard/dashboard.component.ts b/frontend/Exence/src/app/private/dashboard/dashboard.component.ts
index e9a0159..4ede6ba 100644
--- a/frontend/Exence/src/app/private/dashboard/dashboard.component.ts
+++ b/frontend/Exence/src/app/private/dashboard/dashboard.component.ts
@@ -50,7 +50,6 @@ export class DashboardComponent implements OnInit {
 	readonly dialog = inject(MatDialog);
 	readonly router = inject(Router);
 	readonly navigation = inject(NavigationService);
-	
 
 	transactionTypes = TransactionType;
 	dateIntervals = DateInterval;
diff --git a/frontend/Exence/src/app/private/transactions-and-categories/create-transaction-dialog/create-transaction-dialog.component.html b/frontend/Exence/src/app/private/transactions-and-categories/create-transaction-dialog/create-transaction-dialog.component.html
index c32befe..6ff291e 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/create-transaction-dialog/create-transaction-dialog.component.html
+++ b/frontend/Exence/src/app/private/transactions-and-categories/create-transaction-dialog/create-transaction-dialog.component.html
@@ -85,7 +85,6 @@ <h3 class="fs-1 fw-bold">New transaction</h3>
 			</mat-error>
 		</mat-form-field>
 
-		<!-- TODO change to textarea -->
 		@let recurringControl = form.controls.recurring;
 		<mat-checkbox [formControl]="recurringControl">Automatically recurring?</mat-checkbox>
 	</mat-card-content>
diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
index b9cae63..1134382 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
@@ -3,7 +3,6 @@
 @include displayMd {
 	.smaller-row {
 		flex-basis: 30%;
-		height: 30%;
 	}
 
 	.bigger-row {
diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
index 8b650e5..3847765 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
@@ -67,7 +67,7 @@ export class TransactionsAndCategoriesComponent implements OnInit {
 		});
 	}
 
-	public openCreateTransactionDialog(): void {
+	openCreateTransactionDialog(): void {
 		this.dialog.open<CreateTransactionDialogComponent, CreateTransactionDialogData, Transaction>(
 			CreateTransactionDialogComponent, undefined
 		).afterClosed().subscribe(
@@ -80,7 +80,7 @@ export class TransactionsAndCategoriesComponent implements OnInit {
 		);
 	}
 
-	public openCreateCategoryDialog(): void {
+	openCreateCategoryDialog(): void {
 		this.dialog.open<CreateCategoryDialogComponent, undefined, Category>(
 			CreateCategoryDialogComponent, undefined
 		).afterClosed().subscribe(
diff --git a/frontend/Exence/src/app/shared/data-table/data-table.component.scss b/frontend/Exence/src/app/shared/data-table/data-table.component.scss
index 8cf83b1..912ef4b 100644
--- a/frontend/Exence/src/app/shared/data-table/data-table.component.scss
+++ b/frontend/Exence/src/app/shared/data-table/data-table.component.scss
@@ -174,7 +174,6 @@ td.mat-column-actions mat-icon {
 	background-color: var(--primary-color);
 }
 
-// TODO details
 .detail-container {
 	display: flex;
 
diff --git a/frontend/Exence/src/app/shared/data-table/data-table.component.ts b/frontend/Exence/src/app/shared/data-table/data-table.component.ts
index 0994676..45ee761 100644
--- a/frontend/Exence/src/app/shared/data-table/data-table.component.ts
+++ b/frontend/Exence/src/app/shared/data-table/data-table.component.ts
@@ -233,7 +233,6 @@ export class DataTableComponent extends BaseComponent {
 		// }
 	}
 
-	// TODO refactor
 	openCreateDialog(): void {
 		// All transactions
 		if (!this.type()) {

From 4f5db1d498f62158136dc4195bd67f08afd4d17d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Sat, 10 Jan 2026 20:14:37 +0100
Subject: [PATCH 04/11] Fix control type, max value message in validator

---
 .../Exence/src/app/shared/validator/validator.component.html  | 2 +-
 .../Exence/src/app/shared/validator/validator.component.ts    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/Exence/src/app/shared/validator/validator.component.html b/frontend/Exence/src/app/shared/validator/validator.component.html
index aff4a5b..1125091 100644
--- a/frontend/Exence/src/app/shared/validator/validator.component.html
+++ b/frontend/Exence/src/app/shared/validator/validator.component.html
@@ -19,7 +19,7 @@
 			Minimum value is {{ errorValue?.min }}!
 		}
 		@case ('max') {
-			MaximumValue value is {{ errorValue?.max }}!
+			Maximum value is {{ errorValue?.max }}!
 		}
 	}
 }
diff --git a/frontend/Exence/src/app/shared/validator/validator.component.ts b/frontend/Exence/src/app/shared/validator/validator.component.ts
index ce18598..794d705 100644
--- a/frontend/Exence/src/app/shared/validator/validator.component.ts
+++ b/frontend/Exence/src/app/shared/validator/validator.component.ts
@@ -1,5 +1,5 @@
 import { Component, input, OnInit } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { AbstractControl } from '@angular/forms';
 import { merge, of } from 'rxjs';
 import { BaseComponent } from '../base-component/base.component';
 
@@ -15,7 +15,7 @@ interface ErrorInfo {
 	imports: [],
 })
 export class ValidatorComponent extends BaseComponent implements OnInit {
-	control = input.required<FormControl>();
+	control = input.required<AbstractControl>();
 	
 	errorKey?: string;
 	errorValue?: ErrorInfo;

From 10b3c47587a53cc6c148455d4434059f35c5f1c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Sat, 10 Jan 2026 20:15:08 +0100
Subject: [PATCH 05/11] #EX-139: Add filters to transactions list in
 transactions-and-categories

---
 .../modules/transaction/TransactionFilter.ts  |  14 +-
 .../private/dashboard/dashboard.component.ts  |   3 +-
 .../transaction.service.ts                    |   7 +-
 ...transactions-and-categories.component.html | 122 ++++++++++++++++--
 ...transactions-and-categories.component.scss |   4 +
 .../transactions-and-categories.component.ts  |  77 ++++++++++-
 .../data-table/data-table.component.scss      |   2 +-
 .../filter-menu/filter-menu.component.html    |   2 +-
 .../filter-menu/filter-menu.component.scss    |   3 +
 .../Exence/src/styles/components/error.scss   |   4 +
 .../src/styles/components/form-field.scss     |  19 +++
 frontend/Exence/src/styles/styles.scss        |   1 +
 12 files changed, 235 insertions(+), 23 deletions(-)
 create mode 100644 frontend/Exence/src/styles/components/error.scss

diff --git a/frontend/Exence/src/app/data-model/modules/transaction/TransactionFilter.ts b/frontend/Exence/src/app/data-model/modules/transaction/TransactionFilter.ts
index 3dab7a1..bfa0935 100644
--- a/frontend/Exence/src/app/data-model/modules/transaction/TransactionFilter.ts
+++ b/frontend/Exence/src/app/data-model/modules/transaction/TransactionFilter.ts
@@ -2,11 +2,11 @@ import { TransactionType } from './TransactionType';
 
 export interface TransactionFilter {
 	keyword?: string;
-	dateFrom: string;
-	dateTo: string;
-	categoryId: number;
-	type: TransactionType;
-	amountFrom: number;
-	amountTo: number;
-	recurring: boolean;
+	dateFrom?: string;
+	dateTo?: string;
+	categoryId?: number;
+	type?: TransactionType;
+	amountFrom?: number;
+	amountTo?: number;
+	recurring?: boolean;
 }
\ No newline at end of file
diff --git a/frontend/Exence/src/app/private/dashboard/dashboard.component.ts b/frontend/Exence/src/app/private/dashboard/dashboard.component.ts
index 4ede6ba..bcd4af1 100644
--- a/frontend/Exence/src/app/private/dashboard/dashboard.component.ts
+++ b/frontend/Exence/src/app/private/dashboard/dashboard.component.ts
@@ -12,6 +12,7 @@ import { CategoriesComponent, DateInterval } from '../../private/dashboard/categ
 import {
 	SummaryContainerComponent
 } from '../../private/dashboard/summary-container/summary-container.component';
+import { BaseComponent } from '../../shared/base-component/base.component';
 import { ButtonComponent } from '../../shared/button/button.component';
 import { CardSliderDirective } from '../../shared/card-slider.directive';
 import { ChartComponent } from '../../shared/chart/chart.component';
@@ -41,7 +42,7 @@ import { TransactionService } from '../transactions-and-categories/transaction.s
 	templateUrl: './dashboard.component.html',
 	styleUrl: './dashboard.component.scss',
 })
-export class DashboardComponent implements OnInit {
+export class DashboardComponent extends BaseComponent implements OnInit {
 	private readonly currentUserService = inject(CurrentUserService);
 	private readonly transactionService = inject(TransactionService);
 	private readonly categoryService = inject(CategoryService);
diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts b/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts
index 6a60eeb..f8be017 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts
@@ -3,6 +3,7 @@ import { lastValueFrom } from 'rxjs';
 import { PagedResponse } from '../../data-model/modules/common/PagedResponse';
 import { RecurringTransactionsResponse } from '../../data-model/modules/transaction/RecurringTransactionsResponse';
 import { Transaction } from '../../data-model/modules/transaction/Transaction';
+import { TransactionFilter } from '../../data-model/modules/transaction/TransactionFilter';
 import { TransactionTotalsResponse } from '../../data-model/modules/transaction/TransactionTotalsResponse';
 import { HttpService } from '../../shared/http/http.service';
 
@@ -18,7 +19,11 @@ export class TransactionService {
 		return lastValueFrom(this.http.get<Transaction>(`${this.baseUrl}/${id}`));
 	}
 
-	public list(): Promise<PagedResponse<Transaction>> {
+	public list(filters?: TransactionFilter): Promise<PagedResponse<Transaction>> {
+		if (filters) {
+			const request: Record<string, string> = filters as unknown as Record<string, string>;
+			return lastValueFrom(this.http.get<PagedResponse<Transaction>>(this.baseUrl, request));
+		}
 		return lastValueFrom(this.http.get<PagedResponse<Transaction>>(this.baseUrl));
 	}
 
diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.html b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.html
index 376b352..d99645b 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.html
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.html
@@ -5,7 +5,11 @@
 	<div
 		class="d-flex flex-column flex-md-row justify-content-center justify-content-md-between align-items-center gap-2"
 	>
-		<h2 class="m-0 text-center text-md-start {{ display.isSm() ? 'fs-1' : 'fs-2' }}">
+		<h2
+			class="m-0 text-center text-md-start {{
+				display.isSm() ? 'fs-1' : 'fs-2'
+			}}"
+		>
 			@if (selectedIndex === 0) {
 				Transactions
 			} @else {
@@ -20,7 +24,9 @@ <h2 class="m-0 text-center text-md-start {{ display.isSm() ? 'fs-1' : 'fs-2' }}"
 		>
 			<mat-tab>
 				<ng-template mat-tab-label>
-					<div class="d-flex flex-row flex-nowrap align-items-center gap-2">
+					<div
+						class="d-flex flex-row flex-nowrap align-items-center gap-2"
+					>
 						<mat-icon size="md">payments</mat-icon>
 						@if (display.isMd()) {
 							Transactions
@@ -30,7 +36,9 @@ <h2 class="m-0 text-center text-md-start {{ display.isSm() ? 'fs-1' : 'fs-2' }}"
 			</mat-tab>
 			<mat-tab>
 				<ng-template mat-tab-label>
-					<div class="d-flex flex-row flex-nowrap align-items-center gap-2">
+					<div
+						class="d-flex flex-row flex-nowrap align-items-center gap-2"
+					>
 						<mat-icon size="md">cached</mat-icon>
 						@if (display.isMd()) {
 							Categories
@@ -55,9 +63,11 @@ <h2 class="m-0 text-center text-md-start {{ display.isSm() ? 'fs-1' : 'fs-2' }}"
 		<div class="d-flex flex-row gap-4 smaller-row">
 			@if (display.isLg()) {
 				<ex-data-table
-					[data]="{ transactions: recurringTransactions.incomes, categories }"
+					[data]="{
+						transactions: recurringTransactions.incomes,
+						categories
+					}"
 					matIcon="money_off"
-					class="flex-grow-1"
 					nonExpandable
 					paginationDisabled
 					title="Recurring Incomes"
@@ -66,7 +76,10 @@ <h2 class="m-0 text-center text-md-start {{ display.isSm() ? 'fs-1' : 'fs-2' }}"
 					(dataChangedEvent)="onDataChanged()"
 				/>
 				<ex-data-table
-					[data]="{ transactions: recurringTransactions.expenses, categories }"
+					[data]="{
+						transactions: recurringTransactions.expenses,
+						categories
+					}"
 					matIcon="money_off"
 					class="flex-grow-1"
 					nonExpandable
@@ -78,9 +91,11 @@ <h2 class="m-0 text-center text-md-start {{ display.isSm() ? 'fs-1' : 'fs-2' }}"
 				/>
 			} @else {
 				<ex-data-table
-					[data]="{ transactions: recurringTransactions.mergedTransactions, categories }"
+					[data]="{
+						transactions: recurringTransactions.mergedTransactions,
+						categories
+					}"
 					matIcon="money_off"
-					class="flex-grow-1"
 					nonExpandable
 					paginationDisabled
 					title="Recurrings"
@@ -95,7 +110,12 @@ <h2 class="m-0 text-center text-md-start {{ display.isSm() ? 'fs-1' : 'fs-2' }}"
 			[class.overflow-hidden]="display.isMd()"
 		>
 			<div class="d-flex flex-row flex-nowrap justif-content-between">
-				<div [matTooltip]="!canCreateTransaction ? 'First create a category!' : ''">
+				<div
+					class="d-flex flex-row flex-nowrap justify-content-between gap-2 w-100"
+					[matTooltip]="
+						!canCreateTransaction ? 'First create a category!' : ''
+					"
+				>
 					<ex-button
 						filled
 						matIcon="add"
@@ -106,6 +126,90 @@ <h2 class="m-0 text-center text-md-start {{ display.isSm() ? 'fs-1' : 'fs-2' }}"
 					>
 						Add transaction
 					</ex-button>
+
+					<div class="d-flex flex-row flex-nowrap gap-2">
+						<mat-form-field subscriptSizing="dynamic" class="search">
+							<ex-button
+								iconButton
+								matPrefix
+								matIcon="search"
+								color="accent"
+							/>
+							<input [formControl]="transactionFilterForm.controls.searchText" matInput placeholder="Search..." autocomplete="off">
+							<ex-input-clear [control]="transactionFilterForm.controls.searchText" matSuffix />
+						</mat-form-field>
+						<ex-filter-menu class="align-self-end" [form]="transactionFilterForm" [appliedFiltersCount]="appliedFiltersCount">
+							@let dateRangeControl = transactionFilterForm.controls.dateRange; 
+							<mat-form-field subscriptSizing="dynamic">
+								<mat-label>Enter a date range</mat-label>
+								<mat-date-range-input
+									[formGroup]="dateRangeControl"
+									[rangePicker]="dateRangePicker"
+								>
+									<input
+										matStartDate
+										[formControl]="dateRangeControl.controls.dateFrom"
+									/>
+									<input
+										matEndDate
+										[formControl]="dateRangeControl.controls.dateTo"
+									/>
+								</mat-date-range-input>
+								<mat-datepicker-toggle
+									matIconSuffix
+									[for]="dateRangePicker"
+								></mat-datepicker-toggle>
+								<mat-date-range-picker
+									#dateRangePicker
+								></mat-date-range-picker>
+							</mat-form-field>
+
+							<div class="d-flex flex-column gap-1">
+								<div class="fs-6 ps-1">Amount</div>
+								@let amountRangeControl = transactionFilterForm.controls.amountRange;
+								<mat-form-field
+								class="mb-3" subscriptSizing="dynamic">
+									<mat-label>Min</mat-label>
+									<input matInput type="number" min="0" [formControl]="amountRangeControl.controls.min">
+								</mat-form-field>
+								<mat-form-field subscriptSizing="dynamic">
+									<mat-label>Max</mat-label>
+									<input matInput type="number" min="0" [formControl]="amountRangeControl.controls.max">
+								</mat-form-field>
+							</div>
+
+							@let categoryControl = transactionFilterForm.controls.category;
+							<mat-form-field subscriptSizing="dynamic">
+								<mat-label>Category</mat-label>
+								<mat-select [formControl]="categoryControl">
+									<mat-option [value]="null">All</mat-option>
+									@for (category of categories; track category.id) {
+										<mat-option [value]="category">{{ `${category.name} - ${category.emoji}` }}</mat-option>
+									}
+								</mat-select>
+								<mat-error>
+									<ex-validator [control]="categoryControl" />
+								</mat-error>
+							</mat-form-field>
+
+							@let typeControl = transactionFilterForm.controls.type;
+							<mat-form-field subscriptSizing="dynamic">
+								<mat-label>Type</mat-label>
+								<mat-select [formControl]="typeControl">
+									<mat-option [value]="null">All</mat-option>
+									@for (type of transactionTypesArr; track type) {
+										<mat-option [value]="type">{{ type }}</mat-option>
+									}
+								</mat-select>
+								<mat-error>
+									<ex-validator [control]="typeControl" />
+								</mat-error>
+							</mat-form-field>
+
+							@let recurringControl = transactionFilterForm.controls.recurring;
+							<mat-checkbox [formControl]="recurringControl">Recurring</mat-checkbox>
+						</ex-filter-menu>
+					</div>
 				</div>
 			</div>
 			<ex-data-table
diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
index 1134382..0c2ead1 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
@@ -8,4 +8,8 @@
 	.bigger-row {
 		flex-basis: 70%;
 	}
+}
+
+mat-form-field {
+	width: 225px;
 }
\ No newline at end of file
diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
index 3847765..7595f11 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
@@ -1,22 +1,34 @@
 import { CommonModule } from '@angular/common';
 import { Component, inject, OnInit } from '@angular/core';
+import { NonNullableFormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatError, MatFormFieldModule, MatLabel } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { Category } from '../../data-model/modules/category/Category';
 import { PagedResponse } from '../../data-model/modules/common/PagedResponse';
 import { RecurringTransactionsResponse } from '../../data-model/modules/transaction/RecurringTransactionsResponse';
 import { Transaction } from '../../data-model/modules/transaction/Transaction';
+import { TransactionFilter } from '../../data-model/modules/transaction/TransactionFilter';
 import { TransactionType } from '../../data-model/modules/transaction/TransactionType';
+import { BaseComponent } from '../../shared/base-component/base.component';
 import { ButtonComponent } from '../../shared/button/button.component';
 import { DataTableComponent } from '../../shared/data-table/data-table.component';
 import { DisplaySizeService } from '../../shared/display-size.service';
+import { FilterMenuComponent } from '../../shared/filter-menu/filter-menu.component';
 import { SnackbarService } from '../../shared/snackbar/snackbar.service';
+import { ValidatorComponent } from '../../shared/validator/validator.component';
 import { CategoryService } from '../category.service';
 import { CreateCategoryDialogComponent } from './create-category-dialog/create-category-dialog.component';
 import { CreateTransactionDialogComponent, CreateTransactionDialogData } from './create-transaction-dialog/create-transaction-dialog.component';
 import { TransactionService } from './transaction.service';
+import { InputClearButtonComponent } from '../../shared/input-clear-button/input-clear-button.component';
 
 @Component({
 	selector: 'ex-transactions-and-categories',
@@ -24,21 +36,49 @@ import { TransactionService } from './transaction.service';
 	styleUrl: './transactions-and-categories.component.scss',
 	imports: [
 		CommonModule,
+		ReactiveFormsModule,
+		MatFormFieldModule,
 		MatDialogModule,
 		MatTabsModule,
 		MatIconModule,
 		MatTooltipModule,
+		MatInputModule,
+		MatCheckboxModule,
+		MatSelectModule,
+		MatBadgeModule,
+		MatDatepickerModule,
+		MatLabel,
+		MatError,
 		DataTableComponent,
 		ButtonComponent,
+		FilterMenuComponent,
+		ValidatorComponent,
+		InputClearButtonComponent,
 	],
 })
-export class TransactionsAndCategoriesComponent implements OnInit {
+export class TransactionsAndCategoriesComponent extends BaseComponent implements OnInit {
 	private readonly transactionService = inject(TransactionService);
 	private readonly categoryService = inject(CategoryService);
 	private readonly dialog = inject(MatDialog);
 	private readonly snackbarService = inject(SnackbarService);
+	private readonly fb = inject(NonNullableFormBuilder);
 	readonly display = inject(DisplaySizeService);
 
+	transactionFilterForm = this.fb.group({
+		searchText: this.fb.control<string>('', [Validators.maxLength(255)]),
+		dateRange: this.fb.group({
+			dateFrom: this.fb.control<Date | null>(null),
+			dateTo: this.fb.control<Date | null>(null),
+		}),
+		amountRange: this.fb.group({
+			min: this.fb.control<number | null>(null),
+			max: this.fb.control<number | null>(null),
+		}),
+		category: this.fb.control<Category | null>(null),
+		type: this.fb.control<TransactionType | null>(null),
+		recurring: this.fb.control<boolean>(false),
+	});
+
 	transactions: PagedResponse<Transaction> = {} as PagedResponse<Transaction>;
 	recurringTransactions: RecurringTransactionsResponse = {} as RecurringTransactionsResponse;
 	categories: Category[] = [];
@@ -46,13 +86,29 @@ export class TransactionsAndCategoriesComponent implements OnInit {
 	selectedIndex = 0;
 
 	transactionTypes = TransactionType;
+	transactionTypesArr = Object.values(this.transactionTypes);
+
+	get canCreateTransaction(): boolean { return !!this.categories.length; }
 
-	get canCreateTransaction(): boolean {
-		return !!this.categories.length;
+	get appliedFiltersCount(): number {
+		return Object.entries(this.transactionFilterForm.controls).reduce((sum, [key, control]) => {
+			if (key === 'dateRange' || key === 'amountRange') {
+				const groupValue = control.value as Record<string, unknown>;
+				const hasValue = Object.values(groupValue).some(v => !!v);
+				return sum + (hasValue ? 1 : 0);
+			}
+			if (control.value) return sum + 1;
+			return sum;
+		}, 0);
 	}
 
 	async ngOnInit(): Promise<void> {
 		await this.initialize();
+
+		this.addSubscription(this.transactionFilterForm.valueChanges.subscribe(async () => {
+			if (this.transactionFilterForm.invalid) return;
+			this.transactions = await this.getTransactions();
+		}));
 	}
 
 	async initialize(): Promise<void> {
@@ -96,4 +152,19 @@ export class TransactionsAndCategoriesComponent implements OnInit {
 	async onDataChanged(): Promise<void> {
 		await this.initialize();
 	}
+
+	getTransactions(): Promise<PagedResponse<Transaction>> {
+		const formValue = this.transactionFilterForm.getRawValue();
+		const filters = {
+			keyword: formValue.searchText,
+			dateFrom: formValue.dateRange.dateFrom?.toISOString(),
+			dateTo: formValue.dateRange.dateTo?.toISOString(),
+			categoryId: formValue.category?.id,
+			type: formValue.type,
+			amountFrom: formValue.amountRange.min,
+			amountTo: formValue.amountRange.max,
+			recurring: formValue.recurring,
+		} as TransactionFilter;
+		return this.transactionService.list(filters);
+	}
 }
diff --git a/frontend/Exence/src/app/shared/data-table/data-table.component.scss b/frontend/Exence/src/app/shared/data-table/data-table.component.scss
index 912ef4b..51b3a48 100644
--- a/frontend/Exence/src/app/shared/data-table/data-table.component.scss
+++ b/frontend/Exence/src/app/shared/data-table/data-table.component.scss
@@ -1,7 +1,7 @@
 @import '../../../styles/imports.scss';
 
 :host {
-	height: 100%;
+	flex-grow: 1;
 }
 
 .table-container {
diff --git a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
index 840d186..d62144a 100644
--- a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
+++ b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
@@ -14,7 +14,7 @@
 
 <mat-menu #filterMenu>
 	<div
-		class="d-flex flex-column gap-3 p-4"
+		class="d-flex flex-column gap-3 p-4 menu"
 		(click)="$event.stopPropagation()"
 	>
 		<div
diff --git a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.scss b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.scss
index e69de29..52d506c 100644
--- a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.scss
+++ b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.scss
@@ -0,0 +1,3 @@
+.menu {
+	max-width: 266px;
+}
\ No newline at end of file
diff --git a/frontend/Exence/src/styles/components/error.scss b/frontend/Exence/src/styles/components/error.scss
new file mode 100644
index 0000000..98b9c38
--- /dev/null
+++ b/frontend/Exence/src/styles/components/error.scss
@@ -0,0 +1,4 @@
+mat-error.mat-mdc-form-field-error {
+	--mat-form-field-error-text-color: var(--error-color);
+	font-weight: 600;
+}
\ No newline at end of file
diff --git a/frontend/Exence/src/styles/components/form-field.scss b/frontend/Exence/src/styles/components/form-field.scss
index c59a573..da120ce 100644
--- a/frontend/Exence/src/styles/components/form-field.scss
+++ b/frontend/Exence/src/styles/components/form-field.scss
@@ -64,4 +64,23 @@ mat-error {
 
 .mat-mdc-form-field-icon-suffix {
 	margin-right: 0.5rem;
+}
+
+mat-form-field.mat-mdc-form-field.search {
+	--mat-form-field-container-height: 32px;
+	--mat-form-field-outlined-outline-width: 1px;
+	--mat-form-field-container-vertical-padding: 1px;
+	--mat-form-field-outlined-container-shape: 20px;
+	
+	.mat-mdc-form-field-infix {
+		min-height: unset;
+		padding: unset;
+	}
+
+	.mat-mdc-form-field-flex {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		padding-left: 0.5rem;
+	}
 }
\ No newline at end of file
diff --git a/frontend/Exence/src/styles/styles.scss b/frontend/Exence/src/styles/styles.scss
index 5846dd5..2bc08c0 100644
--- a/frontend/Exence/src/styles/styles.scss
+++ b/frontend/Exence/src/styles/styles.scss
@@ -16,6 +16,7 @@
 @import './components/divider.scss';
 @import './components/snackbar.scss';
 @import './components/badge.scss';
+@import './components/error.scss';
 @import './fonts/material-icons.scss';
 
 * {

From 8026b74725f3a2a7cda3e3fca8eb1279d56acc4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Sat, 10 Jan 2026 20:45:48 +0100
Subject: [PATCH 06/11] Fix validator update on content change, alignemtns fix
 in transactions-and-categories

---
 .../transactions-and-categories.component.html   |  9 ++++++---
 .../transactions-and-categories.component.ts     |  4 ++--
 .../shared/validator/validator.component.html    | 10 +++++-----
 .../app/shared/validator/validator.component.ts  | 16 ++++++++++------
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.html b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.html
index d99645b..68927ca 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.html
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.html
@@ -111,7 +111,7 @@
 		>
 			<div class="d-flex flex-row flex-nowrap justif-content-between">
 				<div
-					class="d-flex flex-row flex-nowrap justify-content-between gap-2 w-100"
+					class="d-flex flex-row flex-nowrap justify-content-between gap-3 w-100"
 					[matTooltip]="
 						!canCreateTransaction ? 'First create a category!' : ''
 					"
@@ -127,7 +127,10 @@
 						Add transaction
 					</ex-button>
 
-					<div class="d-flex flex-row flex-nowrap gap-2">
+					<div class="d-flex flex-row flex-nowrap gap-3">
+						<mat-error class="align-self-center">
+							<ex-validator [control]="transactionFilterForm.controls.searchText" />
+						</mat-error>
 						<mat-form-field subscriptSizing="dynamic" class="search">
 							<ex-button
 								iconButton
@@ -225,7 +228,7 @@
 
 <ng-template #categoriesTab>
 	<div
-		class="d-flex flex-column justify-content-between gap-4 h-100 mt-4"
+		class="d-flex flex-column justify-content-between gap-2 h-100 mt-4"
 		[class.overflow-hidden]="display.isMd()"
 	>
 		<div class="d-flex flex-row flex-norwap gap-2 align-items-center">
diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
index 7595f11..d0d3dfc 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.ts
@@ -22,13 +22,13 @@ import { ButtonComponent } from '../../shared/button/button.component';
 import { DataTableComponent } from '../../shared/data-table/data-table.component';
 import { DisplaySizeService } from '../../shared/display-size.service';
 import { FilterMenuComponent } from '../../shared/filter-menu/filter-menu.component';
+import { InputClearButtonComponent } from '../../shared/input-clear-button/input-clear-button.component';
 import { SnackbarService } from '../../shared/snackbar/snackbar.service';
 import { ValidatorComponent } from '../../shared/validator/validator.component';
 import { CategoryService } from '../category.service';
 import { CreateCategoryDialogComponent } from './create-category-dialog/create-category-dialog.component';
 import { CreateTransactionDialogComponent, CreateTransactionDialogData } from './create-transaction-dialog/create-transaction-dialog.component';
 import { TransactionService } from './transaction.service';
-import { InputClearButtonComponent } from '../../shared/input-clear-button/input-clear-button.component';
 
 @Component({
 	selector: 'ex-transactions-and-categories',
@@ -65,7 +65,7 @@ export class TransactionsAndCategoriesComponent extends BaseComponent implements
 	readonly display = inject(DisplaySizeService);
 
 	transactionFilterForm = this.fb.group({
-		searchText: this.fb.control<string>('', [Validators.maxLength(255)]),
+		searchText: this.fb.control<string>('', [Validators.maxLength(100)]),
 		dateRange: this.fb.group({
 			dateFrom: this.fb.control<Date | null>(null),
 			dateTo: this.fb.control<Date | null>(null),
diff --git a/frontend/Exence/src/app/shared/validator/validator.component.html b/frontend/Exence/src/app/shared/validator/validator.component.html
index 1125091..57b0883 100644
--- a/frontend/Exence/src/app/shared/validator/validator.component.html
+++ b/frontend/Exence/src/app/shared/validator/validator.component.html
@@ -1,5 +1,5 @@
-@if (errorKey) {
-	@switch (errorKey) {
+@if (errorKey()) {
+	@switch (errorKey()) {
 		@case ('required') {
 			Field required
 		}
@@ -13,13 +13,13 @@
 			Invalid email format!
 		}
 		@case ('maxlength') {
-			Max length is {{ errorValue?.requiredLength }}!
+			Max length is {{ errorValue()?.requiredLength }}!
 		}
 		@case ('min') {
-			Minimum value is {{ errorValue?.min }}!
+			Minimum value is {{ errorValue()?.min }}!
 		}
 		@case ('max') {
-			Maximum value is {{ errorValue?.max }}!
+			Maximum value is {{ errorValue()?.max }}!
 		}
 	}
 }
diff --git a/frontend/Exence/src/app/shared/validator/validator.component.ts b/frontend/Exence/src/app/shared/validator/validator.component.ts
index 794d705..3d1d6bb 100644
--- a/frontend/Exence/src/app/shared/validator/validator.component.ts
+++ b/frontend/Exence/src/app/shared/validator/validator.component.ts
@@ -1,4 +1,4 @@
-import { Component, input, OnInit } from '@angular/core';
+import { Component, input, OnInit, signal } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import { merge, of } from 'rxjs';
 import { BaseComponent } from '../base-component/base.component';
@@ -17,15 +17,19 @@ interface ErrorInfo {
 export class ValidatorComponent extends BaseComponent implements OnInit {
 	control = input.required<AbstractControl>();
 	
-	errorKey?: string;
-	errorValue?: ErrorInfo;
+	errorKey = signal<string>('');
+	errorValue = signal<ErrorInfo | null>(null);
 	
 	ngOnInit(): void {
 		this.addSubscription(merge(of(this.control().dirty), this.control().statusChanges).subscribe(
 			() => {
-				if (!this.control().errors) return;
-				this.errorKey = Object.keys(this.control().errors!)[0];
-				this.errorValue = this.control().errors![this.errorKey];
+				if (!this.control().errors) {
+					this.errorKey.set('');
+					this.errorValue.set(null);
+					return;
+				}
+				this.errorKey.set(Object.keys(this.control().errors!)[0]);
+				this.errorValue.set(this.control().errors![this.errorKey()] as ErrorInfo);
 			}
 		));
 	}

From 5a9a92a37b6226b36f3a14bd0cc03784628780c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Sat, 10 Jan 2026 22:10:37 +0100
Subject: [PATCH 07/11] #EX-139: Add mat-bottom-sheet filter menu on mobile

---
 ...transactions-and-categories.component.scss |  6 +-
 .../filter-menu/filter-menu.component.html    | 74 +++++++++++++++----
 .../filter-menu/filter-menu.component.ts      | 24 +++++-
 .../src/styles/components/bottom-sheet.scss   |  7 ++
 frontend/Exence/src/styles/styles.scss        |  1 +
 5 files changed, 94 insertions(+), 18 deletions(-)
 create mode 100644 frontend/Exence/src/styles/components/bottom-sheet.scss

diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
index 0c2ead1..1a8ed25 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
@@ -10,6 +10,8 @@
 	}
 }
 
-mat-form-field {
-	width: 225px;
+@include displayMd {
+	mat-form-field {
+		width: 225px;
+	}
 }
\ No newline at end of file
diff --git a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
index d62144a..07e5780 100644
--- a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
+++ b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
@@ -1,16 +1,28 @@
-<ex-button
-	color="primary"
-	filled
-	matIcon="filter_alt"
-	collapseUnder="md"
-	collapsedStyle="filled"
-	[matMenuTriggerFor]="filterMenu"
-	[matBadgeHidden]="!appliedFiltersCount()"
-	[matBadge]="appliedFiltersCount()"
-	matBadgePosition="before"
->
-	Add filter
-</ex-button>
+@if (display.isMd()) {
+	<ex-button
+		color="primary"
+		filled
+		matIcon="filter_alt"
+		[matMenuTriggerFor]="filterMenu"
+		[matBadgeHidden]="!appliedFiltersCount()"
+		[matBadge]="appliedFiltersCount()"
+		matBadgePosition="before"
+	>
+		Add filter
+	</ex-button>
+} @else {
+	<ex-button
+		color="primary"
+		filled
+		matIcon="filter_alt"
+		collapseUnder="md"
+		collapsedStyle="filled"
+		(click)="openBottomSheet()"
+		[matBadgeHidden]="!appliedFiltersCount()"
+		[matBadge]="appliedFiltersCount()"
+		matBadgePosition="before"
+	/>
+}
 
 <mat-menu #filterMenu>
 	<div
@@ -30,6 +42,42 @@ <h3 class="m-0">Filters</h3>
 			/>
 		</div>
 
+		<!-- <ng-template #filterContent> -->
 		<ng-content />
+		<!-- </ng-template> -->
 	</div>
 </mat-menu>
+
+<ng-template #filterSheet>
+	<ex-button
+		iconButton
+		color="primary"
+		matIcon="clear"
+		(click)="closeSheet()"
+		class="position-absolute top-0 end-0"
+	/>
+	<div class="d-flex flex-column gap-3 p-4 h-100">
+		<h3 class="fs-1 m-0 text-center">Filters</h3>
+
+		<div class="d-flex flex-column gap-3 p-4 overflow-y-auto">
+			<ng-content />
+		</div>
+
+		<div class="d-flex flex-column gap-2">
+			<ex-button
+				matIcon="visibility"
+				(click)="closeSheet()"
+				[disabled]="!appliedFiltersCount()"
+			>
+				Show ({{ appliedFiltersCount() }})
+			</ex-button>
+			<ex-button
+				color="accent"
+				matIcon="filter_alt_off"
+				(click)="clearFilters(); closeSheet()"
+			>
+				Clear all
+			</ex-button>
+		</div>
+	</div>
+</ng-template>
diff --git a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts
index abac9dc..8100c6b 100644
--- a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts
+++ b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts
@@ -1,23 +1,41 @@
-import { Component, input } from '@angular/core';
+import { Component, inject, input, TemplateRef, viewChild } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { MatMenuModule } from '@angular/material/menu';
 import { MatBadgeModule } from '@angular/material/badge';
+import { MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
+import { MatMenuModule } from '@angular/material/menu';
 import { ButtonComponent } from '../button/button.component';
+import { DisplaySizeService } from '../display-size.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
 	selector: 'ex-filter-menu',
 	templateUrl: './filter-menu.component.html',
 	styleUrl: './filter-menu.component.scss',
 	imports: [
+		CommonModule,
 		MatMenuModule,
 		MatBadgeModule,
+		MatBottomSheetModule,
 		ButtonComponent,
 	],
 })
 export class FilterMenuComponent {
+	private readonly bottomSheet = inject(MatBottomSheet);
+	public display = inject(DisplaySizeService);
+
 	form = input.required<FormGroup>();
 	appliedFiltersCount = input.required<number>();
-	
+
+	filterSheet = viewChild<TemplateRef<unknown>>('filterSheet');
+
+	openBottomSheet(): void {
+		this.bottomSheet.open(this.filterSheet()!);
+	}
+
+	closeSheet(): void {
+		this.bottomSheet.dismiss();
+	}
+
 	clearFilters(): void {
 		this.form().reset();
 	}
diff --git a/frontend/Exence/src/styles/components/bottom-sheet.scss b/frontend/Exence/src/styles/components/bottom-sheet.scss
new file mode 100644
index 0000000..a933df6
--- /dev/null
+++ b/frontend/Exence/src/styles/components/bottom-sheet.scss
@@ -0,0 +1,7 @@
+mat-bottom-sheet-container.mat-bottom-sheet-container {
+	--mat-bottom-sheet-container-background-color: var(--app-card-color);
+	--mat-bottom-sheet-container-text-color: var(--default-text-color);
+
+	position: relative;
+	overflow: hidden;
+}
\ No newline at end of file
diff --git a/frontend/Exence/src/styles/styles.scss b/frontend/Exence/src/styles/styles.scss
index 2bc08c0..9259d5a 100644
--- a/frontend/Exence/src/styles/styles.scss
+++ b/frontend/Exence/src/styles/styles.scss
@@ -17,6 +17,7 @@
 @import './components/snackbar.scss';
 @import './components/badge.scss';
 @import './components/error.scss';
+@import './components/bottom-sheet.scss';
 @import './fonts/material-icons.scss';
 
 * {

From 11871236ab6c8e28abda5f25792f6ae68e51f7c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Sat, 10 Jan 2026 22:11:53 +0100
Subject: [PATCH 08/11] Add global vscode style

So typescript knows how to import by default
---
 frontend/Exence/.vscode/settings.json | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 frontend/Exence/.vscode/settings.json

diff --git a/frontend/Exence/.vscode/settings.json b/frontend/Exence/.vscode/settings.json
new file mode 100644
index 0000000..8134a6c
--- /dev/null
+++ b/frontend/Exence/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+	"typescript.preferences.quoteStyle": "single"
+}
\ No newline at end of file

From b770a86310acfe1c0c16e5f94f681c202170d68d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Sun, 11 Jan 2026 16:20:20 +0100
Subject: [PATCH 09/11] Fix filter menu, transaction list endpoint

---
 .../transactions-and-categories/transaction.service.ts |  2 +-
 .../app/shared/filter-menu/filter-menu.component.html  | 10 ++++++----
 .../app/shared/filter-menu/filter-menu.component.ts    |  2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts b/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts
index f8be017..b9695a3 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts
@@ -21,7 +21,7 @@ export class TransactionService {
 
 	public list(filters?: TransactionFilter): Promise<PagedResponse<Transaction>> {
 		if (filters) {
-			const request: Record<string, string> = filters as unknown as Record<string, string>;
+			const request: Record<string, string> = JSON.parse(JSON.stringify(filters));
 			return lastValueFrom(this.http.get<PagedResponse<Transaction>>(this.baseUrl, request));
 		}
 		return lastValueFrom(this.http.get<PagedResponse<Transaction>>(this.baseUrl));
diff --git a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
index 07e5780..87141c5 100644
--- a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
+++ b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.html
@@ -42,9 +42,7 @@ <h3 class="m-0">Filters</h3>
 			/>
 		</div>
 
-		<!-- <ng-template #filterContent> -->
-		<ng-content />
-		<!-- </ng-template> -->
+		<ng-container [ngTemplateOutlet]="content" />
 	</div>
 </mat-menu>
 
@@ -60,7 +58,7 @@ <h3 class="m-0">Filters</h3>
 		<h3 class="fs-1 m-0 text-center">Filters</h3>
 
 		<div class="d-flex flex-column gap-3 p-4 overflow-y-auto">
-			<ng-content />
+			<ng-container [ngTemplateOutlet]="content" />
 		</div>
 
 		<div class="d-flex flex-column gap-2">
@@ -81,3 +79,7 @@ <h3 class="fs-1 m-0 text-center">Filters</h3>
 		</div>
 	</div>
 </ng-template>
+
+<ng-template #content>
+	<ng-content />
+</ng-template>
diff --git a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts
index 8100c6b..f444624 100644
--- a/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts
+++ b/frontend/Exence/src/app/shared/filter-menu/filter-menu.component.ts
@@ -21,7 +21,7 @@ import { CommonModule } from '@angular/common';
 })
 export class FilterMenuComponent {
 	private readonly bottomSheet = inject(MatBottomSheet);
-	public display = inject(DisplaySizeService);
+	readonly display = inject(DisplaySizeService);
 
 	form = input.required<FormGroup>();
 	appliedFiltersCount = input.required<number>();

From 63cb93b4c8a2236966d7350d2395c7a3a0867ca0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Sun, 11 Jan 2026 16:24:03 +0100
Subject: [PATCH 10/11] Refactor list method in transaction.service

---
 .../transactions-and-categories/transaction.service.ts     | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts b/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts
index b9695a3..fda4de2 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transaction.service.ts
@@ -20,11 +20,8 @@ export class TransactionService {
 	}
 
 	public list(filters?: TransactionFilter): Promise<PagedResponse<Transaction>> {
-		if (filters) {
-			const request: Record<string, string> = JSON.parse(JSON.stringify(filters));
-			return lastValueFrom(this.http.get<PagedResponse<Transaction>>(this.baseUrl, request));
-		}
-		return lastValueFrom(this.http.get<PagedResponse<Transaction>>(this.baseUrl));
+		const request: Record<string, string> = filters !== undefined ? JSON.parse(JSON.stringify(filters)) : {};
+		return lastValueFrom(this.http.get<PagedResponse<Transaction>>(this.baseUrl, request));
 	}
 
 	public listRecurrings(): Promise<RecurringTransactionsResponse> {

From 21619e71ba1e55c8699123d4a2c199c62444cd27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tam=C3=A1s=20Nagy?= <ntamasalbert@gmail.com>
Date: Sun, 11 Jan 2026 17:26:14 +0100
Subject: [PATCH 11/11] Code review fixes

---
 .../transactions-and-categories.component.scss                | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
index 1a8ed25..1beab8b 100644
--- a/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
+++ b/frontend/Exence/src/app/private/transactions-and-categories/transactions-and-categories.component.scss
@@ -8,9 +8,7 @@
 	.bigger-row {
 		flex-basis: 70%;
 	}
-}
-
-@include displayMd {
+	
 	mat-form-field {
 		width: 225px;
 	}