Add logging service and refactor console.warn to use it

Co-authored-by: THoguet <61246905+THoguet@users.noreply.github.com>

.github/workflows/codeql.yml

@@ -27,15 +27,15 @@ jobs:
               uses: actions/checkout@v4
 
             - name: Initialize CodeQL
-              uses: github/codeql-action/init@v3
+              uses: github/codeql-action/init@v4
               with:
                   languages: ${{ matrix.language }}
                   queries: security-extended,security-and-quality
 
             - name: Autobuild
-              uses: github/codeql-action/autobuild@v3
+              uses: github/codeql-action/autobuild@v4
 
             - name: Perform CodeQL Analysis
-              uses: github/codeql-action/analyze@v3
+              uses: github/codeql-action/analyze@v4
               with:
                   category: '/language:${{matrix.language}}'

.github/workflows/docker-build-push.yml

@@ -52,14 +52,14 @@ jobs:
                   cache-to: type=gha,mode=max
 
             - name: Run Trivy vulnerability scanner
-              uses: aquasecurity/trivy-action@0.27.0
+              uses: aquasecurity/trivy-action@0.33.1
               with:
                   image-ref: ghcr.io/thoguet/vac-optimizer@${{ steps.build.outputs.digest }}
                   format: 'sarif'
                   output: 'trivy-results.sarif'
 
             - name: Upload Trivy results to GitHub Security tab
-              uses: github/codeql-action/upload-sarif@v3
+              uses: github/codeql-action/upload-sarif@v4
               if: always()
               with:
                   sarif_file: 'trivy-results.sarif'

.github/workflows/pr-validation.yml

@@ -14,7 +14,7 @@ jobs:
             - uses: actions/checkout@v4
 
             - name: Setup Node.js
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@v6
               with:
                   node-version: '20'
                   cache: 'npm'
@@ -35,7 +35,7 @@ jobs:
             - uses: actions/checkout@v4
 
             - name: Setup Node.js
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@v6
               with:
                   node-version: '20'
                   cache: 'npm'
@@ -53,7 +53,7 @@ jobs:
             - uses: actions/checkout@v4
 
             - name: Setup Node.js
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@v6
               with:
                   node-version: '20'
                   cache: 'npm'
@@ -65,7 +65,7 @@ jobs:
               run: npm test -- --watch=false --browsers=ChromeHeadless --code-coverage
 
             - name: Upload coverage reports
-              uses: codecov/codecov-action@v4
+              uses: codecov/codecov-action@v5
               if: always()
               with:
                   token: ${{ secrets.CODECOV_TOKEN }}
@@ -79,7 +79,7 @@ jobs:
             - uses: actions/checkout@v4
 
             - name: Setup Node.js
-              uses: actions/setup-node@v4
+              uses: actions/setup-node@v6
               with:
                   node-version: '20'
                   cache: 'npm'
@@ -98,7 +98,7 @@ jobs:
                   echo "Build completed successfully"
 
             - name: Upload build artifacts
-              uses: actions/upload-artifact@v4
+              uses: actions/upload-artifact@v5
               with:
                   name: build-artifacts
                   path: dist/

Dockerfile

@@ -1,5 +1,5 @@
 # Stage 1: Build the Angular application
-FROM node:20-alpine AS builder
+FROM node:25-alpine AS builder
 
 # Set working directory
 WORKDIR /app
@@ -17,7 +17,7 @@ COPY . .
 RUN npm run build
 
 # Stage 2: Production image
-FROM node:20-alpine AS production
+FROM node:25-alpine AS production
 
 # Set working directory
 WORKDIR /app

package.json

@@ -27,16 +27,16 @@
 	},
 	"private": true,
 	"dependencies": {
-		"@angular/cdk": "^20.2.10",
-		"@angular/common": "^20.3.0",
-		"@angular/compiler": "^20.3.0",
-		"@angular/core": "^20.3.7",
-		"@angular/forms": "^20.3.0",
-		"@angular/material": "^20.2.10",
-		"@angular/platform-browser": "^20.3.0",
-		"@angular/platform-server": "^20.3.0",
-		"@angular/router": "^20.3.0",
-		"@angular/ssr": "^20.3.7",
+		"@angular/cdk": "^20.2.12",
+		"@angular/common": "^20.3.10",
+		"@angular/compiler": "^20.3.10",
+		"@angular/core": "^20.3.10",
+		"@angular/forms": "^20.3.10",
+		"@angular/material": "^20.2.12",
+		"@angular/platform-browser": "^20.3.10",
+		"@angular/platform-server": "^20.3.10",
+		"@angular/router": "^20.3.10",
+		"@angular/ssr": "^20.3.10",
 		"date-holidays": "^3.26.2",
 		"dayjs": "^1.11.19",
 		"express": "^5.1.0",
@@ -44,15 +44,15 @@
 		"tslib": "^2.3.0"
 	},
 	"devDependencies": {
-		"@angular/build": "^20.3.7",
-		"@angular/cli": "^20.3.7",
-		"@angular/compiler-cli": "^20.3.0",
-		"@eslint/js": "^9.17.0",
+		"@angular/build": "^20.3.10",
+		"@angular/cli": "^20.3.10",
+		"@angular/compiler-cli": "^20.3.10",
+		"@eslint/js": "^9.39.1",
 		"@types/express": "^5.0.1",
 		"@types/jasmine": "~5.1.0",
 		"@types/jest": "^30.0.0",
 		"@types/node": "^24.10.0",
-		"eslint": "^9.38.0",
+		"eslint": "^9.39.1",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-prettier": "^5.5.4",
 		"jasmine-core": "~5.12.1",
@@ -65,6 +65,6 @@
 		"karma-jasmine-html-reporter": "~2.1.0",
 		"prettier": "^3.6.2",
 		"typescript": "~5.9.2",
-		"typescript-eslint": "^8.19.1"
+		"typescript-eslint": "^8.46.4"
 	}
 }

src/app/components/calendar-month/calendar-month.html

@@ -2,7 +2,7 @@
 	<h3>{{ getMonthName() }} {{ year }}</h3>
 	<div>
 		<div class="row header">
-			@if (calendarSettingsService.showWeekNumbers()) {
+			@if (calendarSettingsService.get('showWeekNumbers')()) {
 				<p class="day empty week-number"></p>
 			}
 			<p class="day">L</p>
@@ -16,7 +16,7 @@
 		<div class="cols">
 			@for (week of weeksInAMonth; track $index) {
 				<div class="row week">
-					@if (calendarSettingsService.showWeekNumbers()) {
+					@if (calendarSettingsService.get('showWeekNumbers')()) {
 						<p
 							class="day week-number"
 							[class.start]="$index === 0"
@@ -38,7 +38,6 @@
 								class="day number"
 								[matTooltip]="selectedDates.getTooltip(day)"
 								[matTooltipShowDelay]="500"
-								[matTooltipTouchGestures]="'on'"
 							>
 								{{ day.getDate() }}
 							</p>

src/app/components/calendar-year/calendar-year.html

@@ -2,7 +2,10 @@
 	@if (isLoading()) {
 		<div class="loading-overlay">
 			<div class="loading-spinner">
-				<mat-spinner></mat-spinner>
+				<div class="spinner-container">
+					<mat-spinner [mode]="'determinate'" [value]="loadingProgress()"></mat-spinner>
+					<div class="spinner-text">{{ loadingProgress() }}%</div>
+				</div>
 				<p>Calcul en cours...</p>
 			</div>
 		</div>

src/app/components/calendar-year/calendar-year.scss

@@ -51,25 +51,32 @@
 	}
 }
 
+.spinner-container {
+	position: relative;
+	display: inline-block;
+
+	::ng-deep .mat-mdc-progress-spinner {
+		// Override Material spinner size
+		width: 100px;
+		height: 100px;
+	}
+
+	.spinner-text {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		font-size: 20px;
+		font-weight: bold;
+		color: #333;
+		pointer-events: none;
+
+		@media (prefers-color-scheme: dark) {
+			color: #ddd;
+		}
+	}
+}
+
 .card {
 	margin: 16px;
 }
-
-@keyframes spin {
-	0% {
-		transform: rotate(0deg);
-	}
-
-	100% {
-		transform: rotate(360deg);
-	}
-}
-
-:root {
-	@include mat.progress-spinner-overrides(
-		(
-			size: 0.5rem,
-			active-indicator-width: 0.25rem,
-		)
-	);
-}

src/app/components/calendar-year/calendar-year.ts

@@ -7,6 +7,7 @@ import { CommonModule } from '@angular/common';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
 import { CalendarSettingsService } from '../../services/calendar-settings-service';
 import { DateCacheService } from '../../services/date-cache.service';
+import { LoggerService } from '../../services/logger.service';
 
 @Component({
 	selector: 'app-calendar-year',
@@ -19,8 +20,10 @@ export class CalendarYear {
 	private userInput = inject(UserInputService);
 	private calendarService = inject(CalendarService);
 	private calendarSettingsService = inject(CalendarSettingsService);
+	private logger = inject(LoggerService);
 
 	protected isLoading = signal(true);
+	protected loadingProgress = signal(0);
 
 	// Use DateCacheService instead of creating Date objects
 	private get currentMonth() {
@@ -35,22 +38,31 @@ export class CalendarYear {
 		effect(() => {
 			this.selectedDates = this.calendarService.getSelectedDatesForYear();
 			const vacationData = this.userInput.vacationNumberSignal();
-			const c = this.calendarSettingsService.samediMalin();
+			const c = this.calendarSettingsService.get('samediMalin')();
 			console.log('Samedi Malin setting:', c);
 			console.log('Optimizing vacations with data:', vacationData);
 			this.isLoading.set(true);
-			// Simulate server-side calculation with a small delay
-			setTimeout(() => {
-				if (this.selectedDates) {
-					// Create a copy to avoid mutating the original signal data
-					this.selectedDates.optimizeVacations(
-						{ ...vacationData },
-						this.calendarSettingsService,
-						this.calendarService,
-					);
-				}
-				this.isLoading.set(false);
-			}, 1);
+			this.loadingProgress.set(0);
+			// Defer execution to allow UI to update
+			queueMicrotask(() => {
+				void (async () => {
+					if (this.selectedDates) {
+						// Create a copy to avoid mutating the original signal data
+						const remainingDays = await this.selectedDates.optimizeVacations(
+							{ ...vacationData },
+							this.calendarSettingsService,
+							this.calendarService,
+							(progress: number) => {
+								this.loadingProgress.set(progress);
+							},
+							this.logger,
+						);
+						// Update the remaining vacation days signal
+						this.userInput.remainingVacationDaysSignal.set(remainingDays);
+					}
+					this.isLoading.set(false);
+				})();
+			});
 		});
 	}
 

src/app/components/dialog/calendar-settings-dialog/calendar-settings-dialog.html

@@ -4,15 +4,15 @@
 		<p>Configure your calendar settings here.</p>
 	</div>
 	<div style="display: flex; flex-direction: column; gap: 1rem">
-		@for (signal of calendarSettingsService.settings; track signal.id) {
+		@for (setting of calendarSettingsService.settingsArray; track setting.id) {
 			<div style="align-self: flex-start">
 				<mat-slide-toggle
-					[id]="signal.id"
-					[name]="signal.id"
-					[checked]="signal.signal()"
-					(change)="signal.signal.set($event.checked)"
+					[id]="setting.id"
+					[name]="setting.id"
+					[checked]="setting.signal()"
+					(change)="setting.signal.set($event.checked)"
 				>
-					{{ signal.description }}
+					{{ setting.description }}
 				</mat-slide-toggle>
 			</div>
 		}

src/app/components/user-input/user-input.html

@@ -14,5 +14,16 @@
 			<input matInput type="number" max="365" min="0" formControlName="Others" />
 		</mat-form-field>
 	</form>
+	@if (hasRemainingDays()) {
+		<mat-card class="mat-elevation-z2 warning-card">
+			<mat-card-content class="warning-content">
+				<mat-icon color="warn" aria-hidden="true">warning</mat-icon>
+				<span>
+					{{ remainingDays() }} jour{{ remainingDays() > 1 ? 's' : '' }} de vacances non
+					placé{{ remainingDays() > 1 ? 's' : '' }}. Veuillez les placer manuellement.
+				</span>
+			</mat-card-content>
+		</mat-card>
+	}
 	<app-calendar-settings></app-calendar-settings>
 </div>

src/app/components/user-input/user-input.scss

@@ -13,6 +13,16 @@
 		font-size: 0.875rem;
 		margin-top: 0.25rem;
 	}
+
+	.warning-card {
+		margin-bottom: 1rem;
+	}
+
+	.warning-content {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+	}
 }
 
 form {

src/app/components/user-input/user-input.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, effect } from '@angular/core';
+import { Component, OnInit, OnDestroy, effect, computed } from '@angular/core';
 import { MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
@@ -6,6 +6,8 @@ import { UserInputService } from '../../services/user-input-service';
 import { VacationsNumber } from '../../services/calendar-service';
 import { debounceTime, takeUntil, Subject } from 'rxjs';
 import { CalendarSettings } from '../calendar-settings/calendar-settings';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
 	selector: 'app-user-input',
@@ -15,7 +17,9 @@ import { CalendarSettings } from '../calendar-settings/calendar-settings';
 		MatInputModule,
 		ReactiveFormsModule,
 		CalendarSettings,
-		CalendarSettings,
+		MatCard,
+		MatCardContent,
+		MatIcon,
 	],
 	templateUrl: './user-input.html',
 	styleUrl: './user-input.scss',
@@ -44,6 +48,13 @@ export class UserInput implements OnInit, OnDestroy {
 		Others: new FormControl<number | null>(null),
 	});
 
+	protected remainingDays = computed(() => {
+		const remaining = this.userInputService.remainingVacationDaysSignal();
+		return remaining.cp + remaining.rtt + remaining.other;
+	});
+
+	protected hasRemainingDays = computed(() => this.remainingDays() > 0);
+
 	ngOnInit() {
 		this.userInputForm.valueChanges
 			.pipe(debounceTime(1500), takeUntil(this.destroy$))

src/app/services/calendar-service.ts

@@ -6,6 +6,7 @@ import weekOfYear from 'dayjs/plugin/weekOfYear';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import { CalendarSettingsService } from './calendar-settings-service';
 import { DateCacheService } from './date-cache.service';
+import { LoggerService } from './logger.service';
 
 dayjs.extend(weekOfYear);
 dayjs.extend(isoWeek);
@@ -21,6 +22,7 @@ const allTypesOptions: HolidaysTypes.Options = {
 })
 export class CalendarService {
 	private dateCache = inject(DateCacheService);
+	private logger = inject(LoggerService);
 
 	// Cache for holiday timestamps
 	private holidayTimestampsCache: Set<number> | null = null;
@@ -298,6 +300,7 @@ export class SelectedDates implements SelectedDateInterface {
 
 	// Constant to indicate no valid strategy was found
 	private static readonly NO_VALID_STRATEGY_HEURISTIC = -1;
+	private static readonly MAX_DAYS_WITH_SAME_HEURISTIC = 9;
 
 	update(): void {
 		this.datesSelected = this._datesSelected.slice();
@@ -501,7 +504,7 @@ export class SelectedDates implements SelectedDateInterface {
 
 			// Check if adjacent (next day) - this is the best case!
 			if (nextStartTime - currentEndTime === oneDayInMs) {
-				totalScore += 10; // Big bonus for adjacency
+				totalScore += 15; // 50% increased bonus for adjacency; adjacency is highly valued in the scoring system
 			} else if (nextStartTime > currentEndTime) {
 				// Penalty based on days between the two dates
 				const daysBetween = Math.floor((nextStartTime - currentEndTime) / oneDayInMs) - 1;
@@ -535,18 +538,44 @@ export class SelectedDates implements SelectedDateInterface {
 		return totalScore;
 	}
 
-	optimizeVacations(
+	async optimizeVacations(
 		vacationsNumber: VacationsNumber,
 		calendarSettingsService: CalendarSettingsService,
 		calendarService: CalendarService,
-	): void {
-		if (calendarSettingsService.samediMalin()) this.samediMalin(vacationsNumber);
+		progressCallback?: (progress: number) => void,
+		logger?: LoggerService,
+	): Promise<VacationsNumber> {
+		if (calendarSettingsService.get('samediMalin')()) this.samediMalin(vacationsNumber);
+
+		const initialVacations = { ...vacationsNumber };
+		const totalDays = initialVacations.cp + initialVacations.rtt + initialVacations.other;
+		let processedDays = 0;
+
+		// Helper function to update progress, throttled to every 5%
+		let lastReportedProgress = 0;
+		const PROGRESS_STEP = 5; // percent
+		const updateProgress = async () => {
+			if (progressCallback && totalDays > 0) {
+				const progress = Math.round((processedDays / totalDays) * 100);
+				if (progress - lastReportedProgress >= PROGRESS_STEP || progress === 100) {
+					progressCallback(progress);
+					lastReportedProgress = progress;
+					// Allow UI to update with a microtask
+					await new Promise((resolve) => setTimeout(resolve, 0));
+				}
+			}
+		};
+
+		await updateProgress();
+
 		while (vacationsNumber.cp > 0) {
 			const result = this.lookForVacation(DayType.CP, calendarService);
 			if (result.heuristic === SelectedDates.NO_VALID_STRATEGY_HEURISTIC) {
 				break;
 			}
 			vacationsNumber.cp -= 1;
+			processedDays++;
+			await updateProgress();
 		}
 		while (vacationsNumber.rtt > 0) {
 			const result = this.lookForVacation(DayType.RTT, calendarService);
@@ -554,6 +583,8 @@ export class SelectedDates implements SelectedDateInterface {
 				break;
 			}
 			vacationsNumber.rtt -= 1;
+			processedDays++;
+			await updateProgress();
 		}
 		while (vacationsNumber.other > 0) {
 			const result = this.lookForVacation(DayType.OTHER, calendarService);
@@ -561,7 +592,25 @@ export class SelectedDates implements SelectedDateInterface {
 				break;
 			}
 			vacationsNumber.other -= 1;
+			processedDays++;
+			await updateProgress();
 		}
+
+		// Final progress update (100%)
+		if (progressCallback) {
+			progressCallback(100);
+		}
+
+		// Inform user if not all days were placed
+		const remainingDays = vacationsNumber.cp + vacationsNumber.rtt + vacationsNumber.other;
+		if (remainingDays > 0 && logger) {
+			logger.warn(
+				`Optimization stopped: ${remainingDays} of ${totalDays} vacation days remain unplaced. ` +
+					`Too many days have equivalent placement quality - please place remaining days manually.`,
+			);
+		}
+
+		return vacationsNumber;
 	}
 
 	samediMalin(vacationsNumber: VacationsNumber): void {
@@ -751,6 +800,7 @@ export class SelectedDates implements SelectedDateInterface {
 		const tempDatesBackup = [...this._datesSelected];
 		let bestStrategy: { apply: () => void; heuristic: number; value: Date } | null = null;
 		let bestHeuristic = -Infinity;
+		let daysWithBestHeuristic = 0;
 
 		// Evaluate each candidate day
 		for (const day of candidateDays) {
@@ -767,6 +817,7 @@ export class SelectedDates implements SelectedDateInterface {
 			// Track only if better than current best
 			if (heuristic > bestHeuristic) {
 				bestHeuristic = heuristic;
+				daysWithBestHeuristic = 1;
 				const capturedDay = day;
 				bestStrategy = {
 					apply: () => {
@@ -781,9 +832,25 @@ export class SelectedDates implements SelectedDateInterface {
 					heuristic: heuristic,
 					value: capturedDay,
 				};
+			} else if (heuristic === bestHeuristic) {
+				daysWithBestHeuristic++;
 			}
 		}
 
+		// Check if too many days have the same best heuristic after evaluating all days
+		if (daysWithBestHeuristic > SelectedDates.MAX_DAYS_WITH_SAME_HEURISTIC) {
+			// Restore backup before stopping
+			this._datesSelected = [...tempDatesBackup];
+			this.datesSelected = this._datesSelected.slice();
+			this.grouping();
+
+			// Stop optimization - let user decide manually
+			return {
+				apply: () => {},
+				heuristic: SelectedDates.NO_VALID_STRATEGY_HEURISTIC,
+			};
+		}
+
 		// Restore backup before returning
 		this._datesSelected = [...tempDatesBackup];
 		this.datesSelected = this._datesSelected.slice();

src/app/services/calendar-settings-service.spec.ts

@@ -17,17 +17,29 @@ describe('CalendarSettingsService', () => {
 	});
 
 	it('should initialize with default values', () => {
-		expect(service.showWeekNumbers()).toBe(false);
-		expect(service.samediMalin()).toBe(true);
+		expect(service.get('showWeekNumbers')()).toBe(false);
+		expect(service.get('samediMalin')()).toBe(true);
 	});
 
 	it('should allow updating showWeekNumbers', () => {
-		service.showWeekNumbers.set(true);
-		expect(service.showWeekNumbers()).toBe(true);
+		service.get('showWeekNumbers').set(true);
+		expect(service.get('showWeekNumbers')()).toBe(true);
 	});
 
 	it('should allow updating samediMalin', () => {
-		service.samediMalin.set(false);
-		expect(service.samediMalin()).toBe(false);
+		service.get('samediMalin').set(false);
+		expect(service.get('samediMalin')()).toBe(false);
+	});
+
+	it('should provide settings array for UI iteration', () => {
+		const settingsArray = service.settingsArray;
+		expect(settingsArray.length).toBe(2);
+		expect(settingsArray[0].id).toBe('showWeekNumbers');
+		expect(settingsArray[1].id).toBe('samediMalin');
+	});
+
+	it('should return correct descriptions', () => {
+		expect(service.getDescription('showWeekNumbers')).toBe('Afficher les numéros de semaine');
+		expect(service.getDescription('samediMalin')).toBe('Activer le Samedi Malin');
 	});
 });

src/app/services/calendar-settings-service.ts

@@ -1,8 +1,8 @@
-import { Injectable, signal, WritableSignal } from '@angular/core';
+import { Injectable, WritableSignal, inject, Injector } from '@angular/core';
+import { storedSignal } from '../shared/utils/stored-signal';
 
-interface CalendarSetting {
-	signal: WritableSignal<boolean>;
-	id: string;
+interface SettingDefinition {
+	defaultValue: boolean;
 	description: string;
 }
 
@@ -10,19 +10,59 @@ interface CalendarSetting {
 	providedIn: 'root',
 })
 export class CalendarSettingsService {
-	readonly showWeekNumbers = signal(false);
-	readonly samediMalin = signal(true);
+	private readonly injector = inject(Injector);
 
-	readonly settings: readonly CalendarSetting[] = [
-		{
-			signal: this.showWeekNumbers,
-			id: 'showWeekNumbers',
-			description: 'Afficher les numéros de semaine',
-		},
-		{
-			signal: this.samediMalin,
-			id: 'samediMalin',
-			description: 'Activer le Samedi Malin',
-		},
-	];
+	private readonly definitions = new Map<string, SettingDefinition>([
+		[
+			'showWeekNumbers',
+			{
+				defaultValue: false,
+				description: 'Afficher les numéros de semaine',
+			},
+		],
+		[
+			'samediMalin',
+			{
+				defaultValue: true,
+				description: 'Activer le Samedi Malin',
+			},
+		],
+	]);
+
+	private readonly signals = new Map<string, WritableSignal<boolean>>();
+
+	readonly settingsArray: ReadonlyArray<{
+		id: string;
+		signal: WritableSignal<boolean>;
+		description: string;
+	}>;
+
+	constructor() {
+		for (const [id, def] of this.definitions) {
+			const storageKey = `calendarSettings.${id}`;
+			this.signals.set(id, storedSignal(storageKey, def.defaultValue, this.injector));
+		}
+
+		this.settingsArray = Array.from(this.definitions.entries()).map(([id, def]) => ({
+			id,
+			signal: this.signals.get(id)!,
+			description: def.description,
+		}));
+	}
+
+	/**
+	 * Returns the signal for the given setting ID.
+	 * @throws Error if the setting ID doesn't exist
+	 */
+	get(id: string): WritableSignal<boolean> {
+		const signal = this.signals.get(id);
+		if (!signal) {
+			throw new Error(`Setting with id "${id}" does not exist`);
+		}
+		return signal;
+	}
+
+	getDescription(id: string): string {
+		return this.definitions.get(id)?.description ?? '';
+	}
 }

src/app/services/logger.service.spec.ts

@@ -0,0 +1,52 @@
+import { TestBed } from '@angular/core/testing';
+import { LoggerService } from './logger.service';
+
+describe('LoggerService', () => {
+	let service: LoggerService;
+	let consoleLogSpy: jasmine.Spy;
+	let consoleWarnSpy: jasmine.Spy;
+	let consoleErrorSpy: jasmine.Spy;
+	let consoleDebugSpy: jasmine.Spy;
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({});
+		service = TestBed.inject(LoggerService);
+
+		// Spy on console methods
+		consoleLogSpy = spyOn(console, 'log');
+		consoleWarnSpy = spyOn(console, 'warn');
+		consoleErrorSpy = spyOn(console, 'error');
+		consoleDebugSpy = spyOn(console, 'debug');
+	});
+
+	it('should be created', () => {
+		expect(service).toBeTruthy();
+	});
+
+	it('should log messages', () => {
+		service.log('test message');
+		expect(consoleLogSpy).toHaveBeenCalledWith('test message');
+	});
+
+	it('should log warnings', () => {
+		service.warn('test warning');
+		expect(consoleWarnSpy).toHaveBeenCalledWith('test warning');
+	});
+
+	it('should log errors', () => {
+		service.error('test error');
+		expect(consoleErrorSpy).toHaveBeenCalledWith('test error');
+	});
+
+	it('should log debug messages', () => {
+		service.debug('test debug');
+		expect(consoleDebugSpy).toHaveBeenCalledWith('test debug');
+	});
+
+	it('should pass additional arguments to console methods', () => {
+		const arg1 = { key: 'value' };
+		const arg2 = [1, 2, 3];
+		service.log('test', arg1, arg2);
+		expect(consoleLogSpy).toHaveBeenCalledWith('test', arg1, arg2);
+	});
+});

src/app/services/logger.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * Logger service that wraps console methods.
+ * Can be configured to disable logging in production environments.
+ */
+@Injectable({
+	providedIn: 'root',
+})
+export class LoggerService {
+	private isProduction = false; // Can be configured based on environment
+
+	/**
+	 * Log an informational message
+	 */
+	log(message: string, ...args: unknown[]): void {
+		if (!this.isProduction) {
+			console.log(message, ...args);
+		}
+	}
+
+	/**
+	 * Log a warning message
+	 */
+	warn(message: string, ...args: unknown[]): void {
+		if (!this.isProduction) {
+			console.warn(message, ...args);
+		}
+	}
+
+	/**
+	 * Log an error message
+	 */
+	error(message: string, ...args: unknown[]): void {
+		// Always log errors, even in production
+		console.error(message, ...args);
+	}
+
+	/**
+	 * Log a debug message
+	 */
+	debug(message: string, ...args: unknown[]): void {
+		if (!this.isProduction) {
+			console.debug(message, ...args);
+		}
+	}
+}

src/app/services/user-input-service.ts

@@ -18,4 +18,9 @@ export class UserInputService {
 	}
 
 	readonly vacationNumberSignal = signal<VacationsNumber>(this.getInitialValues());
+	readonly remainingVacationDaysSignal = signal<VacationsNumber>({
+		cp: 0,
+		rtt: 0,
+		other: 0,
+	});
 }

src/app/shared/utils/stored-signal.ts

@@ -0,0 +1,111 @@
+import { signal, effect, WritableSignal, Injector, runInInjectionContext } from '@angular/core';
+
+/**
+ * Checks if localStorage is available in the current environment.
+ * @returns true if localStorage is accessible, false otherwise
+ */
+function isLocalStorageAvailable(): boolean {
+	try {
+		return typeof localStorage !== 'undefined' && localStorage !== null;
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * Creates a signal that automatically persists its value to localStorage.
+ *
+ * The signal will:
+ * - Initialize with the stored value from localStorage if available
+ * - Fall back to the provided initial value if no stored value exists or parsing fails
+ * - Automatically sync changes to localStorage with debouncing (300ms delay)
+ * - Work safely in SSR and environments where localStorage is unavailable
+ *
+ * @template T - The type of value stored in the signal (must be JSON-serializable)
+ * @param key - The localStorage key used to store the value
+ * @param initialValue - The default value used when no stored value exists
+ * @param injector - The Angular injector (use inject(Injector) to get current context)
+ * @param debounceMs - Optional debounce delay in milliseconds (default: 300ms)
+ * @returns A writable signal that persists to localStorage
+ *
+ * @example
+ * ```typescript
+ * const injector = inject(Injector);
+ * const darkMode = storedSignal('theme.darkMode', false, injector);
+ * darkMode.set(true); // Automatically saved to localStorage after 300ms
+ * console.log(darkMode()); // true
+ * ```
+ *
+ * @remarks
+ * - Requires an Injector to create the effect in the proper context
+ * - Values must be JSON-serializable (no functions, circular references, etc.)
+ * - In SSR or when localStorage is unavailable, the signal works normally but won't persist
+ * - Corrupted localStorage data is automatically cleared and reset to initial value
+ * - localStorage writes are debounced to improve performance with frequent updates
+ */
+export function storedSignal<T>(
+	key: string,
+	initialValue: T,
+	injector: Injector,
+	debounceMs = 300,
+): WritableSignal<T> {
+	let parsedValue = initialValue;
+
+	if (isLocalStorageAvailable()) {
+		try {
+			const storedValue = localStorage.getItem(key);
+			if (storedValue) {
+				parsedValue = JSON.parse(storedValue) as T;
+			}
+		} catch (error) {
+			console.warn(
+				`Failed to parse stored value for key "${key}". Using initial value.`,
+				error,
+			);
+			try {
+				localStorage.removeItem(key);
+			} catch {
+				// Ignore removal errors
+			}
+		}
+	}
+
+	const s = signal(parsedValue);
+
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+	let isFirstRun = true;
+
+	runInInjectionContext(injector, () => {
+		effect(() => {
+			const value = s();
+
+			// Skip the first execution to avoid writing back what we just read
+			if (isFirstRun) {
+				isFirstRun = false;
+				return;
+			}
+
+			// Clear any pending timeout
+			if (timeoutId !== null) {
+				clearTimeout(timeoutId);
+			}
+
+			// Debounce the localStorage write
+			timeoutId = setTimeout(() => {
+				if (isLocalStorageAvailable()) {
+					try {
+						localStorage.setItem(key, JSON.stringify(value));
+					} catch (error) {
+						console.warn(
+							`Failed to save value for key "${key}" to localStorage.`,
+							error,
+						);
+					}
+				}
+				timeoutId = null;
+			}, debounceMs);
+		});
+	});
+
+	return s;
+}