✨ feat(nutriphi): prepare for production release with tests and improved UX

- Remove broken header links to non-existent settings/profile pages - Replace header links with settings page link - Remove TODO comments for credit system in analysis controller - Add comprehensive error handling with German messages in meals store - Add loading states, retry buttons, and error displays in UI components - Create new settings page with daily goals editor - Add 99 tests across backend, web, and shared packages: - Backend: MealService, GoalsService, StatsService, FavoritesService, RecommendationsService, nutrition.utils (Jest) - Web: API client tests with mocks (Vitest) - Shared: utility function tests (Vitest) - Set up test infrastructure (Jest for NestJS, Vitest for SvelteKit)
2026-05-20 08:33:39 +02:00 · 2026-01-28 15:23:35 +01:00 · 2026-01-28 15:23:35 +01:00 · 3ff8d3833b
commit 3ff8d3833b
parent ee630158c5
28 changed files with 2470 additions and 119 deletions
--- a/apps/nutriphi/apps/backend/jest.config.js
+++ b/apps/nutriphi/apps/backend/jest.config.js
@ -0,0 +1,14 @@
+module.exports = {
+	moduleFileExtensions: ['js', 'json', 'ts'],
+	rootDir: 'src',
+	testRegex: '.*\\.spec\\.ts$',
+	transform: {
+		'^.+\\.(t|j)s$': 'ts-jest',
+	},
+	collectCoverageFrom: ['**/*.(t|j)s', '!**/*.module.ts', '!**/main.ts', '!**/db/**'],
+	coverageDirectory: '../coverage',
+	testEnvironment: 'node',
+	moduleNameMapper: {
+		'^@nutriphi/shared$': '<rootDir>/../../packages/shared/src',
+	},
+};
--- a/apps/nutriphi/apps/backend/package.json
+++ b/apps/nutriphi/apps/backend/package.json
@ -12,6 +12,10 @@
 		"start:prod": "node dist/main",
 		"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
 		"type-check": "tsc --noEmit",
+		"test": "jest",
+		"test:watch": "jest --watch",
+		"test:cov": "jest --coverage",
+		"test:e2e": "jest --config ./test/jest-e2e.json",
 		"migration:generate": "drizzle-kit generate",
 		"migration:run": "tsx src/db/migrate.ts",
 		"db:push": "drizzle-kit push",
@ -38,15 +42,19 @@
 	"devDependencies": {
 		"@nestjs/cli": "^10.4.9",
 		"@nestjs/schematics": "^10.2.3",
+		"@nestjs/testing": "^10.4.15",
 		"@types/express": "^5.0.0",
+		"@types/jest": "^29.5.14",
 		"@types/node": "^22.10.2",
 		"@typescript-eslint/eslint-plugin": "^8.18.1",
 		"@typescript-eslint/parser": "^8.18.1",
 		"eslint": "^9.17.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.2.1",
+		"jest": "^29.7.0",
 		"prettier": "^3.4.2",
 		"source-map-support": "^0.5.21",
+		"ts-jest": "^29.2.5",
 		"ts-loader": "^9.5.1",
 		"ts-node": "^10.9.2",
 		"tsconfig-paths": "^4.2.0",
--- a/apps/nutriphi/apps/backend/src/analysis/analysis.controller.ts
+++ b/apps/nutriphi/apps/backend/src/analysis/analysis.controller.ts
@ -24,7 +24,6 @@ export class AnalysisController {

 	@Post('photo')
 	async analyzePhoto(@CurrentUser() _user: CurrentUserData, @Body() dto: AnalyzePhotoDto) {
-		// TODO: Deduct credits from user account
 		try {
 			return await this.analysisService.analyzePhoto(dto.imageBase64, dto.mimeType);
 		} catch (error) {
@ -36,7 +35,6 @@ export class AnalysisController {

 	@Post('text')
 	async analyzeText(@CurrentUser() _user: CurrentUserData, @Body() dto: AnalyzeTextDto) {
-		// TODO: Deduct credits from user account
 		try {
 			return await this.analysisService.analyzeText(dto.description);
 		} catch (error) {
--- a/apps/nutriphi/apps/backend/src/favorites/favorites.service.spec.ts
+++ b/apps/nutriphi/apps/backend/src/favorites/favorites.service.spec.ts
@ -0,0 +1,168 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { FavoritesService } from './favorites.service';
+import { DATABASE_CONNECTION } from '../db/database.module';
+
+describe('FavoritesService', () => {
+	let service: FavoritesService;
+	let mockDb: any;
+
+	const mockFavorite = {
+		id: 'fav-1',
+		userId: 'user-1',
+		name: 'Lieblings-Spaghetti',
+		nutrition: { calories: 650, protein: 25, carbohydrates: 80, fat: 20 },
+		usageCount: 5,
+		createdAt: new Date(),
+		updatedAt: new Date(),
+	};
+
+	beforeEach(async () => {
+		mockDb = {
+			select: jest.fn().mockReturnThis(),
+			from: jest.fn().mockReturnThis(),
+			where: jest.fn().mockReturnThis(),
+			orderBy: jest.fn().mockResolvedValue([mockFavorite]),
+			limit: jest.fn().mockResolvedValue([mockFavorite]),
+			insert: jest.fn().mockReturnThis(),
+			values: jest.fn().mockReturnThis(),
+			returning: jest.fn().mockResolvedValue([mockFavorite]),
+			update: jest.fn().mockReturnThis(),
+			set: jest.fn().mockReturnThis(),
+			delete: jest.fn().mockReturnThis(),
+		};
+
+		const module: TestingModule = await Test.createTestingModule({
+			providers: [
+				FavoritesService,
+				{
+					provide: DATABASE_CONNECTION,
+					useValue: mockDb,
+				},
+			],
+		}).compile();
+
+		service = module.get<FavoritesService>(FavoritesService);
+	});
+
+	describe('findAll', () => {
+		it('should return all favorites ordered by usage count', async () => {
+			const favorites = [
+				{ ...mockFavorite, id: 'fav-1', usageCount: 10 },
+				{ ...mockFavorite, id: 'fav-2', usageCount: 5 },
+			];
+			mockDb.orderBy.mockResolvedValueOnce(favorites);
+
+			const result = await service.findAll('user-1');
+
+			expect(mockDb.select).toHaveBeenCalled();
+			expect(result).toHaveLength(2);
+			expect(result[0].usageCount).toBeGreaterThan(result[1].usageCount);
+		});
+
+		it('should return empty array when no favorites', async () => {
+			mockDb.orderBy.mockResolvedValueOnce([]);
+
+			const result = await service.findAll('user-1');
+
+			expect(result).toEqual([]);
+		});
+	});
+
+	describe('create', () => {
+		it('should create a favorite with usageCount 0', async () => {
+			const newFavorite = { ...mockFavorite, usageCount: 0 };
+			mockDb.returning.mockResolvedValueOnce([newFavorite]);
+
+			const result = await service.create('user-1', {
+				name: 'Lieblings-Spaghetti',
+				description: 'Leckere Spaghetti mit Bolognese',
+				mealType: 'lunch',
+				nutrition: { calories: 650, protein: 25, carbohydrates: 80, fat: 20 },
+			});
+
+			expect(mockDb.insert).toHaveBeenCalled();
+			expect(mockDb.values).toHaveBeenCalledWith(
+				expect.objectContaining({ usageCount: 0, userId: 'user-1' })
+			);
+			expect(result.usageCount).toBe(0);
+		});
+	});
+
+	describe('incrementUsage', () => {
+		it('should increment usage count', async () => {
+			const updatedFavorite = { ...mockFavorite, usageCount: 6 };
+			mockDb.returning.mockResolvedValueOnce([updatedFavorite]);
+
+			const result = await service.incrementUsage('user-1', 'fav-1');
+
+			expect(mockDb.update).toHaveBeenCalled();
+			expect(result?.usageCount).toBe(6);
+		});
+
+		it('should return null if favorite not found', async () => {
+			mockDb.limit.mockResolvedValueOnce([]);
+
+			const result = await service.incrementUsage('user-1', 'fav-999');
+
+			expect(result).toBeNull();
+		});
+
+		it('should not increment for wrong user', async () => {
+			mockDb.limit.mockResolvedValueOnce([]);
+
+			const result = await service.incrementUsage('user-2', 'fav-1');
+
+			expect(result).toBeNull();
+		});
+	});
+
+	describe('delete', () => {
+		it('should delete favorite and return deleted record', async () => {
+			mockDb.returning.mockResolvedValueOnce([mockFavorite]);
+
+			const result = await service.delete('user-1', 'fav-1');
+
+			expect(mockDb.delete).toHaveBeenCalled();
+			expect(result).toEqual(mockFavorite);
+		});
+
+		it('should return undefined if not found', async () => {
+			mockDb.returning.mockResolvedValueOnce([]);
+
+			const result = await service.delete('user-1', 'fav-999');
+
+			expect(result).toBeUndefined();
+		});
+	});
+
+	describe('update', () => {
+		it('should update favorite fields', async () => {
+			const updatedFavorite = { ...mockFavorite, name: 'Neue Spaghetti' };
+			mockDb.returning.mockResolvedValueOnce([updatedFavorite]);
+
+			const result = await service.update('user-1', 'fav-1', { name: 'Neue Spaghetti' });
+
+			expect(mockDb.update).toHaveBeenCalled();
+			expect(result?.name).toBe('Neue Spaghetti');
+		});
+
+		it('should set updatedAt timestamp', async () => {
+			const before = new Date();
+			mockDb.returning.mockResolvedValueOnce([{ ...mockFavorite, updatedAt: new Date() }]);
+
+			await service.update('user-1', 'fav-1', { name: 'Updated' });
+
+			expect(mockDb.set).toHaveBeenCalledWith(
+				expect.objectContaining({ updatedAt: expect.any(Date) })
+			);
+		});
+
+		it('should return undefined if not found', async () => {
+			mockDb.returning.mockResolvedValueOnce([]);
+
+			const result = await service.update('user-1', 'fav-999', { name: 'Updated' });
+
+			expect(result).toBeUndefined();
+		});
+	});
+});
--- a/apps/nutriphi/apps/backend/src/goals/goals.service.spec.ts
+++ b/apps/nutriphi/apps/backend/src/goals/goals.service.spec.ts
@ -0,0 +1,112 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { GoalsService } from './goals.service';
+import { DATABASE_CONNECTION } from '../db/database.module';
+
+describe('GoalsService', () => {
+	let service: GoalsService;
+	let mockDb: any;
+
+	const mockGoals = {
+		id: 'goal-1',
+		userId: 'user-1',
+		dailyCalories: 2000,
+		dailyProtein: 50,
+		dailyCarbs: 275,
+		dailyFat: 78,
+		dailyFiber: 28,
+		createdAt: new Date('2024-01-01'),
+		updatedAt: new Date('2024-01-01'),
+	};
+
+	beforeEach(async () => {
+		mockDb = {
+			select: jest.fn().mockReturnThis(),
+			from: jest.fn().mockReturnThis(),
+			where: jest.fn().mockReturnThis(),
+			limit: jest.fn().mockResolvedValue([mockGoals]),
+			insert: jest.fn().mockReturnThis(),
+			values: jest.fn().mockReturnThis(),
+			returning: jest.fn().mockResolvedValue([mockGoals]),
+			update: jest.fn().mockReturnThis(),
+			set: jest.fn().mockReturnThis(),
+			delete: jest.fn().mockReturnThis(),
+		};
+
+		const module: TestingModule = await Test.createTestingModule({
+			providers: [
+				GoalsService,
+				{
+					provide: DATABASE_CONNECTION,
+					useValue: mockDb,
+				},
+			],
+		}).compile();
+
+		service = module.get<GoalsService>(GoalsService);
+	});
+
+	describe('getGoals', () => {
+		it('should return goals for a user', async () => {
+			const result = await service.getGoals('user-1');
+
+			expect(mockDb.select).toHaveBeenCalled();
+			expect(result).toEqual(mockGoals);
+		});
+
+		it('should return null if no goals found', async () => {
+			mockDb.limit.mockResolvedValueOnce([]);
+
+			const result = await service.getGoals('user-2');
+
+			expect(result).toBeNull();
+		});
+	});
+
+	describe('createOrUpdate', () => {
+		const newGoalsData = {
+			dailyCalories: 2500,
+			dailyProtein: 100,
+			dailyCarbs: 300,
+			dailyFat: 80,
+			dailyFiber: 30,
+		};
+
+		it('should create new goals if none exist', async () => {
+			mockDb.limit.mockResolvedValueOnce([]); // getGoals returns null
+
+			const result = await service.createOrUpdate('user-1', newGoalsData);
+
+			expect(mockDb.insert).toHaveBeenCalled();
+			expect(result).toEqual(mockGoals);
+		});
+
+		it('should update existing goals', async () => {
+			const updatedGoals = { ...mockGoals, ...newGoalsData };
+			mockDb.returning.mockResolvedValueOnce([updatedGoals]);
+
+			const result = await service.createOrUpdate('user-1', newGoalsData);
+
+			expect(mockDb.update).toHaveBeenCalled();
+			expect(result).toEqual(updatedGoals);
+		});
+	});
+
+	describe('delete', () => {
+		it('should delete goals and return deleted record', async () => {
+			mockDb.returning.mockResolvedValueOnce([mockGoals]);
+
+			const result = await service.delete('user-1');
+
+			expect(mockDb.delete).toHaveBeenCalled();
+			expect(result).toEqual(mockGoals);
+		});
+
+		it('should return undefined if no goals to delete', async () => {
+			mockDb.returning.mockResolvedValueOnce([]);
+
+			const result = await service.delete('user-2');
+
+			expect(result).toBeUndefined();
+		});
+	});
+});
--- a/apps/nutriphi/apps/backend/src/meal/meal.service.spec.ts
+++ b/apps/nutriphi/apps/backend/src/meal/meal.service.spec.ts
@ -0,0 +1,221 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { MealService } from './meal.service';
+import { DATABASE_CONNECTION } from '../db/database.module';
+
+describe('MealService', () => {
+	let service: MealService;
+	let mockDb: any;
+
+	const mockMeal = {
+		id: 'meal-1',
+		userId: 'user-1',
+		date: new Date('2024-01-15T12:00:00Z'),
+		mealType: 'lunch',
+		inputType: 'photo',
+		description: 'Spaghetti Bolognese',
+		confidence: 0.95,
+		createdAt: new Date(),
+		updatedAt: new Date(),
+	};
+
+	const mockNutrition = {
+		id: 'nutrition-1',
+		mealId: 'meal-1',
+		calories: 650,
+		protein: 25,
+		carbohydrates: 80,
+		fat: 20,
+		fiber: 5,
+		sugar: 8,
+	};
+
+	beforeEach(async () => {
+		mockDb = {
+			select: jest.fn().mockReturnThis(),
+			from: jest.fn().mockReturnThis(),
+			leftJoin: jest.fn().mockReturnThis(),
+			where: jest.fn().mockReturnThis(),
+			orderBy: jest.fn().mockReturnThis(),
+			limit: jest.fn().mockResolvedValue([{ meals: mockMeal, meal_nutrition: mockNutrition }]),
+			insert: jest.fn().mockReturnThis(),
+			values: jest.fn().mockReturnThis(),
+			returning: jest.fn(),
+			update: jest.fn().mockReturnThis(),
+			set: jest.fn().mockReturnThis(),
+			delete: jest.fn().mockReturnThis(),
+		};
+
+		const module: TestingModule = await Test.createTestingModule({
+			providers: [
+				MealService,
+				{
+					provide: DATABASE_CONNECTION,
+					useValue: mockDb,
+				},
+			],
+		}).compile();
+
+		service = module.get<MealService>(MealService);
+	});
+
+	describe('create', () => {
+		it('should create a meal with nutrition data', async () => {
+			mockDb.returning
+				.mockResolvedValueOnce([mockMeal]) // First call for meal insert
+				.mockResolvedValueOnce([mockNutrition]); // Second call for nutrition insert
+
+			const mealData = {
+				date: new Date(),
+				mealType: 'lunch',
+				inputType: 'photo',
+				description: 'Spaghetti Bolognese',
+				confidence: 0.95,
+			};
+
+			const nutritionData = {
+				calories: 650,
+				protein: 25,
+				carbohydrates: 80,
+				fat: 20,
+			};
+
+			const result = await service.create('user-1', mealData as any, nutritionData as any);
+
+			expect(mockDb.insert).toHaveBeenCalledTimes(2);
+			expect(result).toEqual({ ...mockMeal, nutrition: mockNutrition });
+		});
+	});
+
+	describe('findByDate', () => {
+		it('should return meals for a specific date', async () => {
+			mockDb.orderBy.mockResolvedValueOnce([{ meals: mockMeal, meal_nutrition: mockNutrition }]);
+
+			const result = await service.findByDate('user-1', new Date('2024-01-15'));
+
+			expect(mockDb.select).toHaveBeenCalled();
+			expect(result).toHaveLength(1);
+			expect(result[0]).toEqual({ ...mockMeal, nutrition: mockNutrition });
+		});
+
+		it('should return empty array when no meals found', async () => {
+			mockDb.orderBy.mockResolvedValueOnce([]);
+
+			const result = await service.findByDate('user-1', new Date('2024-01-16'));
+
+			expect(result).toEqual([]);
+		});
+
+		it('should handle meals without nutrition data', async () => {
+			mockDb.orderBy.mockResolvedValueOnce([{ meals: mockMeal, meal_nutrition: null }]);
+
+			const result = await service.findByDate('user-1', new Date('2024-01-15'));
+
+			expect(result[0].nutrition).toBeNull();
+		});
+	});
+
+	describe('findByDateRange', () => {
+		it('should return meals within date range', async () => {
+			const meal1 = { ...mockMeal, id: 'meal-1', date: new Date('2024-01-15') };
+			const meal2 = { ...mockMeal, id: 'meal-2', date: new Date('2024-01-16') };
+
+			mockDb.orderBy.mockResolvedValueOnce([
+				{ meals: meal2, meal_nutrition: mockNutrition },
+				{ meals: meal1, meal_nutrition: mockNutrition },
+			]);
+
+			const result = await service.findByDateRange(
+				'user-1',
+				new Date('2024-01-15'),
+				new Date('2024-01-17')
+			);
+
+			expect(result).toHaveLength(2);
+		});
+	});
+
+	describe('findOne', () => {
+		it('should return a single meal with nutrition', async () => {
+			const result = await service.findOne('user-1', 'meal-1');
+
+			expect(result).toEqual({ ...mockMeal, nutrition: mockNutrition });
+		});
+
+		it('should return null if meal not found', async () => {
+			mockDb.limit.mockResolvedValueOnce([]);
+
+			const result = await service.findOne('user-1', 'meal-999');
+
+			expect(result).toBeNull();
+		});
+
+		it('should return null if meal belongs to different user', async () => {
+			mockDb.limit.mockResolvedValueOnce([]);
+
+			const result = await service.findOne('user-2', 'meal-1');
+
+			expect(result).toBeNull();
+		});
+	});
+
+	describe('delete', () => {
+		it('should delete meal and return deleted record', async () => {
+			mockDb.returning.mockResolvedValueOnce([mockMeal]);
+
+			const result = await service.delete('user-1', 'meal-1');
+
+			expect(mockDb.delete).toHaveBeenCalled();
+			expect(result).toEqual(mockMeal);
+		});
+
+		it('should return undefined if meal not found', async () => {
+			mockDb.returning.mockResolvedValueOnce([]);
+
+			const result = await service.delete('user-1', 'meal-999');
+
+			expect(result).toBeUndefined();
+		});
+
+		it('should not delete meal of different user', async () => {
+			mockDb.returning.mockResolvedValueOnce([]);
+
+			const result = await service.delete('user-2', 'meal-1');
+
+			expect(result).toBeUndefined();
+		});
+	});
+
+	describe('update', () => {
+		it('should update meal data', async () => {
+			const updatedMeal = { ...mockMeal, description: 'Updated description' };
+			mockDb.returning.mockResolvedValueOnce([updatedMeal]);
+			mockDb.limit.mockResolvedValueOnce([{ meals: updatedMeal, meal_nutrition: mockNutrition }]);
+
+			const result = await service.update('user-1', 'meal-1', {
+				description: 'Updated description',
+			});
+
+			expect(mockDb.update).toHaveBeenCalled();
+			expect(result?.description).toBe('Updated description');
+		});
+
+		it('should update meal and nutrition data', async () => {
+			const updatedMeal = { ...mockMeal, description: 'Updated' };
+			const updatedNutrition = { ...mockNutrition, calories: 700 };
+			mockDb.returning.mockResolvedValueOnce([updatedMeal]);
+			mockDb.limit.mockResolvedValueOnce([
+				{ meals: updatedMeal, meal_nutrition: updatedNutrition },
+			]);
+
+			const result = await service.update(
+				'user-1',
+				'meal-1',
+				{ description: 'Updated' },
+				{ calories: 700 }
+			);
+
+			expect(mockDb.update).toHaveBeenCalledTimes(2);
+			expect(result?.nutrition?.calories).toBe(700);
+		});
+	});
+});
--- a/apps/nutriphi/apps/backend/src/recommendations/recommendations.service.spec.ts
+++ b/apps/nutriphi/apps/backend/src/recommendations/recommendations.service.spec.ts
@ -0,0 +1,225 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { RecommendationsService } from './recommendations.service';
+import { DATABASE_CONNECTION } from '../db/database.module';
+
+describe('RecommendationsService', () => {
+	let service: RecommendationsService;
+	let mockDb: any;
+
+	const mockRecommendation = {
+		id: 'rec-1',
+		userId: 'user-1',
+		date: new Date(),
+		type: 'hint',
+		priority: 'medium',
+		message: 'Deine Proteinaufnahme ist heute niedrig.',
+		nutrient: 'protein',
+		actionable: 'Füge mehr proteinreiche Lebensmittel hinzu',
+		dismissed: false,
+		createdAt: new Date(),
+	};
+
+	beforeEach(async () => {
+		mockDb = {
+			select: jest.fn().mockReturnThis(),
+			from: jest.fn().mockReturnThis(),
+			where: jest.fn().mockReturnThis(),
+			orderBy: jest.fn().mockReturnThis(),
+			limit: jest.fn().mockResolvedValue([mockRecommendation]),
+			insert: jest.fn().mockReturnThis(),
+			values: jest.fn().mockReturnThis(),
+			returning: jest.fn().mockResolvedValue([mockRecommendation]),
+			update: jest.fn().mockReturnThis(),
+			set: jest.fn().mockReturnThis(),
+		};
+
+		const module: TestingModule = await Test.createTestingModule({
+			providers: [
+				RecommendationsService,
+				{
+					provide: DATABASE_CONNECTION,
+					useValue: mockDb,
+				},
+			],
+		}).compile();
+
+		service = module.get<RecommendationsService>(RecommendationsService);
+	});
+
+	describe('findByDate', () => {
+		it('should return non-dismissed recommendations', async () => {
+			const recommendations = [mockRecommendation, { ...mockRecommendation, id: 'rec-2' }];
+			mockDb.limit.mockResolvedValueOnce(recommendations);
+
+			const result = await service.findByDate('user-1', new Date());
+
+			expect(mockDb.select).toHaveBeenCalled();
+			expect(result).toHaveLength(2);
+		});
+
+		it('should limit to 10 results', async () => {
+			await service.findByDate('user-1', new Date());
+
+			expect(mockDb.limit).toHaveBeenCalledWith(10);
+		});
+
+		it('should return empty array when no recommendations', async () => {
+			mockDb.limit.mockResolvedValueOnce([]);
+
+			const result = await service.findByDate('user-1', new Date());
+
+			expect(result).toEqual([]);
+		});
+	});
+
+	describe('create', () => {
+		it('should create a recommendation with dismissed=false', async () => {
+			const newRec = {
+				date: new Date(),
+				type: 'hint' as const,
+				priority: 'high' as const,
+				message: 'Test message',
+				nutrient: 'sugar',
+				actionable: 'Do something',
+			};
+
+			await service.create('user-1', newRec);
+
+			expect(mockDb.insert).toHaveBeenCalled();
+			expect(mockDb.values).toHaveBeenCalledWith(
+				expect.objectContaining({ dismissed: false, userId: 'user-1' })
+			);
+		});
+	});
+
+	describe('dismiss', () => {
+		it('should mark recommendation as dismissed', async () => {
+			const dismissedRec = { ...mockRecommendation, dismissed: true };
+			mockDb.returning.mockResolvedValueOnce([dismissedRec]);
+
+			const result = await service.dismiss('user-1', 'rec-1');
+
+			expect(mockDb.update).toHaveBeenCalled();
+			expect(mockDb.set).toHaveBeenCalledWith({ dismissed: true });
+			expect(result?.dismissed).toBe(true);
+		});
+
+		it('should return undefined if not found', async () => {
+			mockDb.returning.mockResolvedValueOnce([]);
+
+			const result = await service.dismiss('user-1', 'rec-999');
+
+			expect(result).toBeUndefined();
+		});
+	});
+
+	describe('generateHints', () => {
+		it('should generate low protein hint', async () => {
+			const nutritionSummary = { protein: 20, fiber: 25, sugar: 30 };
+
+			const hints = await service.generateHints('user-1', nutritionSummary);
+
+			expect(hints).toHaveLength(1);
+			expect(hints[0].nutrient).toBe('protein');
+			expect(hints[0].priority).toBe('medium');
+			expect(hints[0].message).toContain('Proteinaufnahme');
+		});
+
+		it('should generate low fiber hint', async () => {
+			const nutritionSummary = { protein: 50, fiber: 5, sugar: 30 };
+
+			const hints = await service.generateHints('user-1', nutritionSummary);
+
+			expect(hints).toHaveLength(1);
+			expect(hints[0].nutrient).toBe('fiber');
+			expect(hints[0].priority).toBe('low');
+			expect(hints[0].message).toContain('Ballaststoffe');
+		});
+
+		it('should generate high sugar hint', async () => {
+			const nutritionSummary = { protein: 50, fiber: 25, sugar: 60 };
+
+			const hints = await service.generateHints('user-1', nutritionSummary);
+
+			expect(hints).toHaveLength(1);
+			expect(hints[0].nutrient).toBe('sugar');
+			expect(hints[0].priority).toBe('high');
+			expect(hints[0].message).toContain('Zuckeraufnahme');
+		});
+
+		it('should generate multiple hints when applicable', async () => {
+			const nutritionSummary = { protein: 15, fiber: 5, sugar: 70 };
+
+			const hints = await service.generateHints('user-1', nutritionSummary);
+
+			expect(hints).toHaveLength(3);
+			expect(hints.map((h) => h.nutrient)).toContain('protein');
+			expect(hints.map((h) => h.nutrient)).toContain('fiber');
+			expect(hints.map((h) => h.nutrient)).toContain('sugar');
+		});
+
+		it('should not generate hints when nutrition is good', async () => {
+			const nutritionSummary = { protein: 50, fiber: 30, sugar: 25 };
+
+			const hints = await service.generateHints('user-1', nutritionSummary);
+
+			expect(hints).toHaveLength(0);
+		});
+
+		it('should save hints to database', async () => {
+			const nutritionSummary = { protein: 10, fiber: 25, sugar: 30 };
+
+			await service.generateHints('user-1', nutritionSummary);
+
+			expect(mockDb.insert).toHaveBeenCalled();
+		});
+
+		it('should handle missing nutrition values', async () => {
+			const nutritionSummary = {};
+
+			const hints = await service.generateHints('user-1', nutritionSummary);
+
+			expect(hints).toHaveLength(0);
+		});
+
+		it('should include German actionable suggestions', async () => {
+			const nutritionSummary = { protein: 10 };
+
+			const hints = await service.generateHints('user-1', nutritionSummary);
+
+			expect(hints[0].actionable).toContain('Hühnchen');
+		});
+
+		it('should check thresholds correctly - protein boundary', async () => {
+			// Exactly at threshold (25) should NOT trigger
+			const atThreshold = { protein: 25 };
+			const hints1 = await service.generateHints('user-1', atThreshold);
+			expect(hints1).toHaveLength(0);
+
+			// Below threshold should trigger
+			const belowThreshold = { protein: 24 };
+			const hints2 = await service.generateHints('user-1', belowThreshold);
+			expect(hints2).toHaveLength(1);
+		});
+
+		it('should check thresholds correctly - fiber boundary', async () => {
+			const atThreshold = { fiber: 10 };
+			const hints1 = await service.generateHints('user-1', atThreshold);
+			expect(hints1).toHaveLength(0);
+
+			const belowThreshold = { fiber: 9 };
+			const hints2 = await service.generateHints('user-1', belowThreshold);
+			expect(hints2).toHaveLength(1);
+		});
+
+		it('should check thresholds correctly - sugar boundary', async () => {
+			const atThreshold = { sugar: 50 };
+			const hints1 = await service.generateHints('user-1', atThreshold);
+			expect(hints1).toHaveLength(0);
+
+			const aboveThreshold = { sugar: 51 };
+			const hints2 = await service.generateHints('user-1', aboveThreshold);
+			expect(hints2).toHaveLength(1);
+		});
+	});
+});
--- a/apps/nutriphi/apps/backend/src/stats/stats.service.spec.ts
+++ b/apps/nutriphi/apps/backend/src/stats/stats.service.spec.ts
@ -0,0 +1,239 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { StatsService } from './stats.service';
+import { MealService } from '../meal/meal.service';
+import { GoalsService } from '../goals/goals.service';
+
+describe('StatsService', () => {
+	let service: StatsService;
+	let mockMealService: jest.Mocked<MealService>;
+	let mockGoalsService: jest.Mocked<GoalsService>;
+
+	const mockGoals = {
+		id: 'goal-1',
+		userId: 'user-1',
+		dailyCalories: 2000,
+		dailyProtein: 50,
+		dailyCarbs: 275,
+		dailyFat: 78,
+		dailyFiber: 28,
+		createdAt: new Date(),
+		updatedAt: new Date(),
+	};
+
+	const createMeal = (
+		date: Date,
+		calories: number,
+		protein: number,
+		carbs: number,
+		fat: number
+	) => ({
+		id: `meal-${Date.now()}-${Math.random()}`,
+		userId: 'user-1',
+		date,
+		mealType: 'lunch',
+		inputType: 'text',
+		description: 'Test meal',
+		confidence: 0.9,
+		createdAt: new Date(),
+		updatedAt: new Date(),
+		nutrition: { calories, protein, carbohydrates: carbs, fat, fiber: 5, sugar: 10 },
+	});
+
+	beforeEach(async () => {
+		mockMealService = {
+			findByDate: jest.fn(),
+			findByDateRange: jest.fn(),
+		} as any;
+
+		mockGoalsService = {
+			getGoals: jest.fn(),
+		} as any;
+
+		const module: TestingModule = await Test.createTestingModule({
+			providers: [
+				StatsService,
+				{ provide: MealService, useValue: mockMealService },
+				{ provide: GoalsService, useValue: mockGoalsService },
+			],
+		}).compile();
+
+		service = module.get<StatsService>(StatsService);
+	});
+
+	describe('getDailySummary', () => {
+		it('should return daily summary with meals and progress', async () => {
+			const meals = [
+				createMeal(new Date(), 500, 20, 60, 15),
+				createMeal(new Date(), 700, 30, 80, 25),
+			];
+			mockMealService.findByDate.mockResolvedValue(meals as any);
+			mockGoalsService.getGoals.mockResolvedValue(mockGoals);
+
+			const result = await service.getDailySummary('user-1', new Date());
+
+			expect(result.meals).toHaveLength(2);
+			expect(result.totalNutrition.calories).toBe(1200);
+			expect(result.totalNutrition.protein).toBe(50);
+			expect(result.progress.calories.percentage).toBe(60); // 1200/2000 = 60%
+			expect(result.progress.protein!.percentage).toBe(100); // 50/50 = 100%
+		});
+
+		it('should use default values when no goals set', async () => {
+			const meals = [createMeal(new Date(), 1000, 25, 140, 40)];
+			mockMealService.findByDate.mockResolvedValue(meals as any);
+			mockGoalsService.getGoals.mockResolvedValue(null as any);
+
+			const result = await service.getDailySummary('user-1', new Date());
+
+			expect(result.goals).toBeUndefined();
+			expect(result.progress.calories.target).toBe(2000); // default
+		});
+
+		it('should handle days with no meals', async () => {
+			mockMealService.findByDate.mockResolvedValue([]);
+			mockGoalsService.getGoals.mockResolvedValue(mockGoals);
+
+			const result = await service.getDailySummary('user-1', new Date());
+
+			expect(result.meals).toHaveLength(0);
+			expect(result.totalNutrition.calories).toBe(0);
+			expect(result.progress.calories.percentage).toBe(0);
+		});
+	});
+
+	describe('getWeeklyStats', () => {
+		it('should return weekly stats with daily breakdown', async () => {
+			const today = new Date();
+			const meals = [
+				createMeal(today, 1800, 45, 220, 70),
+				createMeal(new Date(today.getTime() - 86400000), 2000, 50, 250, 75),
+			];
+			mockMealService.findByDateRange.mockResolvedValue(meals as any);
+			mockGoalsService.getGoals.mockResolvedValue(mockGoals);
+
+			const result = await service.getWeeklyStats('user-1', today);
+
+			expect(result.days).toHaveLength(7);
+			expect(result.averages).toBeDefined();
+			expect(result.trends).toBeDefined();
+		});
+
+		it('should calculate averages correctly', async () => {
+			const today = new Date('2024-01-15');
+			const day1 = new Date('2024-01-09'); // 6 days ago
+			const day2 = new Date('2024-01-10'); // 5 days ago
+
+			const meals = [createMeal(day1, 2000, 50, 250, 80), createMeal(day2, 1800, 45, 220, 70)];
+			mockMealService.findByDateRange.mockResolvedValue(meals as any);
+			mockGoalsService.getGoals.mockResolvedValue(mockGoals);
+
+			const result = await service.getWeeklyStats('user-1', today);
+
+			// Average should be based on days with data (2 days)
+			expect(result.averages.calories).toBe(1900); // (2000+1800)/2
+			expect(result.averages.protein).toBe(48); // (50+45)/2 rounded
+		});
+
+		it('should detect upward trend', async () => {
+			const today = new Date('2024-01-15');
+			const meals = [
+				// First half (days 0-2) - low calories
+				createMeal(new Date('2024-01-09'), 1000, 25, 120, 30),
+				createMeal(new Date('2024-01-10'), 1100, 28, 130, 35),
+				createMeal(new Date('2024-01-11'), 1050, 26, 125, 32),
+				// Second half (days 4-6) - high calories (>10% increase)
+				createMeal(new Date('2024-01-13'), 1500, 40, 180, 50),
+				createMeal(new Date('2024-01-14'), 1600, 42, 190, 52),
+				createMeal(new Date('2024-01-15'), 1550, 41, 185, 51),
+			];
+			mockMealService.findByDateRange.mockResolvedValue(meals as any);
+			mockGoalsService.getGoals.mockResolvedValue(mockGoals);
+
+			const result = await service.getWeeklyStats('user-1', today);
+
+			expect(result.trends.caloriesTrend).toBe('up');
+		});
+
+		it('should detect downward trend', async () => {
+			const today = new Date('2024-01-15');
+			const meals = [
+				// First half - high calories
+				createMeal(new Date('2024-01-09'), 2000, 50, 250, 80),
+				createMeal(new Date('2024-01-10'), 2100, 52, 260, 82),
+				createMeal(new Date('2024-01-11'), 1950, 49, 240, 78),
+				// Second half - low calories (>10% decrease)
+				createMeal(new Date('2024-01-13'), 1500, 38, 180, 48),
+				createMeal(new Date('2024-01-14'), 1400, 35, 170, 45),
+				createMeal(new Date('2024-01-15'), 1450, 36, 175, 46),
+			];
+			mockMealService.findByDateRange.mockResolvedValue(meals as any);
+			mockGoalsService.getGoals.mockResolvedValue(mockGoals);
+
+			const result = await service.getWeeklyStats('user-1', today);
+
+			expect(result.trends.caloriesTrend).toBe('down');
+		});
+
+		it('should detect stable trend', async () => {
+			const today = new Date('2024-01-15');
+			const meals = [
+				createMeal(new Date('2024-01-09'), 2000, 50, 250, 80),
+				createMeal(new Date('2024-01-10'), 2050, 51, 255, 81),
+				createMeal(new Date('2024-01-11'), 1980, 49, 245, 79),
+				createMeal(new Date('2024-01-13'), 2020, 50, 252, 80),
+				createMeal(new Date('2024-01-14'), 2000, 50, 250, 80),
+				createMeal(new Date('2024-01-15'), 2010, 50, 251, 80),
+			];
+			mockMealService.findByDateRange.mockResolvedValue(meals as any);
+			mockGoalsService.getGoals.mockResolvedValue(mockGoals);
+
+			const result = await service.getWeeklyStats('user-1', today);
+
+			expect(result.trends.caloriesTrend).toBe('stable');
+		});
+
+		it('should mark goalsMet correctly when within 10% of target', async () => {
+			// goalsMet = dayCalories >= goals.dailyCalories * 0.9 && dayCalories <= goals.dailyCalories * 1.1
+			// With dailyCalories = 2000, range is 1800-2200
+			// 1900 is within this range, so goalsMet should be true
+			const today = new Date();
+			today.setHours(23, 59, 59, 0);
+
+			// Create a meal that is definitely within the week range
+			const startDate = new Date(today);
+			startDate.setDate(startDate.getDate() - 6);
+			startDate.setHours(0, 0, 0, 0);
+
+			// Use the third day of the week for the meal
+			const mealDate = new Date(startDate);
+			mealDate.setDate(mealDate.getDate() + 2);
+			mealDate.setHours(12, 0, 0, 0);
+
+			const meals = [createMeal(mealDate, 1900, 50, 250, 80)];
+			mockMealService.findByDateRange.mockResolvedValue(meals as any);
+			mockGoalsService.getGoals.mockResolvedValue(mockGoals);
+
+			const result = await service.getWeeklyStats('user-1', today);
+
+			// The day with 1900 calories should have goalsMet = true
+			const dayWithMeals = result.days.find((d) => d.totalCalories > 0);
+			expect(dayWithMeals).toBeDefined();
+			expect(dayWithMeals!.totalCalories).toBe(1900);
+			expect(dayWithMeals!.goalsMet).toBe(true);
+		});
+
+		it('should handle empty week', async () => {
+			mockMealService.findByDateRange.mockResolvedValue([]);
+			mockGoalsService.getGoals.mockResolvedValue(mockGoals);
+
+			const result = await service.getWeeklyStats('user-1', new Date());
+
+			expect(result.days).toHaveLength(7);
+			expect(result.averages.calories).toBe(0);
+			result.days.forEach((day) => {
+				expect(day.mealCount).toBe(0);
+				expect(day.goalsMet).toBe(false);
+			});
+		});
+	});
+});
--- a/apps/nutriphi/apps/backend/src/utils/nutrition.utils.spec.ts
+++ b/apps/nutriphi/apps/backend/src/utils/nutrition.utils.spec.ts
@ -0,0 +1,177 @@
+import { calculateProgress, sumNutrition } from './nutrition.utils';
+import { DEFAULT_DAILY_VALUES } from '../types/nutrition.types';
+
+describe('nutrition.utils', () => {
+	describe('calculateProgress', () => {
+		it('should calculate progress with default values when no goals provided', () => {
+			const nutrition = {
+				calories: 1000,
+				protein: 25,
+				carbohydrates: 138,
+				fat: 39,
+			};
+
+			const progress = calculateProgress(nutrition);
+
+			expect(progress.calories.current).toBe(1000);
+			expect(progress.calories.target).toBe(DEFAULT_DAILY_VALUES.calories);
+			expect(progress.calories.percentage).toBe(50);
+
+			expect(progress.protein!.current).toBe(25);
+			expect(progress.protein!.target).toBe(DEFAULT_DAILY_VALUES.protein);
+			expect(progress.protein!.percentage).toBe(50);
+		});
+
+		it('should use custom goals when provided', () => {
+			const nutrition = { calories: 1500, protein: 75, carbohydrates: 150, fat: 50 };
+			const goals = {
+				id: '1',
+				userId: 'user1',
+				dailyCalories: 3000,
+				dailyProtein: 150,
+				dailyCarbs: 300,
+				dailyFat: 100,
+				dailyFiber: 30,
+				createdAt: new Date(),
+				updatedAt: new Date(),
+			};
+
+			const progress = calculateProgress(nutrition, goals);
+
+			expect(progress.calories.target).toBe(3000);
+			expect(progress.calories.percentage).toBe(50);
+			expect(progress.protein!.target).toBe(150);
+			expect(progress.protein!.percentage).toBe(50);
+		});
+
+		it('should cap percentage at 100%', () => {
+			const nutrition = { calories: 3000, protein: 200, carbohydrates: 500, fat: 200 };
+
+			const progress = calculateProgress(nutrition);
+
+			expect(progress.calories.percentage).toBe(100);
+			expect(progress.protein!.percentage).toBe(100);
+		});
+
+		it('should handle zero values', () => {
+			const nutrition = { calories: 0, protein: 0, carbohydrates: 0, fat: 0 };
+
+			const progress = calculateProgress(nutrition);
+
+			expect(progress.calories.current).toBe(0);
+			expect(progress.calories.percentage).toBe(0);
+		});
+
+		it('should handle missing nutrition values', () => {
+			const progress = calculateProgress({});
+
+			expect(progress.calories.current).toBe(0);
+			expect(progress.protein!.current).toBe(0);
+			expect(progress.carbs!.current).toBe(0);
+			expect(progress.fat!.current).toBe(0);
+		});
+
+		it('should round percentages', () => {
+			const nutrition = { calories: 333, protein: 17, carbohydrates: 91, fat: 26 };
+
+			const progress = calculateProgress(nutrition);
+
+			expect(progress.calories.percentage).toBe(17); // 333/2000 = 16.65 -> 17
+			expect(progress.protein!.percentage).toBe(34); // 17/50 = 34
+		});
+	});
+
+	describe('sumNutrition', () => {
+		it('should sum nutrition from multiple meals', () => {
+			const meals = [
+				{
+					nutrition: {
+						calories: 500,
+						protein: 20,
+						carbohydrates: 60,
+						fat: 15,
+						fiber: 5,
+						sugar: 10,
+					},
+				},
+				{
+					nutrition: { calories: 300, protein: 15, carbohydrates: 40, fat: 10, fiber: 3, sugar: 5 },
+				},
+				{
+					nutrition: { calories: 200, protein: 10, carbohydrates: 25, fat: 8, fiber: 2, sugar: 3 },
+				},
+			];
+
+			const sum = sumNutrition(meals);
+
+			expect(sum.calories).toBe(1000);
+			expect(sum.protein).toBe(45);
+			expect(sum.carbohydrates).toBe(125);
+			expect(sum.fat).toBe(33);
+			expect(sum.fiber).toBe(10);
+			expect(sum.sugar).toBe(18);
+		});
+
+		it('should handle empty meals array', () => {
+			const sum = sumNutrition([]);
+
+			expect(sum.calories).toBe(0);
+			expect(sum.protein).toBe(0);
+			expect(sum.carbohydrates).toBe(0);
+			expect(sum.fat).toBe(0);
+		});
+
+		it('should handle meals with null nutrition', () => {
+			const meals = [
+				{ nutrition: { calories: 500, protein: 20, carbohydrates: 60, fat: 15 } },
+				{ nutrition: null },
+				{ nutrition: { calories: 300, protein: 15, carbohydrates: 40, fat: 10 } },
+			];
+
+			const sum = sumNutrition(meals);
+
+			expect(sum.calories).toBe(800);
+			expect(sum.protein).toBe(35);
+		});
+
+		it('should handle meals with undefined nutrition', () => {
+			const meals = [
+				{ nutrition: { calories: 500, protein: 20, carbohydrates: 60, fat: 15 } },
+				{},
+				{ nutrition: { calories: 300, protein: 15, carbohydrates: 40, fat: 10 } },
+			];
+
+			const sum = sumNutrition(meals);
+
+			expect(sum.calories).toBe(800);
+		});
+
+		it('should handle partial nutrition data', () => {
+			const meals = [
+				{ nutrition: { calories: 500 } },
+				{ nutrition: { protein: 20 } },
+				{ nutrition: { fat: 10, fiber: 5 } },
+			];
+
+			const sum = sumNutrition(meals);
+
+			expect(sum.calories).toBe(500);
+			expect(sum.protein).toBe(20);
+			expect(sum.fat).toBe(10);
+			expect(sum.fiber).toBe(5);
+			expect(sum.carbohydrates).toBe(0);
+		});
+
+		it('should ignore non-numeric values', () => {
+			const meals = [
+				{ nutrition: { calories: 500, protein: 'invalid' as any } },
+				{ nutrition: { calories: 300, protein: 15 } },
+			];
+
+			const sum = sumNutrition(meals);
+
+			expect(sum.calories).toBe(800);
+			expect(sum.protein).toBe(15);
+		});
+	});
+});
--- a/apps/nutriphi/apps/web/package.json
+++ b/apps/nutriphi/apps/web/package.json
@ -11,14 +11,19 @@
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "eslint .",
 		"format": "prettier --write .",
-		"type-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
+		"type-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:cov": "vitest run --coverage"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-node": "^5.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@tailwindcss/vite": "^4.1.7",
+		"@testing-library/svelte": "^5.2.6",
 		"@types/node": "^20.0.0",
+		"jsdom": "^25.0.1",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^5.0.0",
@ -26,7 +31,8 @@
 		"tailwindcss": "^4.1.7",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^6.0.0"
+		"vite": "^6.0.0",
+		"vitest": "^2.1.8"
 	},
 	"dependencies": {
 		"@nutriphi/shared": "workspace:*",
--- a/apps/nutriphi/apps/web/src/lib/api/client.spec.ts
+++ b/apps/nutriphi/apps/web/src/lib/api/client.spec.ts
@ -0,0 +1,126 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+// Mock the auth store before importing client
+vi.mock('$lib/stores/auth.svelte', () => ({
+	authStore: {
+		getAccessToken: vi.fn().mockResolvedValue('test-token'),
+	},
+}));
+
+vi.mock('$env/static/public', () => ({
+	PUBLIC_BACKEND_URL: 'http://localhost:3023',
+}));
+
+describe('ApiClient', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		(global.fetch as any).mockReset();
+	});
+
+	describe('get', () => {
+		it('should make GET request with auth header', async () => {
+			const mockResponse = { data: 'test' };
+			(global.fetch as any).mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve(mockResponse),
+			});
+
+			const { apiClient } = await import('./client');
+			const result = await apiClient.get('/test');
+
+			expect(global.fetch).toHaveBeenCalledWith(
+				'http://localhost:3023/api/v1/test',
+				expect.objectContaining({
+					method: 'GET',
+					headers: expect.objectContaining({
+						Authorization: 'Bearer test-token',
+					}),
+				})
+			);
+			expect(result).toEqual(mockResponse);
+		});
+
+		it('should throw on non-ok response', async () => {
+			(global.fetch as any).mockResolvedValueOnce({
+				ok: false,
+				status: 404,
+			});
+
+			const { apiClient } = await import('./client');
+
+			await expect(apiClient.get('/notfound')).rejects.toThrow('API Error: 404');
+		});
+	});
+
+	describe('post', () => {
+		it('should make POST request with body', async () => {
+			const mockResponse = { id: '123' };
+			(global.fetch as any).mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve(mockResponse),
+			});
+
+			const { apiClient } = await import('./client');
+			const result = await apiClient.post('/meals', { name: 'Test' });
+
+			expect(global.fetch).toHaveBeenCalledWith(
+				'http://localhost:3023/api/v1/meals',
+				expect.objectContaining({
+					method: 'POST',
+					body: JSON.stringify({ name: 'Test' }),
+				})
+			);
+			expect(result).toEqual(mockResponse);
+		});
+	});
+
+	describe('patch', () => {
+		it('should make PATCH request', async () => {
+			const mockResponse = { id: '123', name: 'Updated' };
+			(global.fetch as any).mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve(mockResponse),
+			});
+
+			const { apiClient } = await import('./client');
+			const result = await apiClient.patch('/meals/123', { name: 'Updated' });
+
+			expect(global.fetch).toHaveBeenCalledWith(
+				'http://localhost:3023/api/v1/meals/123',
+				expect.objectContaining({
+					method: 'PATCH',
+				})
+			);
+			expect(result).toEqual(mockResponse);
+		});
+	});
+
+	describe('delete', () => {
+		it('should make DELETE request', async () => {
+			(global.fetch as any).mockResolvedValueOnce({
+				ok: true,
+			});
+
+			const { apiClient } = await import('./client');
+			await apiClient.delete('/meals/123');
+
+			expect(global.fetch).toHaveBeenCalledWith(
+				'http://localhost:3023/api/v1/meals/123',
+				expect.objectContaining({
+					method: 'DELETE',
+				})
+			);
+		});
+
+		it('should throw on failed delete', async () => {
+			(global.fetch as any).mockResolvedValueOnce({
+				ok: false,
+				status: 500,
+			});
+
+			const { apiClient } = await import('./client');
+
+			await expect(apiClient.delete('/meals/123')).rejects.toThrow('API Error: 500');
+		});
+	});
+});
--- a/apps/nutriphi/apps/web/src/lib/components/DailySummary.svelte
+++ b/apps/nutriphi/apps/web/src/lib/components/DailySummary.svelte
@ -2,6 +2,7 @@
 	import { mealsStore } from '$lib/stores/meals.svelte';
 	import { onMount } from 'svelte';
 	import ProgressRing from './ProgressRing.svelte';
+	import { AlertCircle, RefreshCw } from 'lucide-svelte';

 	onMount(() => {
 		mealsStore.fetchDailySummary();
@ -9,6 +10,11 @@

 	let progress = $derived(mealsStore.dailySummary?.progress);
 	let caloriePercent = $derived(progress?.calories?.percentage ?? 0);
+
+	function retry() {
+		mealsStore.clearErrors();
+		mealsStore.fetchDailySummary();
+	}
 </script>

 <div class="bg-[var(--color-background-card)] rounded-2xl p-4 border border-[var(--color-border)]">
@ -20,64 +26,88 @@
 		</span>
 	</div>

-	<!-- Calories Ring -->
-	<div class="flex items-center gap-6">
-		<ProgressRing
-			percentage={caloriePercent}
-			size={100}
-			strokeWidth={8}
-			color="var(--color-calories)"
+	{#if mealsStore.summaryError}
+		<div
+			class="bg-red-500/10 border border-red-500/20 rounded-xl p-3 flex items-center gap-2 text-red-400 text-sm"
 		>
-			<div class="text-center">
-				<div class="text-2xl font-bold text-[var(--color-text-primary)]">
-					{progress?.calories?.current ?? 0}
-				</div>
-				<div class="text-xs text-[var(--color-text-secondary)]">
-					/ {progress?.calories?.target ?? 2000}
-				</div>
+			<AlertCircle class="w-4 h-4 flex-shrink-0" />
+			<span class="flex-1">{mealsStore.summaryError}</span>
+			<button onclick={retry} class="p-1 hover:bg-red-500/20 rounded transition-colors">
+				<RefreshCw class="w-4 h-4" />
+			</button>
+		</div>
+	{:else if mealsStore.summaryLoading}
+		<div class="flex items-center gap-6 animate-pulse">
+			<div class="w-[100px] h-[100px] rounded-full bg-[var(--color-background-elevated)]"></div>
+			<div class="flex-1 grid grid-cols-3 gap-2">
+				{#each [1, 2, 3] as _}
+					<div class="text-center">
+						<div class="h-5 bg-[var(--color-background-elevated)] rounded mb-1"></div>
+						<div class="h-3 bg-[var(--color-background-elevated)] rounded w-12 mx-auto"></div>
+					</div>
+				{/each}
 			</div>
-		</ProgressRing>
+		</div>
+	{:else}
+		<!-- Calories Ring -->
+		<div class="flex items-center gap-6">
+			<ProgressRing
+				percentage={caloriePercent}
+				size={100}
+				strokeWidth={8}
+				color="var(--color-calories)"
+			>
+				<div class="text-center">
+					<div class="text-2xl font-bold text-[var(--color-text-primary)]">
+						{progress?.calories?.current ?? 0}
+					</div>
+					<div class="text-xs text-[var(--color-text-secondary)]">
+						/ {progress?.calories?.target ?? 2000}
+					</div>
+				</div>
+			</ProgressRing>

-		<!-- Macros -->
-		<div class="flex-1 grid grid-cols-3 gap-2">
-			<div class="text-center">
-				<div class="text-sm font-medium text-[var(--color-protein)]">
-					{progress?.protein?.current ?? 0}g
+			<!-- Macros -->
+			<div class="flex-1 grid grid-cols-3 gap-2">
+				<div class="text-center">
+					<div class="text-sm font-medium text-[var(--color-protein)]">
+						{progress?.protein?.current ?? 0}g
+					</div>
+					<div class="text-xs text-[var(--color-text-muted)]">Protein</div>
+					<div class="mt-1 h-1 bg-[var(--color-background-elevated)] rounded-full overflow-hidden">
+						<div
+							class="h-full bg-[var(--color-protein)] transition-all"
+							style="width: {progress?.protein?.percentage ?? 0}%"
+						></div>
+					</div>
 				</div>
-				<div class="text-xs text-[var(--color-text-muted)]">Protein</div>
-				<div class="mt-1 h-1 bg-[var(--color-background-elevated)] rounded-full overflow-hidden">
-					<div
-						class="h-full bg-[var(--color-protein)] transition-all"
-						style="width: {progress?.protein?.percentage ?? 0}%"
-					></div>
-				</div>
-			</div>

-			<div class="text-center">
-				<div class="text-sm font-medium text-[var(--color-carbs)]">
-					{progress?.carbs?.current ?? 0}g
+				<div class="text-center">
+					<div class="text-sm font-medium text-[var(--color-carbs)]">
+						{progress?.carbs?.current ?? 0}g
+					</div>
+					<div class="text-xs text-[var(--color-text-muted)]">Carbs</div>
+					<div class="mt-1 h-1 bg-[var(--color-background-elevated)] rounded-full overflow-hidden">
+						<div
+							class="h-full bg-[var(--color-carbs)] transition-all"
+							style="width: {progress?.carbs?.percentage ?? 0}%"
+						></div>
+					</div>
 				</div>
-				<div class="text-xs text-[var(--color-text-muted)]">Carbs</div>
-				<div class="mt-1 h-1 bg-[var(--color-background-elevated)] rounded-full overflow-hidden">
-					<div
-						class="h-full bg-[var(--color-carbs)] transition-all"
-						style="width: {progress?.carbs?.percentage ?? 0}%"
-					></div>
-				</div>
-			</div>

-			<div class="text-center">
-				<div class="text-sm font-medium text-[var(--color-fat)]">
-					{progress?.fat?.current ?? 0}g
-				</div>
-				<div class="text-xs text-[var(--color-text-muted)]">Fett</div>
-				<div class="mt-1 h-1 bg-[var(--color-background-elevated)] rounded-full overflow-hidden">
-					<div
-						class="h-full bg-[var(--color-fat)] transition-all"
-						style="width: {progress?.fat?.percentage ?? 0}%"
-					></div>
+				<div class="text-center">
+					<div class="text-sm font-medium text-[var(--color-fat)]">
+						{progress?.fat?.current ?? 0}g
+					</div>
+					<div class="text-xs text-[var(--color-text-muted)]">Fett</div>
+					<div class="mt-1 h-1 bg-[var(--color-background-elevated)] rounded-full overflow-hidden">
+						<div
+							class="h-full bg-[var(--color-fat)] transition-all"
+							style="width: {progress?.fat?.percentage ?? 0}%"
+						></div>
+					</div>
 				</div>
 			</div>
 		</div>
-	</div>
+	{/if}
 </div>
--- a/apps/nutriphi/apps/web/src/lib/components/Header.svelte
+++ b/apps/nutriphi/apps/web/src/lib/components/Header.svelte
@ -1,5 +1,5 @@
 <script lang="ts">
-	import { User, Settings } from 'lucide-svelte';
+	import { Settings } from 'lucide-svelte';
 </script>

 <header
@ -14,20 +14,13 @@
 				<span class="font-semibold text-[var(--color-text-primary)]">NutriPhi</span>
 			</div>

-			<div class="flex items-center gap-2">
-				<a
-					href="/settings"
-					class="p-2 rounded-lg hover:bg-[var(--color-background-card)] transition-colors"
-				>
-					<Settings class="w-5 h-5 text-[var(--color-text-secondary)]" />
-				</a>
-				<a
-					href="/profile"
-					class="p-2 rounded-lg hover:bg-[var(--color-background-card)] transition-colors"
-				>
-					<User class="w-5 h-5 text-[var(--color-text-secondary)]" />
-				</a>
-			</div>
+			<a
+				href="/settings"
+				class="p-2 rounded-lg hover:bg-[var(--color-background-card)] transition-colors"
+				title="Einstellungen"
+			>
+				<Settings class="w-5 h-5 text-[var(--color-text-secondary)]" />
+			</a>
 		</div>
 	</div>
 </header>
--- a/apps/nutriphi/apps/web/src/lib/components/MealList.svelte
+++ b/apps/nutriphi/apps/web/src/lib/components/MealList.svelte
@ -2,7 +2,9 @@
 	import { mealsStore } from '$lib/stores/meals.svelte';
 	import { onMount } from 'svelte';
 	import { MEAL_TYPE_LABELS } from '@nutriphi/shared';
-	import { Trash2, Camera, PenLine } from 'lucide-svelte';
+	import { Trash2, Camera, PenLine, AlertCircle, RefreshCw, Loader2 } from 'lucide-svelte';
+
+	let deleting = $state<string | null>(null);

 	onMount(() => {
 		mealsStore.fetchTodaysMeals();
@ -10,15 +12,48 @@

 	async function deleteMeal(id: string) {
 		if (confirm('Mahlzeit wirklich löschen?')) {
-			await mealsStore.deleteMeal(id);
+			deleting = id;
+			try {
+				await mealsStore.deleteMeal(id);
+			} catch {
+				// Error is handled in store
+			} finally {
+				deleting = null;
+			}
 		}
 	}
+
+	function retry() {
+		mealsStore.clearErrors();
+		mealsStore.fetchTodaysMeals();
+	}
 </script>

 <div class="space-y-3">
+	{#if mealsStore.error}
+		<div
+			class="bg-red-500/10 border border-red-500/20 rounded-xl p-4 flex items-center gap-3 text-red-400"
+		>
+			<AlertCircle class="w-5 h-5 flex-shrink-0" />
+			<span class="flex-1 text-sm">{mealsStore.error}</span>
+			<button onclick={retry} class="p-2 hover:bg-red-500/20 rounded-lg transition-colors">
+				<RefreshCw class="w-4 h-4" />
+			</button>
+		</div>
+	{/if}
+
+	{#if mealsStore.deleteError}
+		<div
+			class="bg-red-500/10 border border-red-500/20 rounded-xl p-3 flex items-center gap-2 text-red-400 text-sm"
+		>
+			<AlertCircle class="w-4 h-4 flex-shrink-0" />
+			<span>{mealsStore.deleteError}</span>
+		</div>
+	{/if}
+
 	{#if mealsStore.loading}
 		<div class="text-center py-8 text-[var(--color-text-secondary)]">Laden...</div>
-	{:else if mealsStore.meals.length === 0}
+	{:else if !mealsStore.error && mealsStore.meals.length === 0}
 		<div class="text-center py-8">
 			<p class="text-[var(--color-text-secondary)] mb-2">Noch keine Mahlzeiten heute</p>
 			<p class="text-sm text-[var(--color-text-muted)]">
@ -65,9 +100,14 @@
 					</div>
 					<button
 						onclick={() => deleteMeal(meal.id)}
-						class="p-2 rounded-lg hover:bg-[var(--color-background-elevated)] text-[var(--color-text-muted)] hover:text-red-400 transition-colors"
+						disabled={deleting === meal.id}
+						class="p-2 rounded-lg hover:bg-[var(--color-background-elevated)] text-[var(--color-text-muted)] hover:text-red-400 transition-colors disabled:opacity-50"
 					>
-						<Trash2 class="w-4 h-4" />
+						{#if deleting === meal.id}
+							<Loader2 class="w-4 h-4 animate-spin" />
+						{:else}
+							<Trash2 class="w-4 h-4" />
+						{/if}
 					</button>
 				</div>
 			</div>
--- a/apps/nutriphi/apps/web/src/lib/stores/meals.svelte.ts
+++ b/apps/nutriphi/apps/web/src/lib/stores/meals.svelte.ts
@ -10,6 +10,9 @@ class MealsStore {
 	loading = $state(false);
 	error = $state<string | null>(null);
 	dailySummary = $state<DailySummary | null>(null);
+	summaryLoading = $state(false);
+	summaryError = $state<string | null>(null);
+	deleteError = $state<string | null>(null);

 	async fetchTodaysMeals() {
 		this.loading = true;
@ -18,18 +21,23 @@ class MealsStore {
 			const today = new Date().toISOString().split('T')[0];
 			this.meals = await apiClient.get<MealWithNutrition[]>(`/meals?date=${today}`);
 		} catch (err) {
-			this.error = err instanceof Error ? err.message : 'Failed to fetch meals';
+			this.error = err instanceof Error ? err.message : 'Mahlzeiten konnten nicht geladen werden';
 		} finally {
 			this.loading = false;
 		}
 	}

 	async fetchDailySummary(date?: Date) {
+		this.summaryLoading = true;
+		this.summaryError = null;
 		try {
 			const dateStr = (date || new Date()).toISOString().split('T')[0];
 			this.dailySummary = await apiClient.get<DailySummary>(`/stats/daily?date=${dateStr}`);
 		} catch (err) {
-			console.error('Failed to fetch daily summary:', err);
+			this.summaryError =
+				err instanceof Error ? err.message : 'Zusammenfassung konnte nicht geladen werden';
+		} finally {
+			this.summaryLoading = false;
 		}
 	}

@ -46,16 +54,37 @@ class MealsStore {
 		fiber?: number;
 		sugar?: number;
 	}) {
-		const meal = await apiClient.post<MealWithNutrition>('/meals', mealData);
-		this.meals = [...this.meals, meal];
-		await this.fetchDailySummary();
-		return meal;
+		this.error = null;
+		try {
+			const meal = await apiClient.post<MealWithNutrition>('/meals', mealData);
+			this.meals = [...this.meals, meal];
+			await this.fetchDailySummary();
+			return meal;
+		} catch (err) {
+			const message =
+				err instanceof Error ? err.message : 'Mahlzeit konnte nicht gespeichert werden';
+			this.error = message;
+			throw new Error(message);
+		}
 	}

 	async deleteMeal(mealId: string) {
-		await apiClient.delete(`/meals/${mealId}`);
-		this.meals = this.meals.filter((m) => m.id !== mealId);
-		await this.fetchDailySummary();
+		this.deleteError = null;
+		try {
+			await apiClient.delete(`/meals/${mealId}`);
+			this.meals = this.meals.filter((m) => m.id !== mealId);
+			await this.fetchDailySummary();
+		} catch (err) {
+			this.deleteError =
+				err instanceof Error ? err.message : 'Mahlzeit konnte nicht gelöscht werden';
+			throw new Error(this.deleteError);
+		}
+	}
+
+	clearErrors() {
+		this.error = null;
+		this.summaryError = null;
+		this.deleteError = null;
 	}
 }

--- a/apps/nutriphi/apps/web/src/routes/add/+page.svelte
+++ b/apps/nutriphi/apps/web/src/routes/add/+page.svelte
@ -6,7 +6,7 @@
 	import { apiClient } from '$lib/api/client';
 	import { suggestMealType, MEAL_TYPE_LABELS } from '@nutriphi/shared';
 	import type { AIAnalysisResult } from '@nutriphi/shared';
-	import { Camera, ArrowLeft, Loader2, Check } from 'lucide-svelte';
+	import { Camera, ArrowLeft, Loader2, Check, AlertCircle, X } from 'lucide-svelte';

 	let inputType = $derived($page.url.searchParams.get('type') || 'photo');
 	let mealType = $state(suggestMealType());
@ -177,7 +177,18 @@
 		{/if}

 		{#if error}
-			<p class="text-red-400 text-sm mb-4">{error}</p>
+			<div
+				class="bg-red-500/10 border border-red-500/20 rounded-xl p-3 mb-4 flex items-center gap-2 text-red-400"
+			>
+				<AlertCircle class="w-4 h-4 flex-shrink-0" />
+				<span class="flex-1 text-sm">{error}</span>
+				<button
+					onclick={() => (error = '')}
+					class="p-1 hover:bg-red-500/20 rounded transition-colors"
+				>
+					<X class="w-4 h-4" />
+				</button>
+			</div>
 		{/if}

 		{#if !analysisResult}
--- a/apps/nutriphi/apps/web/src/routes/settings/+page.svelte
+++ b/apps/nutriphi/apps/web/src/routes/settings/+page.svelte
@ -0,0 +1,277 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	import { authStore } from '$lib/stores/auth.svelte';
+	import { apiClient } from '$lib/api/client';
+	import { DEFAULT_DAILY_VALUES } from '@nutriphi/shared';
+	import { ArrowLeft, Save, Loader2, AlertCircle, LogOut, User, Target } from 'lucide-svelte';
+
+	interface UserGoals {
+		dailyCalories: number;
+		dailyProtein: number;
+		dailyCarbs: number;
+		dailyFat: number;
+		dailyFiber: number;
+	}
+
+	let loading = $state(true);
+	let saving = $state(false);
+	let error = $state('');
+	let success = $state('');
+
+	let dailyCalories = $state<number>(DEFAULT_DAILY_VALUES.calories);
+	let dailyProtein = $state<number>(DEFAULT_DAILY_VALUES.protein);
+	let dailyCarbs = $state<number>(DEFAULT_DAILY_VALUES.carbohydrates);
+	let dailyFat = $state<number>(DEFAULT_DAILY_VALUES.fat);
+	let dailyFiber = $state<number>(DEFAULT_DAILY_VALUES.fiber);
+
+	// Redirect if not authenticated
+	$effect(() => {
+		if (!authStore.loading && !authStore.isAuthenticated) {
+			goto('/login');
+		}
+	});
+
+	onMount(async () => {
+		try {
+			const goals = await apiClient.get<UserGoals | null>('/goals');
+			if (goals) {
+				dailyCalories = goals.dailyCalories;
+				dailyProtein = goals.dailyProtein ?? DEFAULT_DAILY_VALUES.protein;
+				dailyCarbs = goals.dailyCarbs ?? DEFAULT_DAILY_VALUES.carbohydrates;
+				dailyFat = goals.dailyFat ?? DEFAULT_DAILY_VALUES.fat;
+				dailyFiber = goals.dailyFiber ?? DEFAULT_DAILY_VALUES.fiber;
+			}
+		} catch (err) {
+			// No goals set yet, use defaults
+		} finally {
+			loading = false;
+		}
+	});
+
+	async function saveGoals() {
+		error = '';
+		success = '';
+		saving = true;
+
+		try {
+			await apiClient.post('/goals', {
+				dailyCalories,
+				dailyProtein,
+				dailyCarbs,
+				dailyFat,
+				dailyFiber,
+			});
+			success = 'Ziele gespeichert!';
+			setTimeout(() => (success = ''), 3000);
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Speichern fehlgeschlagen';
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function handleLogout() {
+		await authStore.signOut();
+		goto('/login');
+	}
+</script>
+
+<div class="min-h-screen bg-[var(--color-background-page)]">
+	<!-- Header -->
+	<header
+		class="sticky top-0 z-40 bg-[var(--color-background-page)]/95 backdrop-blur border-b border-[var(--color-border)]"
+	>
+		<div class="container mx-auto px-4 max-w-lg">
+			<div class="flex items-center h-14">
+				<button
+					onclick={() => goto('/')}
+					class="p-2 -ml-2 rounded-lg hover:bg-[var(--color-background-card)]"
+				>
+					<ArrowLeft class="w-5 h-5 text-[var(--color-text-secondary)]" />
+				</button>
+				<h1 class="ml-2 font-semibold text-[var(--color-text-primary)]">Einstellungen</h1>
+			</div>
+		</div>
+	</header>
+
+	<main class="container mx-auto px-4 py-6 max-w-lg space-y-6">
+		<!-- User Info -->
+		<section
+			class="bg-[var(--color-background-card)] rounded-xl p-4 border border-[var(--color-border)]"
+		>
+			<div class="flex items-center gap-3 mb-4">
+				<div
+					class="w-10 h-10 rounded-full bg-[var(--color-primary)]/20 flex items-center justify-center"
+				>
+					<User class="w-5 h-5 text-[var(--color-primary)]" />
+				</div>
+				<div>
+					<h2 class="font-semibold text-[var(--color-text-primary)]">Konto</h2>
+					<p class="text-sm text-[var(--color-text-secondary)]">
+						{authStore.user?.email ?? 'Nicht angemeldet'}
+					</p>
+				</div>
+			</div>
+			<button
+				onclick={handleLogout}
+				class="w-full py-2.5 px-4 bg-[var(--color-background-elevated)] hover:bg-red-500/20 text-[var(--color-text-secondary)] hover:text-red-400 font-medium rounded-lg transition-colors flex items-center justify-center gap-2"
+			>
+				<LogOut class="w-4 h-4" />
+				Abmelden
+			</button>
+		</section>
+
+		<!-- Daily Goals -->
+		<section
+			class="bg-[var(--color-background-card)] rounded-xl p-4 border border-[var(--color-border)]"
+		>
+			<div class="flex items-center gap-3 mb-4">
+				<div
+					class="w-10 h-10 rounded-full bg-[var(--color-calories)]/20 flex items-center justify-center"
+				>
+					<Target class="w-5 h-5 text-[var(--color-calories)]" />
+				</div>
+				<div>
+					<h2 class="font-semibold text-[var(--color-text-primary)]">Tagesziele</h2>
+					<p class="text-sm text-[var(--color-text-secondary)]">Passe deine Ziele an</p>
+				</div>
+			</div>
+
+			{#if loading}
+				<div class="flex items-center justify-center py-8">
+					<Loader2 class="w-6 h-6 animate-spin text-[var(--color-text-muted)]" />
+				</div>
+			{:else}
+				<div class="space-y-4">
+					<!-- Calories -->
+					<div>
+						<label
+							for="calories"
+							class="block text-sm font-medium text-[var(--color-text-secondary)] mb-1"
+						>
+							Kalorien (kcal)
+						</label>
+						<input
+							id="calories"
+							type="number"
+							bind:value={dailyCalories}
+							min="500"
+							max="10000"
+							class="w-full px-3 py-2 bg-[var(--color-background-elevated)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-primary)]"
+						/>
+					</div>
+
+					<!-- Protein -->
+					<div>
+						<label
+							for="protein"
+							class="block text-sm font-medium text-[var(--color-text-secondary)] mb-1"
+						>
+							Protein (g)
+						</label>
+						<input
+							id="protein"
+							type="number"
+							bind:value={dailyProtein}
+							min="0"
+							max="500"
+							class="w-full px-3 py-2 bg-[var(--color-background-elevated)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-primary)]"
+						/>
+					</div>
+
+					<!-- Carbs -->
+					<div>
+						<label
+							for="carbs"
+							class="block text-sm font-medium text-[var(--color-text-secondary)] mb-1"
+						>
+							Kohlenhydrate (g)
+						</label>
+						<input
+							id="carbs"
+							type="number"
+							bind:value={dailyCarbs}
+							min="0"
+							max="1000"
+							class="w-full px-3 py-2 bg-[var(--color-background-elevated)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-primary)]"
+						/>
+					</div>
+
+					<!-- Fat -->
+					<div>
+						<label
+							for="fat"
+							class="block text-sm font-medium text-[var(--color-text-secondary)] mb-1"
+						>
+							Fett (g)
+						</label>
+						<input
+							id="fat"
+							type="number"
+							bind:value={dailyFat}
+							min="0"
+							max="500"
+							class="w-full px-3 py-2 bg-[var(--color-background-elevated)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-primary)]"
+						/>
+					</div>
+
+					<!-- Fiber -->
+					<div>
+						<label
+							for="fiber"
+							class="block text-sm font-medium text-[var(--color-text-secondary)] mb-1"
+						>
+							Ballaststoffe (g)
+						</label>
+						<input
+							id="fiber"
+							type="number"
+							bind:value={dailyFiber}
+							min="0"
+							max="100"
+							class="w-full px-3 py-2 bg-[var(--color-background-elevated)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-primary)] focus:outline-none focus:border-[var(--color-primary)]"
+						/>
+					</div>
+
+					{#if error}
+						<div
+							class="bg-red-500/10 border border-red-500/20 rounded-lg p-3 flex items-center gap-2 text-red-400 text-sm"
+						>
+							<AlertCircle class="w-4 h-4 flex-shrink-0" />
+							<span>{error}</span>
+						</div>
+					{/if}
+
+					{#if success}
+						<div
+							class="bg-green-500/10 border border-green-500/20 rounded-lg p-3 text-green-400 text-sm text-center"
+						>
+							{success}
+						</div>
+					{/if}
+
+					<button
+						onclick={saveGoals}
+						disabled={saving}
+						class="w-full py-3 bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] text-white font-medium rounded-lg transition-colors disabled:opacity-50 flex items-center justify-center gap-2"
+					>
+						{#if saving}
+							<Loader2 class="w-5 h-5 animate-spin" />
+							Speichern...
+						{:else}
+							<Save class="w-5 h-5" />
+							Ziele speichern
+						{/if}
+					</button>
+				</div>
+			{/if}
+		</section>
+
+		<!-- App Info -->
+		<section class="text-center text-sm text-[var(--color-text-muted)] py-4">
+			<p>NutriPhi v1.0.0</p>
+			<p class="mt-1">KI-gestützte Ernährungsanalyse</p>
+		</section>
+	</main>
+</div>
--- a/apps/nutriphi/apps/web/src/test/mocks/app/environment.ts
+++ b/apps/nutriphi/apps/web/src/test/mocks/app/environment.ts
@ -0,0 +1,4 @@
+export const browser = true;
+export const building = false;
+export const dev = true;
+export const version = 'test';
--- a/apps/nutriphi/apps/web/src/test/mocks/app/navigation.ts
+++ b/apps/nutriphi/apps/web/src/test/mocks/app/navigation.ts
@ -0,0 +1,9 @@
+import { vi } from 'vitest';
+
+export const goto = vi.fn();
+export const invalidate = vi.fn();
+export const invalidateAll = vi.fn();
+export const prefetch = vi.fn();
+export const prefetchRoutes = vi.fn();
+export const beforeNavigate = vi.fn();
+export const afterNavigate = vi.fn();
--- a/apps/nutriphi/apps/web/src/test/mocks/app/stores.ts
+++ b/apps/nutriphi/apps/web/src/test/mocks/app/stores.ts
@ -0,0 +1,17 @@
+import { writable, readable } from 'svelte/store';
+
+export const page = readable({
+	url: new URL('http://localhost'),
+	params: {},
+	route: { id: '/' },
+	status: 200,
+	error: null,
+	data: {},
+	form: null,
+});
+
+export const navigating = readable(null);
+export const updated = {
+	subscribe: writable(false).subscribe,
+	check: async () => false,
+};
--- a/apps/nutriphi/apps/web/src/test/mocks/env/static/public.ts
+++ b/apps/nutriphi/apps/web/src/test/mocks/env/static/public.ts
@ -0,0 +1,2 @@
+export const PUBLIC_BACKEND_URL = 'http://localhost:3023';
+export const PUBLIC_MANA_CORE_AUTH_URL = 'http://localhost:3001';
--- a/apps/nutriphi/apps/web/src/test/setup.ts
+++ b/apps/nutriphi/apps/web/src/test/setup.ts
@ -0,0 +1,19 @@
+import { vi, beforeEach } from 'vitest';
+
+// Mock localStorage
+const localStorageMock = {
+	getItem: vi.fn(),
+	setItem: vi.fn(),
+	removeItem: vi.fn(),
+	clear: vi.fn(),
+};
+Object.defineProperty(global, 'localStorage', { value: localStorageMock });
+
+// Mock fetch
+global.fetch = vi.fn();
+
+// Reset mocks before each test
+beforeEach(() => {
+	vi.clearAllMocks();
+	localStorageMock.getItem.mockReturnValue(null);
+});
--- a/apps/nutriphi/apps/web/vitest.config.ts
+++ b/apps/nutriphi/apps/web/vitest.config.ts
@ -0,0 +1,20 @@
+import { defineConfig } from 'vitest/config';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import path from 'path';
+
+export default defineConfig({
+	plugins: [svelte({ hot: !process.env.VITEST })],
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}'],
+		environment: 'jsdom',
+		globals: true,
+		setupFiles: ['./src/test/setup.ts'],
+	},
+	resolve: {
+		alias: {
+			$lib: path.resolve(__dirname, './src/lib'),
+			$app: path.resolve(__dirname, './src/test/mocks/app'),
+			'$env/static/public': path.resolve(__dirname, './src/test/mocks/env/static/public.ts'),
+		},
+	},
+});
--- a/apps/nutriphi/package.json
+++ b/apps/nutriphi/package.json
@ -10,7 +10,12 @@
 		"dev:landing": "pnpm --filter @nutriphi/landing dev",
 		"db:push": "pnpm --filter @nutriphi/backend db:push",
 		"db:studio": "pnpm --filter @nutriphi/backend db:studio",
-		"db:seed": "pnpm --filter @nutriphi/backend db:seed"
+		"db:seed": "pnpm --filter @nutriphi/backend db:seed",
+		"test": "pnpm --filter @nutriphi/backend test && pnpm --filter @nutriphi/shared test && pnpm --filter @nutriphi/web test",
+		"test:backend": "pnpm --filter @nutriphi/backend test",
+		"test:web": "pnpm --filter @nutriphi/web test",
+		"test:shared": "pnpm --filter @nutriphi/shared test",
+		"test:cov": "pnpm --filter @nutriphi/backend test:cov"
 	},
 	"devDependencies": {
 		"typescript": "^5.9.3"
--- a/apps/nutriphi/packages/shared/package.json
+++ b/apps/nutriphi/packages/shared/package.json
@ -11,10 +11,13 @@
 		"./constants": "./src/constants/index.ts"
 	},
 	"scripts": {
-		"type-check": "tsc --noEmit"
+		"type-check": "tsc --noEmit",
+		"test": "vitest run",
+		"test:watch": "vitest"
 	},
 	"devDependencies": {
-		"typescript": "~5.9.2"
+		"typescript": "~5.9.2",
+		"vitest": "^2.1.8"
 	},
 	"dependencies": {}
 }
--- a/apps/nutriphi/packages/shared/src/utils/utils.spec.ts
+++ b/apps/nutriphi/packages/shared/src/utils/utils.spec.ts
@ -0,0 +1,189 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import {
+	calculateProgress,
+	sumNutrition,
+	formatNutrient,
+	getProgressColor,
+	detectDeficiencies,
+	suggestMealType,
+	formatDateForDisplay,
+	isToday,
+} from './index';
+
+describe('Shared Utils', () => {
+	describe('calculateProgress', () => {
+		it('should calculate progress with default values', () => {
+			const nutrition = { calories: 1000, protein: 25, carbohydrates: 137, fat: 39 };
+			const progress = calculateProgress(nutrition);
+
+			expect(progress.calories.current).toBe(1000);
+			expect(progress.calories.target).toBe(2000);
+			expect(progress.calories.percentage).toBe(50);
+		});
+
+		it('should use custom goals', () => {
+			const nutrition = { calories: 1500, protein: 75 };
+			const goals = {
+				dailyCalories: 3000,
+				dailyProtein: 150,
+				dailyCarbs: 300,
+				dailyFat: 100,
+			} as any;
+
+			const progress = calculateProgress(nutrition, goals);
+
+			expect(progress.calories.target).toBe(3000);
+			expect(progress.calories.percentage).toBe(50);
+		});
+
+		it('should cap percentage at 100', () => {
+			const nutrition = { calories: 3000 };
+			const progress = calculateProgress(nutrition);
+
+			expect(progress.calories.percentage).toBe(100);
+		});
+
+		it('should handle missing values', () => {
+			const progress = calculateProgress({});
+
+			expect(progress.calories.current).toBe(0);
+			expect(progress.calories.percentage).toBe(0);
+		});
+	});
+
+	describe('sumNutrition', () => {
+		it('should sum multiple meals', () => {
+			const meals = [
+				{ nutrition: { calories: 500, protein: 20, carbohydrates: 60, fat: 15 } },
+				{ nutrition: { calories: 300, protein: 15, carbohydrates: 40, fat: 10 } },
+			];
+
+			const sum = sumNutrition(meals);
+
+			expect(sum.calories).toBe(800);
+			expect(sum.protein).toBe(35);
+			expect(sum.carbohydrates).toBe(100);
+			expect(sum.fat).toBe(25);
+		});
+
+		it('should handle null nutrition', () => {
+			const meals = [{ nutrition: { calories: 500 } }, { nutrition: null }];
+
+			const sum = sumNutrition(meals);
+
+			expect(sum.calories).toBe(500);
+		});
+
+		it('should handle empty array', () => {
+			const sum = sumNutrition([]);
+
+			expect(sum.calories).toBe(0);
+		});
+	});
+
+	describe('formatNutrient', () => {
+		it('should format calories', () => {
+			expect(formatNutrient('calories', 1234.5)).toBe('1235 kcal');
+		});
+
+		it('should format protein', () => {
+			expect(formatNutrient('protein', 25.5)).toBe('25.5 g');
+		});
+
+		it('should return dash for undefined', () => {
+			expect(formatNutrient('calories', undefined)).toBe('-');
+		});
+	});
+
+	describe('getProgressColor', () => {
+		it('should return red for low percentage', () => {
+			expect(getProgressColor(30)).toBe('#EF4444');
+		});
+
+		it('should return orange for medium percentage', () => {
+			expect(getProgressColor(60)).toBe('#F59E0B');
+		});
+
+		it('should return green for high percentage', () => {
+			expect(getProgressColor(90)).toBe('#22C55E');
+		});
+
+		it('should return red for over 100%', () => {
+			expect(getProgressColor(120)).toBe('#EF4444');
+		});
+	});
+
+	describe('detectDeficiencies', () => {
+		it('should detect low protein', () => {
+			const nutrition = { protein: 10 }; // 20% of 50g target
+			const deficiencies = detectDeficiencies(nutrition);
+
+			expect(deficiencies).toContainEqual(expect.objectContaining({ nutrient: 'protein' }));
+		});
+
+		it('should not detect deficiency when above threshold', () => {
+			const nutrition = { protein: 30 }; // 60% of target
+			const deficiencies = detectDeficiencies(nutrition);
+
+			expect(deficiencies.find((d) => d.nutrient === 'protein')).toBeUndefined();
+		});
+	});
+
+	describe('suggestMealType', () => {
+		beforeEach(() => {
+			vi.useFakeTimers();
+		});
+
+		afterEach(() => {
+			vi.useRealTimers();
+		});
+
+		it('should suggest breakfast in the morning', () => {
+			vi.setSystemTime(new Date('2024-01-15T08:00:00'));
+			expect(suggestMealType()).toBe('breakfast');
+		});
+
+		it('should suggest lunch at noon', () => {
+			vi.setSystemTime(new Date('2024-01-15T12:00:00'));
+			expect(suggestMealType()).toBe('lunch');
+		});
+
+		it('should suggest dinner in the evening', () => {
+			vi.setSystemTime(new Date('2024-01-15T19:00:00'));
+			expect(suggestMealType()).toBe('dinner');
+		});
+
+		it('should suggest snack at other times', () => {
+			vi.setSystemTime(new Date('2024-01-15T15:00:00'));
+			expect(suggestMealType()).toBe('snack');
+		});
+	});
+
+	describe('formatDateForDisplay', () => {
+		it('should format date in German', () => {
+			const date = new Date('2024-01-15');
+			const formatted = formatDateForDisplay(date, 'de-DE');
+
+			expect(formatted).toContain('15');
+			expect(formatted).toContain('Januar');
+		});
+	});
+
+	describe('isToday', () => {
+		it('should return true for today', () => {
+			expect(isToday(new Date())).toBe(true);
+		});
+
+		it('should return false for yesterday', () => {
+			const yesterday = new Date();
+			yesterday.setDate(yesterday.getDate() - 1);
+			expect(isToday(yesterday)).toBe(false);
+		});
+
+		it('should return false for same day different year', () => {
+			const lastYear = new Date();
+			lastYear.setFullYear(lastYear.getFullYear() - 1);
+			expect(isToday(lastYear)).toBe(false);
+		});
+	});
+});
--- a/apps/nutriphi/packages/shared/vitest.config.ts
+++ b/apps/nutriphi/packages/shared/vitest.config.ts
@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}'],
+		environment: 'node',
+		globals: true,
+	},
+});