feat(ui): configure planning horizon alongside leave balances

src/app/app-settings.spec.ts

@@ -339,6 +339,53 @@ describe('Application Settings', () => {
 		expect(await dialog.getAllHarnesses(MatButtonHarness)).toHaveLength(1);
 	});
 
+	it('saves planning dates before balances and recalculates only when Calculate is selected', async () => {
+		const root = fixture.nativeElement as HTMLElement;
+		const period = root.querySelector<HTMLElement>('app-user-input .planning-dates')!;
+		expect(
+			period.compareDocumentPosition(root.querySelector('.listOfDays')!) &
+				Node.DOCUMENT_POSITION_FOLLOWING,
+		).toBeTruthy();
+		expect(period.querySelector('legend')?.textContent).toBe('Planning period');
+		expect(period.querySelector('#planning-dates-help')?.textContent).toContain(
+			'Calculate plan',
+		);
+		const start = period.querySelector<HTMLInputElement>('input[name="planningStart"]')!;
+		const last = period.querySelector<HTMLInputElement>('input[name="lastPlanningDate"]')!;
+		start.value = '2024-02-29';
+		start.dispatchEvent(new Event('input'));
+		last.value = '2024-03-08';
+		last.dispatchEvent(new Event('input'));
+		await fixture.whenStable();
+		expect(calculate).toHaveBeenCalledOnce();
+		expect(JSON.parse(localStorage.getItem('calendarSettings.planningDates')!)).toEqual({
+			start: '2024-02-29',
+			lastPlanningDate: '2024-03-08',
+		});
+
+		root.querySelector<HTMLButtonElement>('.calculate-button')!.click();
+		await fixture.whenStable();
+		expect(calculate).toHaveBeenCalledTimes(2);
+		expect(calculate.mock.calls[1][0].horizon).toEqual({
+			start: '2024-02-29',
+			end: '2024-03-09',
+		});
+		const dialog = await openSettings();
+		expect(await dialog.getContentText()).not.toContain('Planning period');
+		const [, language] = await dialog.getAllHarnesses(MatSelectHarness);
+		await selectOption(language, 'Français');
+		expect(period.querySelector('legend')?.textContent).toBe('Période à planifier');
+		await dialog.close();
+
+		await revisitApp(true);
+		expect(fixture.nativeElement.querySelector('input[name="planningStart"]').value).toBe(
+			'2024-02-29',
+		);
+		expect(fixture.nativeElement.querySelector('input[name="lastPlanningDate"]').value).toBe(
+			'2024-03-08',
+		);
+	});
+
 	it('supports keyboard theme selection and moves focus into the dialog', async () => {
 		const dialog = await openSettings();
 		const [theme] = await dialog.getAllHarnesses(MatSelectHarness);