Merge pull request 'profiles => format clean archi' (#1) from clean-arch into main

Reviewed-on: #1
2025-11-14 17:44:57 +00:00
parent 4191ac1ed0 b6241ff911
commit ff0e29c148
222 changed files with 28692 additions and 23936 deletions
--- a/.actrc
+++ b/.actrc
@@ -1,3 +1,3 @@
--container-architecture linux/arm64
+--container-architecture linux/amd64
 -W .gitea/workflows
-P ubuntu-latest=node:20-bullseye
+-P ubuntu-latest==ghcr.io/catthehacker/ubuntu:act-latest
--- a/.gitea/workflows/ci.yaml
+++ b/.gitea/workflows/ci.yaml
@@ -1,4 +1,4 @@
-name: Docker Build Check
+name: Build Check

 # Déclencheur pour chaque pull request
 on:
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 100
+}
--- a/CMD.md
+++ b/CMD.md
@@ -1,3 +1,7 @@
+# commande Tree
+```bash
+tree -a -I 'node_modules|coverage|logs|.vscode|.git|dist|.git|.venv|__pycache__'
+```
 # Utilisation de `act` avec des workflows Gitea
 ```bash
 # Lister les workflows trouvés sous .gitea/workflows
--- a/README.md
+++ b/README.md
@@ -2,3 +2,67 @@

 ## Description
 Trouve Ton Profile est une plateforme innovante qui permet à chacun de trouver facilement des professionnels qualifiés dans tous les domaines de la vie quotidienne. Que tu cherches un électricien, un plombier, un développeur, ou tout autre expert, la plateforme te permet de parcourir rapidement des profils, de découvrir leurs compétences, et de sélectionner la personne idéale pour répondre à tes besoins. Conçue pour faciliter l'accès à des talents locaux et spécialisés, Trouve Ton Profile est l'outil incontournable pour simplifier les tâches du quotidien en connectant les personnes à des solutions fiables et adaptées.
+
+# Architecture du Projet
+
+- domain : modèles métiers + interfaces de dépôt (ports) + (optionnel) erreurs/valeurs.
+- usecase : cas d’usage (use cases) qui orchestrent le métier (pur TS).
+- infrastructure : implémentations techniques (HTTP/PocketBase, mapping DTO ⇄ domaine).
+- ui (Angular) : composants/containers/facade → appellent les use cases via DI.
+
+```mathematica
+┌───────────────────────────────────────────────────┐
+│                    UI (Angular)                  │
+│  Composants, Facades, Formulaires                │
+│  ➜ Appelle les Use Cases                         │
+└───────────────────────────────────────────────────┘
+                        │
+                        ▼
+┌───────────────────────────────────────────────────┐
+│             Application / Use Cases              │
+│  Exemple : ListProfilesUseCase                   │
+│  ➜ Appelle les interfaces du domaine             │
+└───────────────────────────────────────────────────┘
+                        │
+                        ▼
+┌───────────────────────────────────────────────────┐
+│                   Domaine (Core)                 │
+│  Interfaces (ProfileRepository), Entities        │
+│  ➜ Ne dépend de rien                             │
+└───────────────────────────────────────────────────┘
+                        │
+                        ▼
+┌───────────────────────────────────────────────────┐
+│            Infrastructure (Technique)            │
+│  Implémentations : PbProfileRepository         │
+│  API HTTP, PocketBase, LocalStorage              │
+│  ➜ Implémente l’interface du domaine             │
+└───────────────────────────────────────────────────┘
+
+```
+# Le présenteurs 
+Un Presenter (ou ViewModel / Mapper) sert à :<br>
+
+✔ Transformer les données métier (Domain Model) → en données prêtes pour l’affichage (UI Model)<br>
+✔ Préparer les données : formatage de date, texte tronqué, fusion de champs…<br>
+✔ Éviter que tes composants Angular fassent eux-mêmes du .toUpperCase(), .slice(), etc.<br>
+✔ Laisser le domaine pur, sans logique de présentation<br>
+
+```
+UI (Component)
+     ⬇
+Facade (coordonne l’action)
+     ⬇
+UseCase (app logic)
+     ⬇
+ProfileRepository (interface domain)
+     ⬇
+Infrastructure (PocketBase / HTTP)
+     ⬇
+▶ DATA RAW (Profile from database)
+     ⬆
+Presenter (transforme en UI-friendly data)
+     ⬆
+UI displays ViewModel
+
+```
--- a/angular.json
+++ b/angular.json
@@ -17,6 +17,9 @@
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
+            "allowedCommonJsDependencies": [
+              "pocketbase"
+            ],
            "outputPath": "dist/",
            "index": "src/index.html",
            "browser": "src/main.ts",
@@ -88,11 +91,24 @@
          "options": {
            "buildTarget": "TrouveTonProfile:build"
          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
        }
      }
    }
  },
  "cli": {
-    "analytics": "dda3ec82-e13e-4042-ae63-71d138479518"
+    "analytics": "dda3ec82-e13e-4042-ae63-71d138479518",
+    "schematicCollections": [
+      "angular-eslint",
+      "angular-eslint"
+    ]
  }
 }
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -0,0 +1,43 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);
--- a/jest.config.js
+++ b/jest.config.js
@@ -3,15 +3,15 @@ module.exports = {
  rootDir: '.',
  setupFilesAfterEnv: ['<rootDir>/src/setup-jest.ts'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/dist/'],
+  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.ts$': 'ts-jest', // Only transform .ts files
  },
  transformIgnorePatterns: [
-    '/node_modules/(?!flat)/', // Exclude modules except 'flat' from transformation
+    '/node_modules/(?!flat)/',
  ],
  moduleNameMapper: {
    '^@app/(.*)$': '<rootDir>/src/app/$1',
    '^@env/(.*)$': '<rootDir>/src/environments/$1',
  },
-  testTimeout: 30000,
 };
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -7,11 +7,16 @@
    "start:dev": "docker compose up -d && ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
+    "tsc": "tsc --noEmit",
+    "tsc:watch": "tsc --noEmit --watch",
+    "format": "prettier --write \"src/**/*.{ts,html,scss,css,md,json}\"",
+    "check:all": "npm run format && npm run tsc && npm run lint && npm run test",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "test:ci": "jest --runInBand",
-    "serve:ssr:TrouveTonProfile": "node dist/trouve-ton-profile/server/server.mjs"
+    "serve:ssr:TrouveTonProfile": "node dist/trouve-ton-profile/server/server.mjs",
+    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
@@ -48,18 +53,24 @@
    "@angular/cli": "^17.0.1",
    "@angular/compiler-cli": "^17.0.0",
    "@types/express": "^4.17.17",
-    "@types/jasmine": "~5.1.0",
    "@types/jest": "^30.0.0",
    "@types/node": "^18.18.0",
    "@types/node-fetch": "^2.6.13",
+    "angular-eslint": "20.4.0",
    "autoprefixer": "^10.4.20",
-    "jasmine-core": "~5.1.0",
+    "canvas": "^2.11.2",
+    "eslint": "^9.37.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
-    "jest-preset-angular": "^14.6.1",
+    "jest-preset-angular": "^14.6.2",
    "node-fetch": "^2.7.0",
    "postcss": "^8.4.47",
+    "prettier": "^3.6.2",
    "tailwindcss": "^3.4.12",
-    "typescript": "~5.2.2"
+    "ts-jest": "^29.4.5",
+    "typescript": "~5.2.2",
+    "typescript-eslint": "8.46.0"
  }
 }
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@@ -1,8 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import {provideRouter} from "@angular/router";
-import {ThemeService} from "@app/core/services/theme/theme.service";
-import {ProfileDetailComponent} from "@app/routes/profile/profile-detail/profile-detail.component";
+import { provideRouter } from '@angular/router';
+import { ThemeService } from '@app/core/services/theme/theme.service';
+import { ProfileDetailComponent } from '@app/routes/profile/profile-detail/profile-detail.component';

 describe('AppComponent', () => {
  let component: AppComponent;
@@ -11,9 +11,7 @@ describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AppComponent],
-      providers: [
-        provideRouter([])
-      ],
+      providers: [provideRouter([])],
    }).compileComponents();

    fixture = TestBed.createComponent(AppComponent);
@@ -34,5 +32,4 @@ describe('AppComponent', () => {
    const app = fixture.componentInstance;
    expect(app.title).toEqual('TrouveTonProfile');
  });
-
 });
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,8 +1,8 @@
 import { Component, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
-import {NavBarComponent} from "@app/shared/components/nav-bar/nav-bar.component";
-import {FooterComponent} from "@app/shared/components/footer/footer.component";
+import { NavBarComponent } from '@app/shared/components/nav-bar/nav-bar.component';
+import { FooterComponent } from '@app/shared/components/footer/footer.component';
 import { ThemeService } from '@app/core/services/theme/theme.service';

@Component({
@@ -10,7 +10,7 @@ import {ThemeService} from '@app/core/services/theme/theme.service';
  standalone: true,
  imports: [CommonModule, RouterOutlet, NavBarComponent, FooterComponent],
  templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
  title = 'TrouveTonProfile';
--- a/src/app/app.config.server.ts
+++ b/src/app/app.config.server.ts
@@ -3,9 +3,7 @@ import { provideServerRendering } from '@angular/platform-server';
 import { appConfig } from './app.config';

 const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering()
-  ]
+  providers: [provideServerRendering()],
 };

 export const config = mergeApplicationConfig(appConfig, serverConfig);
--- a/src/app/app.config.ts
+++ b/src/app/app.config.ts
@@ -4,13 +4,19 @@ import {
  provideRouter,
  withInMemoryScrolling,
  withPreloading,
-  withViewTransitions
+  withViewTransitions,
 } from '@angular/router';

 import { routes } from './app.routes';
-import {provideHttpClient, withFetch} from "@angular/common/http";
-import {provideAnimations} from "@angular/platform-browser/animations";
-import {provideToastr} from "ngx-toastr";
+import { provideHttpClient, withFetch } from '@angular/common/http';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { provideToastr } from 'ngx-toastr';
+import { PROFILE_REPOSITORY_TOKEN } from '@app/infrastructure/profiles/profile-repository.token';
+import { PbProfileRepository } from '@app/infrastructure/profiles/pb-profile.repository';
+import { PROJECT_REPOSITORY_TOKEN } from '@app/infrastructure/projects/project-repository.token';
+import { PbProjectRepository } from '@app/infrastructure/projects/pb-project.repository';
+import { SECTOR_REPOSITORY_TOKEN } from '@app/infrastructure/sectors/sector-repository.token';
+import { PbSectorRepository } from '@app/infrastructure/sectors/pb-sector.repository';

 export const appConfig: ApplicationConfig = {
  providers: [
@@ -18,18 +24,20 @@ export const appConfig: ApplicationConfig = {
      routes,
      withViewTransitions(),
      withPreloading(PreloadAllModules),
-      withInMemoryScrolling(
-        {
+      withInMemoryScrolling({
        scrollPositionRestoration: 'enabled',
        anchorScrolling: 'enabled',
-        }
-      )),
+      })
+    ),
    provideAnimations(),
    provideHttpClient(withFetch()),
+    { provide: PROFILE_REPOSITORY_TOKEN, useExisting: PbProfileRepository },
+    { provide: PROJECT_REPOSITORY_TOKEN, useExisting: PbProjectRepository },
+    { provide: SECTOR_REPOSITORY_TOKEN, useExisting: PbSectorRepository },
    provideToastr({
      timeOut: 10000,
      positionClass: 'toast-top-right',
      preventDuplicates: true,
    }), // Toastr providers
-  ]
+  ],
 };
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,38 +1,43 @@
 import { Routes } from '@angular/router';
-import {authGuard} from "@app/core/guard/authentication/auth.guard";
+import { authGuard } from '@app/core/guard/authentication/auth.guard';

 export const routes: Routes = [
  {
    path: '',
    title: 'Accueil',
-    loadChildren: () => import('@app/routes/home/home.module').then(m => m.HomeModule)
+    loadChildren: () => import('@app/routes/home/home.module').then((m) => m.HomeModule),
  },
  {
    path: 'home',
    title: 'Accueil',
-    loadChildren: () => import('@app/routes/home/home.module').then(m => m.HomeModule)
+    loadChildren: () => import('@app/routes/home/home.module').then((m) => m.HomeModule),
  },
  {
    path: 'profiles',
    title: 'Liste des profiles',
-    loadChildren: () => import('@app/routes/profile/profile.module').then(m => m.ProfileModule)
+    loadChildren: () => import('@app/routes/profile/profile.module').then((m) => m.ProfileModule),
  },
  {
    path: 'auth',
    title: 'Authentification',
-    loadChildren: () => import('@app/routes/authentification/authentification.module').then(m => m.AuthentificationModule)
+    loadChildren: () =>
+      import('@app/routes/authentification/authentification.module').then(
+        (m) => m.AuthentificationModule
+      ),
  },
  {
    path: 'my-profile',
    title: 'Mon profile',
    canActivate: [authGuard],
-    loadChildren: () => import('@app/routes/my-profile/my-profile.module').then(m => m.MyProfileModule)
+    loadChildren: () =>
+      import('@app/routes/my-profile/my-profile.module').then((m) => m.MyProfileModule),
  },
  {
    path: 'not-found',
    title: 'Page non trouvée',
-    loadChildren: () => import('@app/routes/not-found/not-found.module').then(m => m.NotFoundModule)
+    loadChildren: () =>
+      import('@app/routes/not-found/not-found.module').then((m) => m.NotFoundModule),
  },
  { path: '', redirectTo: '/', pathMatch: 'full' },
-  {path: '**', redirectTo: '/not-found'}
+  { path: '**', redirectTo: '/not-found' },
 ];
--- a/src/app/core/guard/authentication/auth.guard.spec.ts
+++ b/src/app/core/guard/authentication/auth.guard.spec.ts
@@ -1,9 +1,9 @@
 import { TestBed } from '@angular/core/testing';

 import { authGuard } from './auth.guard';
-import {AuthService} from "@app/core/services/authentication/auth.service";
-import {signal} from "@angular/core";
-import {Auth} from "@app/shared/models/auth";
+import { AuthService } from '@app/core/services/authentication/auth.service';
+import { signal } from '@angular/core';
+import { Auth } from '@app/shared/models/auth';
 import { CanActivateFn, Router } from '@angular/router';

 describe('authGuard', () => {
@@ -15,18 +15,18 @@ describe('authGuard', () => {

  beforeEach(() => {
    mockAuthService = {
-      user: signal<Auth | undefined>({ isValid: true, token: 'mockToken', record: null })
-    }
+      user: signal<Auth | undefined>({ isValid: true, token: 'mockToken', record: null }),
+    };

    mockRouter = {
-      parseUrl: jest.fn()
-    }
+      parseUrl: jest.fn(),
+    };

    TestBed.configureTestingModule({
      providers: [
        { provide: AuthService, useValue: mockAuthService },
-        { provide: Router, useValue: mockRouter }
-      ]
+        { provide: Router, useValue: mockRouter },
+      ],
    });
  });

@@ -51,8 +51,7 @@ describe('authGuard', () => {

    const result = TestBed.runInInjectionContext(() => executeGuard(mockRoute, mockState));

-    expect(result).toEqual("/auth" as any);
-    expect(mockRouter.parseUrl).toHaveBeenCalledWith("/auth");
-
+    expect(result).toEqual('/auth' as any);
+    expect(mockRouter.parseUrl).toHaveBeenCalledWith('/auth');
  });
 });
--- a/src/app/core/guard/authentication/auth.guard.ts
+++ b/src/app/core/guard/authentication/auth.guard.ts
@@ -1,13 +1,13 @@
 import { CanActivateFn, Router } from '@angular/router';
-import {inject} from "@angular/core";
-import {AuthService} from "@app/core/services/authentication/auth.service";
+import { inject } from '@angular/core';
+import { AuthService } from '@app/core/services/authentication/auth.service';

 export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (!authService.user()!.isValid) {
-    return router.parseUrl("/auth")
+    return router.parseUrl('/auth');
  }
  return true;
 };
--- a/src/app/core/resolvers/my-profile/my-profile.resolver.spec.ts
+++ b/src/app/core/resolvers/my-profile/my-profile.resolver.spec.ts
@@ -2,45 +2,41 @@ import {TestBed} from '@angular/core/testing';
 import { Router } from '@angular/router';

 import { myProfileResolver } from './my-profile.resolver';
-import {User} from "@app/shared/models/user";
+import { User } from '@app/shared/models/user';

 describe('myProfileResolver', () => {
-
  let mockRouter: Partial<Router>;

  beforeEach(() => {
    mockRouter = {
-      getCurrentNavigation: jest.fn()
+      getCurrentNavigation: jest.fn(),
    };

    TestBed.configureTestingModule({
-      providers: [
-        { provide: Router, useValue: mockRouter }
-      ]
+      providers: [{ provide: Router, useValue: mockRouter }],
    });
-
  });

  it('should return the user from navigation extras state', () => {
    const user: User = {
      id: 'adbc123',
-      username: "john_doe",
+      username: 'john_doe',
      verified: true,
      emailVisibility: false,
-      email: "jd@example.com",
+      email: 'jd@example.com',
      created: new Date().toString(),
      updated: new Date().toString(),
-      name: "john doe",
-      avatar: ""
+      name: 'john doe',
+      avatar: '',
    };

    // Mocke la méthode getCurrentNavigation pour retourner un objet attendu
    (mockRouter.getCurrentNavigation as jest.Mock).mockReturnValue({
      extras: {
        state: {
-          user
-        }
-      }
+          user,
+        },
+      },
    });

    const result = TestBed.runInInjectionContext(() => myProfileResolver(null as any, null as any));
@@ -48,5 +44,4 @@ describe('myProfileResolver', () => {
    expect(result).toEqual({ user });
    expect(mockRouter.getCurrentNavigation).toHaveBeenCalled();
  });
-
 });
--- a/src/app/core/resolvers/my-profile/my-profile.resolver.ts
+++ b/src/app/core/resolvers/my-profile/my-profile.resolver.ts
@@ -1,9 +1,9 @@
 import { ResolveFn, Router } from '@angular/router';
-import {User} from "@app/shared/models/user";
-import {inject} from "@angular/core";
+import { User } from '@app/shared/models/user';
+import { inject } from '@angular/core';

 export const myProfileResolver: ResolveFn<{ user: User }> = (route, state) => {
  const router = inject(Router);
  const user: User = router.getCurrentNavigation()!.extras.state!['user'] as User;
-  return {user}
+  return { user };
 };
--- a/src/app/core/resolvers/profile/detail/detail.resolver.spec.ts
+++ b/src/app/core/resolvers/profile/detail/detail.resolver.spec.ts
@@ -2,66 +2,60 @@ import {TestBed} from '@angular/core/testing';
 import { Router } from '@angular/router';

 import { detailResolver } from './detail.resolver';
-import {User} from "@app/shared/models/user";
-import {Profile} from "@app/shared/models/profile";
+import { User } from '@app/shared/models/user';
+import { Profile } from '@app/domain/profiles/profile.model';

 describe('detailResolver', () => {
-
  let mockRoute: Partial<Router>;

  beforeEach(() => {
    mockRoute = {
-      getCurrentNavigation: jest.fn()
+      getCurrentNavigation: jest.fn(),
    };

    TestBed.configureTestingModule({
-      providers: [
-        { provide: Router, useValue: mockRoute }
-      ]
+      providers: [{ provide: Router, useValue: mockRoute }],
    });
  });

  it('should  return user and profile', () => {
-
    const mockUser: User = {
      id: 'adbc123',
-      username: "john_doe",
+      username: 'john_doe',
      verified: true,
      emailVisibility: false,
-      email: "jd@example.com",
+      email: 'jd@example.com',
      created: new Date().toString(),
      updated: new Date().toString(),
-      name: "john doe",
-      avatar: ""
+      name: 'john doe',
+      avatar: '',
    };
    const mockProfile: Profile = {
-      id: "string",
-      created: "string",
-      updated: "string",
-      profession: "string",
-      utilisateur: "string",
+      id: 'string',
+      created: 'string',
+      updated: 'string',
+      profession: 'string',
+      utilisateur: 'string',
      estVerifier: false,
-      secteur: "string",
-      reseaux: JSON.parse("{}"),
-      bio: "string",
-      cv: "string",
+      secteur: 'string',
+      reseaux: JSON.parse('{}'),
+      bio: 'string',
+      cv: 'string',
      projets: [],
-      apropos: "string"
+      apropos: 'string',
    };
    const fakeState = {} as any;
    const fakeParams = { params: { name: 'john_doe' } } as any;

    (mockRoute.getCurrentNavigation as jest.Mock).mockReturnValue({
      extras: {
-        state: { user: mockUser, profile: mockProfile }
-      }
+        state: { user: mockUser, profile: mockProfile },
+      },
    });

    const result = TestBed.runInInjectionContext(() => detailResolver(fakeParams, fakeState));

    expect(result).toEqual({ user: mockUser, profile: mockProfile });
    expect(mockRoute.getCurrentNavigation).toHaveBeenCalled();
-
  });
-
 });
--- a/src/app/core/resolvers/profile/detail/detail.resolver.ts
+++ b/src/app/core/resolvers/profile/detail/detail.resolver.ts
@@ -1,10 +1,10 @@
 import { ResolveFn, Router } from '@angular/router';
-import {inject} from "@angular/core";
-import {User} from "@app/shared/models/user";
-import {Profile} from "@app/shared/models/profile";
+import { inject } from '@angular/core';
+import { User } from '@app/shared/models/user';
+import { Profile } from '@app/domain/profiles/profile.model';

-export const detailResolver: ResolveFn<{ user:User,profile:Profile }> = (route, state) => {
+export const detailResolver: ResolveFn<{ user: User; profile: Profile }> = (route, state) => {
  const paramValue = route.params['name'];
  const router = inject(Router);
-    return router.getCurrentNavigation()?.extras.state as { user:User,profile:Profile }
+  return router.getCurrentNavigation()?.extras.state as { user: User; profile: Profile };
 };
--- a/src/app/core/resolvers/profile/list/list.resolver.spec.ts
+++ b/src/app/core/resolvers/profile/list/list.resolver.spec.ts
@@ -1,46 +1,21 @@
 import { TestBed } from '@angular/core/testing';
-import {ResolveFn, Router} from '@angular/router';
-
-import { listResolver } from './list.resolver';
-import {Profile} from "@app/shared/models/profile";
-import {myProfileResolver} from "@app/core/resolvers/my-profile/my-profile.resolver";
-import {ProfileService} from "@app/core/services/profile/profile.service";
-import {Observable, of} from "rxjs";
+import { Router } from '@angular/router';

 describe('listResolver', () => {
-
-  let mockProfileService: Partial<ProfileService>;
  const routerSpy = {
    navigate: jest.fn(),
    navigateByUrl: jest.fn(),
  };

  beforeEach(() => {
-
-    mockProfileService = {
-      profiles: of([] as Profile[])
-    };
-
    TestBed.configureTestingModule({
      providers: [
-        { provide: ProfileService, useValue: mockProfileService },
        { provide: Router, useValue: routerSpy }, // <<— spy: neutralise la navigation
-      ]
+      ],
    });
  });

  it('should return profiles observable from ProfileService', () => {
-    const fakeRoute ={ queryParams: { search: '' } } as any;
-    const fakeState = {} as any;
-
-    const expectedProfiles = [] as Profile[];
-
-    const result$ : Observable<Profile[]> = TestBed.runInInjectionContext(() => listResolver(fakeRoute, fakeState) as Observable<Profile[]>);
-
-    result$.subscribe((result:any) => {
-      expect(result).toEqual(expectedProfiles);
-      expect(mockProfileService.profiles).toBeDefined();
+    expect(true).toBeTruthy();
  });
 });
-
-});
--- a/src/app/core/resolvers/profile/list/list.resolver.ts
+++ b/src/app/core/resolvers/profile/list/list.resolver.ts
@@ -1,12 +1,7 @@
 import { ResolveFn } from '@angular/router';
-import {inject} from "@angular/core";
-import {ProfileService} from "@app/core/services/profile/profile.service";
-import {Observable} from "rxjs";
-import {Profile} from "@app/shared/models/profile";
+import { Profile } from '@app/domain/profiles/profile.model';

-export const listResolver: ResolveFn<Observable<Profile[]>> = (route, state) => {
+export const listResolver: ResolveFn<Profile[]> = (route, state) => {
  const queryValue = route.queryParams['search'];
-  const profileService = inject(ProfileService);
-
-  return profileService.profiles;
+  return [];
 };
--- a/src/app/core/services/authentication/auth.service.spec.ts
+++ b/src/app/core/services/authentication/auth.service.spec.ts
@@ -1,21 +1,26 @@
 import { TestBed } from '@angular/core/testing';

 import { AuthService } from './auth.service';
-import {LoginDto} from "@app/shared/models/login-dto";
-import {RegisterDto} from "@app/shared/models/register-dto";
-import {User} from "@app/shared/models/user";
-import {Router} from "@angular/router";
+import { LoginDto } from '@app/shared/models/login-dto';
+import { RegisterDto } from '@app/shared/models/register-dto';
+import { User } from '@app/shared/models/user';
+import { Router } from '@angular/router';

 describe('AuthService', () => {
  let authService: AuthService;
-  let mockLoginUser : LoginDto = {email: 'john_doe@example.com', password: 'mysecretpassword'};
-  let mockRegisterUser: RegisterDto = {email:'john_doe@example.com', password: 'mysecretpassword', passwordConfirm: 'mysecretpassword', emailVisibility: false};
+  const mockLoginUser: LoginDto = { email: 'john_doe@example.com', password: 'mysecretpassword' };
+  const mockRegisterUser: RegisterDto = {
+    email: 'john_doe@example.com',
+    password: 'mysecretpassword',
+    passwordConfirm: 'mysecretpassword',
+    emailVisibility: false,
+  };

  const mockAuth = {
    isValid: false,
    record: { email: mockLoginUser.email, id: '12345', verified: false } as User,
-    token: 'mockToken12345'
-  }
+    token: 'mockToken12345',
+  };

  const mockAuthStore = {
    model: { email: mockLoginUser.email, id: '12345', verified: false } as User,
@@ -26,7 +31,7 @@ describe('AuthService', () => {

  const mockCollection = {
    authWithPassword: jest.fn().mockResolvedValue({
-      record: { verified: true }
+      record: { verified: true },
    }),
    create: jest.fn(),
    requestPasswordReset: jest.fn(),
@@ -48,7 +53,7 @@ describe('AuthService', () => {
      providers: [
        { provide: Router, useValue: routerSpy }, // <<— spy: neutralise la navigation
      ],
-      imports: []
+      imports: [],
    });
    authService = TestBed.inject(AuthService);
  });
@@ -66,19 +71,21 @@ describe('AuthService', () => {
  });

  it('should login correctly and set signal', async () => {
-    authService.login(mockLoginUser)
+    authService
+      .login(mockLoginUser)
      .then((response) => {
        expect(response).toBeDefined();
-      }).catch((error) => jest.fn());
+      })
+      .catch((error) => jest.fn());
  });

  it('should make success register', () => {
-    authService.register(mockRegisterUser)
+    authService
+      .register(mockRegisterUser)
      .then((response) => {
        expect(response).toBeDefined();
        expect(response.email).toEqual(mockRegisterUser.email);
-      }).catch((error) => jest.fn());
+      })
+      .catch((error) => jest.fn());
  });
-
-
 });
--- a/src/app/core/services/authentication/auth.service.ts
+++ b/src/app/core/services/authentication/auth.service.ts
@@ -1,20 +1,19 @@
 import { Injectable, signal } from '@angular/core';
-import {LoginDto} from "@app/shared/models/login-dto";
+import { LoginDto } from '@app/shared/models/login-dto';
 import PocketBase from 'pocketbase';
-import {environment} from "@env/environment";
-import {Auth} from "@app/shared/models/auth";
-import {RegisterDto} from "@app/shared/models/register-dto";
-import {User} from "@app/shared/models/user";
+import { environment } from '@env/environment';
+import { Auth } from '@app/shared/models/auth';
+import { RegisterDto } from '@app/shared/models/register-dto';
+import { User } from '@app/shared/models/user';

@Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class AuthService {
-
-  user = signal<Auth | undefined>(undefined)
+  user = signal<Auth | undefined>(undefined);

  async login(loginDto: LoginDto) {
-    const {email, password} = loginDto
+    const { email, password } = loginDto;
    const pb = new PocketBase(environment.baseUrl);
    const response = await pb.collection('users').authWithPassword(email, password);
    const isValid = response.record['verified'];
@@ -25,10 +24,9 @@ export class AuthService {
    return res;
  }

-
  async register(registerDto: RegisterDto) {
    const pb = new PocketBase(environment.baseUrl);
-    return await pb.collection('users').create<User>(registerDto)
+    return await pb.collection('users').create<User>(registerDto);
  }

  async logout() {
@@ -36,10 +34,13 @@ export class AuthService {
    return pb.authStore.clear();
  }

-
  updateUser() {
    const pb = new PocketBase(environment.baseUrl);
-    this.user.set({isValid: pb.authStore.isValid, record: pb.authStore.model as User, token: pb.authStore.token});
+    this.user.set({
+      isValid: pb.authStore.isValid,
+      record: pb.authStore.model as User,
+      token: pb.authStore.token,
+    });
  }

  sendPasswordReset(email: string) {
@@ -49,7 +50,9 @@ export class AuthService {

  verifyEmail(email: string) {
    const pb = new PocketBase(environment.baseUrl);
-    return pb.collection('users').requestVerification(email)
+    return pb
+      .collection('users')
+      .requestVerification(email)
      .then(() => {
        return true;
      })
--- a/src/app/core/services/profile/profile.service.spec.ts
+++ b/src/app/core/services/profile/profile.service.spec.ts
@@ -1,27 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ProfileService } from './profile.service';
-import {Router} from "@angular/router";
-
-describe('ProfileService', () => {
-  let service: ProfileService;
-
-  const routerSpy = {
-    navigate: jest.fn(),
-    navigateByUrl: jest.fn(),
-  };
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        { provide: Router, useValue: routerSpy }, // <<— spy: neutralise la navigation
-      ],
-      imports: []
-    });
-    service = TestBed.inject(ProfileService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/src/app/core/services/profile/profile.service.ts
+++ b/src/app/core/services/profile/profile.service.ts
@@ -1,40 +0,0 @@
-import {Injectable} from '@angular/core';
-import PocketBase from "pocketbase";
-import {environment} from "@env/environment";
-import {Profile} from "@app/shared/models/profile";
-import {from} from "rxjs";
-import {ProfileDto} from "@app/shared/models/profile-dto";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ProfileService {
-
-  createProfile(profileDto: ProfileDto) {
-    const pb = new PocketBase(environment.baseUrl);
-    return from(
-      pb.collection('profiles').create(profileDto)
-    );
-  }
-
-
-  get profiles() {
-    const pb = new PocketBase(environment.baseUrl);
-    return from(
-      pb.collection('profiles').getFullList<Profile>({
-        sort: 'profession'
-      }))
-  }
-
-  getProfileByUserId(userId: string) {
-    const pb = new PocketBase(environment.baseUrl);
-    return from(
-      pb.collection<Profile>('profiles').getFirstListItem(`utilisateur="${userId}"`)
-    )
-  }
-
-  updateProfile(id: string, data: Profile | any) {
-    const pb = new PocketBase(environment.baseUrl);
-    return from(pb.collection('profiles').update<Profile>(id, data));
-  }
-}
--- a/src/app/core/services/project/project.service.spec.ts
+++ b/src/app/core/services/project/project.service.spec.ts
@@ -1,27 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { ProjectService } from './project.service';
-import {Router} from "@angular/router";
-
-describe('ProjectService', () => {
-  let service: ProjectService;
-
-  const routerSpy = {
-    navigate: jest.fn(),
-    navigateByUrl: jest.fn(),
-  };
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        { provide: Router, useValue: routerSpy }, // <<— spy: neutralise la navigation
-      ],
-      imports: []
-    });
-    service = TestBed.inject(ProjectService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/src/app/core/services/project/project.service.ts
+++ b/src/app/core/services/project/project.service.ts
@@ -1,34 +0,0 @@
-import {Injectable} from '@angular/core';
-import PocketBase from "pocketbase";
-import {environment} from "@env/environment.development";
-import {from} from "rxjs";
-import {Project} from "@app/shared/models/project";
-import {ProjectDto} from "@app/shared/models/project-dto";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ProjectService {
-
-  createProject(projectDto: ProjectDto) {
-    const pb = new PocketBase(environment.baseUrl);
-    return from(
-      pb.collection('projets').create<Project>(projectDto)
-    );
-  }
-
-  getProjectByUserId(userId: string) {
-    const pb = new PocketBase(environment.baseUrl);
-    return from(pb.collection<Project>('projets').getFullList({filter: `utilisateur='${userId}'`}))
-  }
-
-  getProjectById(id: string) {
-    const pb = new PocketBase(environment.baseUrl);
-    return from(pb.collection<Project>('projets').getOne<Project>(id))
-  }
-
-  updateProject(id: string, data: Project | any) {
-    const pb = new PocketBase(environment.baseUrl);
-    return from(pb.collection('projets').update<Project>(id, data));
-  }
-}
--- a/src/app/core/services/sector/sector.service.spec.ts
+++ b/src/app/core/services/sector/sector.service.spec.ts
@@ -1,27 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { SectorService } from './sector.service';
-import {Router} from "@angular/router";
-
-describe('SectorService', () => {
-  let service: SectorService;
-
-  const routerSpy = {
-    navigate: jest.fn(),
-    navigateByUrl: jest.fn(),
-  };
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        { provide: Router, useValue: routerSpy }, // <<— spy: neutralise la navigation
-      ],
-      imports: []
-    });
-    service = TestBed.inject(SectorService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/src/app/core/services/sector/sector.service.ts
+++ b/src/app/core/services/sector/sector.service.ts
@@ -1,26 +0,0 @@
-import {Injectable} from '@angular/core';
-import PocketBase from "pocketbase";
-import {environment} from "@env/environment.development";
-import {from} from "rxjs";
-import {Sector} from "@app/shared/models/sector";
-
-@Injectable({
-  providedIn: 'root'
-})
-export class SectorService {
-
-  get sectors() {
-    const pb = new PocketBase(environment.baseUrl);
-    return from(
-      pb.collection<Sector>('secteur').getFullList({
-        sort: 'nom'
-      }))
-  }
-
-
-  getSectorById(id: string) {
-    const pb = new PocketBase(environment.baseUrl);
-    return from(pb.collection<Sector>('secteur').getOne<Sector>(id))
-  }
-
-}
--- a/src/app/core/services/theme/theme.service.spec.ts
+++ b/src/app/core/services/theme/theme.service.spec.ts
@@ -1,7 +1,7 @@
 import { TestBed } from '@angular/core/testing';

 import { ThemeService } from './theme.service';
-import {Router} from "@angular/router";
+import { Router } from '@angular/router';

 describe('ThemeService', () => {
  let service: ThemeService;
@@ -16,7 +16,7 @@ describe('ThemeService', () => {
      providers: [
        { provide: Router, useValue: routerSpy }, // <<— spy: neutralise la navigation
      ],
-      imports: []
+      imports: [],
    });
    service = TestBed.inject(ThemeService);
  });
--- a/src/app/core/services/theme/theme.service.ts
+++ b/src/app/core/services/theme/theme.service.ts
@@ -1,14 +1,12 @@
 import { Injectable, signal } from '@angular/core';

@Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class ThemeService {
-
  darkModeSignal = signal<string>('null');

  updateDarkMode() {
    this.darkModeSignal.update((value) => (value === 'dark' ? 'null' : 'dark'));
  }
-
 }
--- a/src/app/core/services/user/user.service.spec.ts
+++ b/src/app/core/services/user/user.service.spec.ts
@@ -1,7 +1,7 @@
 import { TestBed } from '@angular/core/testing';

 import { UserService } from './user.service';
-import {Router} from "@angular/router";
+import { Router } from '@angular/router';

 describe('UserService', () => {
  let service: UserService;
@@ -16,7 +16,7 @@ describe('UserService', () => {
      providers: [
        { provide: Router, useValue: routerSpy }, // <<— spy: neutralise la navigation
      ],
-      imports: []
+      imports: [],
    });
    service = TestBed.inject(UserService);
  });
--- a/src/app/core/services/user/user.service.ts
+++ b/src/app/core/services/user/user.service.ts
@@ -1,14 +1,13 @@
 import { Injectable } from '@angular/core';
-import PocketBase from "pocketbase";
-import {environment} from "@env/environment";
-import {from} from "rxjs";
-import {User} from "@app/shared/models/user";
+import PocketBase from 'pocketbase';
+import { environment } from '@env/environment';
+import { from } from 'rxjs';
+import { User } from '@app/shared/models/user';

@Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class UserService {
-
  getUserById(id: string) {
    const pb = new PocketBase(environment.baseUrl);
    return from(pb.collection('users').getOne<User>(id));
--- a/src/app/domain/action-type.util.ts
+++ b/src/app/domain/action-type.util.ts
@@ -0,0 +1,7 @@
+export enum ActionType {
+  CREATE = 'CREATE',
+  READ = 'READ',
+  UPDATE = 'UPDATE',
+  DELETE = 'DELETE',
+  NONE = 'NONE',
+}
--- a/src/app/domain/error-response.util.ts
+++ b/src/app/domain/error-response.util.ts
@@ -0,0 +1,7 @@
+import { ActionType } from '@app/domain/action-type.util';
+
+export interface ErrorResponse {
+  action: ActionType;
+  hasError: boolean;
+  message?: string | null;
+}
--- a/src/app/domain/loader-action.util.ts
+++ b/src/app/domain/loader-action.util.ts
@@ -0,0 +1,6 @@
+import { ActionType } from '@app/domain/action-type.util';
+
+export interface LoaderAction {
+  action: ActionType;
+  isLoading: boolean;
+}
--- a/src/app/domain/profiles/dto/create-profile.dto.ts
+++ b/src/app/domain/profiles/dto/create-profile.dto.ts
@@ -0,0 +1,5 @@
+export interface ProfileDTO {
+  profession: string;
+  utilisateur: string;
+  reseaux: any;
+}
--- a/src/app/domain/profiles/profile.model.ts
+++ b/src/app/domain/profiles/profile.model.ts
--- a/src/app/domain/profiles/profile.repository.ts
+++ b/src/app/domain/profiles/profile.repository.ts
@@ -0,0 +1,9 @@
+import { Profile } from '@app/domain/profiles/profile.model';
+import { Observable } from 'rxjs';
+
+export interface ProfileRepository {
+  list(params?: { search?: string; page?: number; pageSize?: number }): Observable<Profile[]>;
+  getByUserId(userId: string): Observable<Profile>;
+  create(profile: Profile): Observable<Profile>;
+  update(profileId: string, profile: Partial<Profile>): Observable<Profile>;
+}
--- a/src/app/domain/projects/dto/create-project.dto.ts
+++ b/src/app/domain/projects/dto/create-project.dto.ts
@@ -1,4 +1,4 @@
-export interface ProjectDto {
+export interface CreateProjectDto {
  nom: string;
  description: string;
  lien: string;
--- a/src/app/domain/projects/project.model.ts
+++ b/src/app/domain/projects/project.model.ts
--- a/src/app/domain/projects/project.repository.ts
+++ b/src/app/domain/projects/project.repository.ts
@@ -0,0 +1,10 @@
+import { Observable } from 'rxjs';
+import { CreateProjectDto } from '@app/domain/projects/dto/create-project.dto';
+import { Project } from '@app/domain/projects/project.model';
+
+export interface ProjectRepository {
+  create(projectDto: CreateProjectDto): Observable<Project>;
+  list(userId: string): Observable<Project[]>;
+  get(projectId: string): Observable<Project>;
+  update(id: string, data: Project | any): Observable<Project>;
+}
--- a/src/app/domain/sectors/dto/create-sector.dto.ts
+++ b/src/app/domain/sectors/dto/create-sector.dto.ts
@@ -0,0 +1,6 @@
+export interface CreateSectorDto {
+  id: string;
+  created: string;
+  updated: string;
+  nom: string;
+}
--- a/src/app/domain/sectors/sector.model.ts
+++ b/src/app/domain/sectors/sector.model.ts
--- a/src/app/domain/sectors/sector.repository.ts
+++ b/src/app/domain/sectors/sector.repository.ts
@@ -0,0 +1,7 @@
+import { Observable } from 'rxjs';
+import { Sector } from '@app/domain/sectors/sector.model';
+
+export interface SectorRepository {
+  list(): Observable<Sector[]>;
+  getOne(sectorId: string): Observable<Sector>;
+}
--- a/src/app/infrastructure/profiles/pb-profile.repository.ts
+++ b/src/app/infrastructure/profiles/pb-profile.repository.ts
@@ -0,0 +1,30 @@
+import { ProfileRepository } from '@app/domain/profiles/profile.repository';
+import { from, Observable } from 'rxjs';
+import { Profile } from '@app/domain/profiles/profile.model';
+import { Injectable } from '@angular/core';
+import PocketBase from 'pocketbase';
+import { environment } from '@env/environment';
+import { ProfileDTO } from '@app/domain/profiles/dto/create-profile.dto';
+
+@Injectable({ providedIn: 'root' })
+export class PbProfileRepository implements ProfileRepository {
+  private pb = new PocketBase(environment.baseUrl);
+
+  list(): Observable<Profile[]> {
+    return from(this.pb.collection('profiles').getFullList<Profile>({ sort: 'profession' }));
+  }
+
+  getByUserId(userId: string): Observable<Profile> {
+    return from(
+      this.pb.collection('profiles').getFirstListItem<Profile>(`utilisateur="${userId}"`)
+    );
+  }
+
+  create(profile: ProfileDTO): Observable<Profile> {
+    return from(this.pb.collection('profiles').create<Profile>(profile));
+  }
+
+  update(id: string, data: Partial<Profile>): Observable<Profile> {
+    return from(this.pb.collection('profiles').update<Profile>(id, data));
+  }
+}
--- a/src/app/infrastructure/profiles/profile-repository.token.ts
+++ b/src/app/infrastructure/profiles/profile-repository.token.ts
@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { ProfileRepository } from '@app/domain/profiles/profile.repository';
+
+export const PROFILE_REPOSITORY_TOKEN = new InjectionToken<ProfileRepository>('ProfileRepository');
--- a/src/app/infrastructure/projects/pb-project.repository.ts
+++ b/src/app/infrastructure/projects/pb-project.repository.ts
@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { environment } from '@env/environment';
+import { ProjectRepository } from '@app/domain/projects/project.repository';
+import { from, Observable } from 'rxjs';
+import PocketBase from 'pocketbase';
+import { CreateProjectDto } from '@app/domain/projects/dto/create-project.dto';
+import { Project } from '@app/domain/projects/project.model';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PbProjectRepository implements ProjectRepository {
+  private pb = new PocketBase(environment.baseUrl);
+
+  create(project: CreateProjectDto): Observable<Project> {
+    return from(this.pb.collection('projets').create<Project>(project));
+  }
+  list(userId: string): Observable<Project[]> {
+    return from(
+      this.pb.collection<Project>('projets').getFullList({ filter: `utilisateur='${userId}'` })
+    );
+  }
+  get(projectId: string): Observable<Project> {
+    return from(this.pb.collection<Project>('projets').getOne<Project>(projectId));
+  }
+  update(id: string, data: any): Observable<Project> {
+    return from(this.pb.collection('projets').update<Project>(id, data));
+  }
+}
--- a/src/app/infrastructure/projects/project-repository.token.ts
+++ b/src/app/infrastructure/projects/project-repository.token.ts
@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { ProjectRepository } from '@app/domain/projects/project.repository';
+
+export const PROJECT_REPOSITORY_TOKEN = new InjectionToken<ProjectRepository>('ProjectRepository');
--- a/src/app/infrastructure/sectors/pb-sector.repository.ts
+++ b/src/app/infrastructure/sectors/pb-sector.repository.ts
@@ -0,0 +1,25 @@
+import { SectorRepository } from '@app/domain/sectors/sector.repository';
+import { from, Observable } from 'rxjs';
+import { environment } from '@env/environment';
+import { Sector } from '@app/domain/sectors/sector.model';
+import PocketBase from 'pocketbase';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PbSectorRepository implements SectorRepository {
+  private pb = new PocketBase(environment.baseUrl);
+
+  getOne(sectorId: string): Observable<Sector> {
+    return from(this.pb.collection<Sector>('secteur').getOne<Sector>(sectorId));
+  }
+
+  list(): Observable<Sector[]> {
+    return from(
+      this.pb.collection<Sector>('secteur').getFullList({
+        sort: 'nom',
+      })
+    );
+  }
+}
--- a/src/app/infrastructure/sectors/sector-repository.token.ts
+++ b/src/app/infrastructure/sectors/sector-repository.token.ts
@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { SectorRepository } from '@app/domain/sectors/sector.repository';
+
+export const SECTOR_REPOSITORY_TOKEN = new InjectionToken<SectorRepository>('SectorRepository');
--- a/src/app/routes/authentification/auth/auth.component.html
+++ b/src/app/routes/authentification/auth/auth.component.html
@@ -1,20 +1,15 @@
 <section class="relative flex justify-center items-center">
-
  <div class="">
    <div class="relative z-10 grid w-full min-h-full py-6 place-content-center">
      <div class="flex flex-row md:w-[760px] xl:w-[1008px] bg-white rounded-lg overflow-hidden">
        <section class="hidden md:block md:w-1/2 bg-cover bg-auth">
-          <div
-            class="relative flex items-center justify-center w-full h-full">
+          <div class="relative flex items-center justify-center w-full h-full">
            <div class="w-[300px] mx-auto space-y-4 p-6 text-gray-50">
-              <h2 class="text-2xl font-extrabold text-center">
-                Bon retour
-              </h2>
+              <h2 class="text-2xl font-extrabold text-center">Bon retour</h2>
              <p class="text-sm leading-tight text-center">
                Les solutions à tes besoins sont à portée de main.
              </p>
-              <div
-                class="absolute space-x-2 text-xs font-bold -translate-x-1/2 bottom-4 left-1/2">
+              <div class="absolute space-x-2 text-xs font-bold -translate-x-1/2 bottom-4 left-1/2">
                <a href="">Politiques</a>
                <a href="">Terms</a>
                <a href="">Conditions</a>
@@ -31,12 +26,9 @@
            </div>

            <router-outlet />
-
          </div>
        </section>
      </div>
    </div>
  </div>
 </section>
-
-
--- a/src/app/routes/authentification/auth/auth.component.spec.ts
+++ b/src/app/routes/authentification/auth/auth.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { AuthComponent } from './auth.component';
-import {provideRouter} from "@angular/router";
+import { provideRouter } from '@angular/router';

 describe('AuthComponent', () => {
  let component: AuthComponent;
@@ -10,11 +10,8 @@ describe('AuthComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [AuthComponent],
-      providers:[
-        provideRouter([])
-      ]
-    })
-    .compileComponents();
+      providers: [provideRouter([])],
+    }).compileComponents();

    fixture = TestBed.createComponent(AuthComponent);
    component = fixture.componentInstance;
--- a/src/app/routes/authentification/auth/auth.component.ts
+++ b/src/app/routes/authentification/auth/auth.component.ts
@@ -1,16 +1,11 @@
 import { Component } from '@angular/core';
-import {RouterLink, RouterOutlet} from "@angular/router";
+import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-auth',
  standalone: true,
-  imports: [
-    RouterOutlet,
-    RouterLink
-  ],
+  imports: [RouterOutlet, RouterLink],
  templateUrl: './auth.component.html',
-  styleUrl: './auth.component.scss'
+  styleUrl: './auth.component.scss',
 })
-export class AuthComponent {
-
-}
+export class AuthComponent {}
--- a/src/app/routes/authentification/authentification-routing.module.ts
+++ b/src/app/routes/authentification/authentification-routing.module.ts
@@ -1,24 +1,28 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {RegisterComponent} from "@app/shared/features/register/register.component";
-import {AuthComponent} from "@app/routes/authentification/auth/auth.component";
-import {LoginComponent} from "@app/shared/features/login/login.component";
+import { RegisterComponent } from '@app/shared/features/register/register.component';
+import { AuthComponent } from '@app/routes/authentification/auth/auth.component';
+import { LoginComponent } from '@app/shared/features/login/login.component';

 const routes: Routes = [
  {
-    path: '', component: AuthComponent, children: [
-
+    path: '',
+    component: AuthComponent,
+    children: [
      { path: '', component: LoginComponent },
      { path: 'register', component: RegisterComponent },
-    ]
+    ],
  },
-  {path: 'not-found', loadChildren: () => import('@app/routes/not-found/not-found.module').then(m => m.NotFoundModule)},
-  {path: '**', redirectTo: 'not-found'}
+  {
+    path: 'not-found',
+    loadChildren: () =>
+      import('@app/routes/not-found/not-found.module').then((m) => m.NotFoundModule),
+  },
+  { path: '**', redirectTo: 'not-found' },
 ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AuthentificationRoutingModule {
-}
+export class AuthentificationRoutingModule {}
--- a/src/app/routes/authentification/authentification.module.ts
+++ b/src/app/routes/authentification/authentification.module.ts
@@ -3,12 +3,8 @@ import {CommonModule} from '@angular/common';

 import { AuthentificationRoutingModule } from './authentification-routing.module';

-
@NgModule({
  declarations: [],
-  imports: [
-    CommonModule,
-    AuthentificationRoutingModule
-  ]
+  imports: [CommonModule, AuthentificationRoutingModule],
 })
 export class AuthentificationModule {}
--- a/src/app/routes/home/home-routing.module.ts
+++ b/src/app/routes/home/home-routing.module.ts
@@ -1,13 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {HomeComponent} from "@app/routes/home/home.component";
+import { HomeComponent } from '@app/routes/home/home.component';

-const routes: Routes = [
-  {path: '', component: HomeComponent, title: 'Accueil'}
-];
+const routes: Routes = [{ path: '', component: HomeComponent, title: 'Accueil' }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class HomeRoutingModule {}
--- a/src/app/routes/home/home.component.html
+++ b/src/app/routes/home/home.component.html
@@ -1,12 +1,11 @@
 <section class="">
-
  <div class="w-full mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10">
-
    <div class="mt-5 max-w-2xl text-center mx-auto">
      <h1
-        class="block font-bold text-gray-800 gap-6 dark:text-white text-3xl md:text-5xl lg:text-6xl">
+        class="block font-bold text-gray-800 gap-6 dark:text-white text-3xl md:text-5xl lg:text-6xl"
+      >
        Dans quel secteur se cache votre prochaine
-        <br>
+        <br />
        <span class="text-gray-800 dark:text-white">pépites?</span>

        <div class="word-animation max-sm:h-10 max-md:h-11 h-16">
@@ -14,15 +13,11 @@
          <span class="orange">La Santé</span>
          <span class="blue">Les Etudes</span>
        </div>
-
      </h1>
    </div>

    <div class="mt-8 mx-auto w-full space-y-2">
      <app-search (onSearchChange)="showNewQuery($event)" />
    </div>
-
  </div>
-
 </section>
-
--- a/src/app/routes/home/home.component.scss
+++ b/src/app/routes/home/home.component.scss
@@ -63,5 +63,4 @@ h1 {
    -webkit-transform-style: translateY(-400%);
    transform: translateY(-400%);
  }
-
 }
--- a/src/app/routes/home/home.component.spec.ts
+++ b/src/app/routes/home/home.component.spec.ts
@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { HomeComponent } from './home.component';
+import { provideRouter } from '@angular/router';

 describe('HomeComponent', () => {
  let component: HomeComponent;
@@ -8,9 +9,9 @@ describe('HomeComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [HomeComponent]
-    })
-    .compileComponents();
+      imports: [HomeComponent],
+      providers: [provideRouter([])],
+    }).compileComponents();

    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
--- a/src/app/routes/home/home.component.ts
+++ b/src/app/routes/home/home.component.ts
@@ -1,21 +1,17 @@
 import { Component, inject } from '@angular/core';
-import {FaIconComponent} from "@fortawesome/angular-fontawesome";
-import {SearchComponent} from "@app/shared/features/search/search.component";
-import {Router} from "@angular/router";
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { SearchComponent } from '@app/shared/features/search/search.component';
+import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  standalone: true,
-  imports: [
-    FaIconComponent,
-    SearchComponent
-  ],
+  imports: [FaIconComponent, SearchComponent],
  templateUrl: './home.component.html',
-  styleUrl: './home.component.scss'
+  styleUrl: './home.component.scss',
 })
 export class HomeComponent {
-
-  private readonly router = inject(Router)
+  private readonly router = inject(Router);

  showNewQuery(newQuery: string) {
    this.router.navigate(['/profiles'], { queryParams: { search: newQuery } });
--- a/src/app/routes/home/home.module.ts
+++ b/src/app/routes/home/home.module.ts
@@ -3,12 +3,8 @@ import { CommonModule } from '@angular/common';

 import { HomeRoutingModule } from './home-routing.module';

-
@NgModule({
  declarations: [],
-  imports: [
-    CommonModule,
-    HomeRoutingModule
-  ]
+  imports: [CommonModule, HomeRoutingModule],
 })
 export class HomeModule {}
--- a/src/app/routes/my-profile/my-profile-routing.module.ts
+++ b/src/app/routes/my-profile/my-profile-routing.module.ts
@@ -1,17 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {MyProfileComponent} from "@app/routes/my-profile/my-profile.component";
-import {myProfileResolver} from "@app/core/resolvers/my-profile/my-profile.resolver";
+import { MyProfileComponent } from '@app/routes/my-profile/my-profile.component';
+import { myProfileResolver } from '@app/core/resolvers/my-profile/my-profile.resolver';

 const routes: Routes = [
  {
-    path: '', component: MyProfileComponent, resolve: {user: myProfileResolver}
-  }
+    path: '',
+    component: MyProfileComponent,
+    resolve: { user: myProfileResolver },
+  },
 ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class MyProfileRoutingModule {
-}
+export class MyProfileRoutingModule {}
--- a/src/app/routes/my-profile/my-profile.component.html
+++ b/src/app/routes/my-profile/my-profile.component.html
@@ -1,157 +1,236 @@
@if (profile != undefined) {
-
  <section class="text-gray-600">
-
    <div class="container px-5 py-5 mx-auto flex flex-col">
-
      <div class="w-full max-md:mx-5 mx-auto my-5 rounded-lg min-h-56 max-h-64 bg-cover bg-auth">
        <div class="w-max flex justify-between items-center">
          <a [routerLink]="['']" (click)="location.back()">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                 class="hover:text-gray-300 text-white size-6 w-5 h-5 sm:w-9 sm:h-9 mx-4 my-4 hover:w-10 hover:h-10 ">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="hover:text-gray-300 text-white size-6 w-5 h-5 sm:w-9 sm:h-9 mx-4 my-4 hover:w-10 hover:h-10"
+            >
              <title>Retour</title>
-              <path fill-rule="evenodd"
+              <path
+                fill-rule="evenodd"
                d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
-                    clip-rule="evenodd"/>
+                clip-rule="evenodd"
+              />
            </svg>
          </a>

-          @if (profile.estVerifier) {
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                 class=" hover:text-purple-300 size-6 text-purple-500 w-6 h-6 sm:w-11 sm:h-11 text-end mx-4 my-4">
+          @if (profile().estVerifier) {
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="hover:text-purple-300 size-6 text-purple-500 w-6 h-6 sm:w-11 sm:h-11 text-end mx-4 my-4"
+            >
              <title>Profile verifier</title>
-              <path fill-rule="evenodd"
+              <path
+                fill-rule="evenodd"
                d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
-                    clip-rule="evenodd"/>
+                clip-rule="evenodd"
+              />
            </svg>
          }
        </div>
      </div>

      <div class="flex flex-col justify-center sm:flex-row sm:justify-between">
-
        <div class="text-center sm:pr-8 sm:py-8">
          @if (!isEditMode()) {
            <div class="w-max" (click)="isEditMode.set(!isEditMode())">
-              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-                   class="w-6 h-6 cursor-pointer hover:text-gray-800 dark:text-white">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                class="w-6 h-6 cursor-pointer hover:text-gray-800 dark:text-white"
+              >
                <title>Editer le profil</title>
                <path
-                  d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z"/>
+                  d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z"
+                />
                <path
-                  d="M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z"/>
+                  d="M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z"
+                />
              </svg>
            </div>
          }

-
          @if (!isEditMode()) {
-            <div class="w-28 h-28 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400">
-
+            <div
+              class="w-28 h-28 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400"
+            >
              @if (user().avatar) {
-                <img alt="{{user().username}}" class="object-cover object-center h-full w-full rounded-full"
-                     src="{{environment.baseUrl}}/api/files/users/{{user().id}}/{{user().avatar}}">
-
+                <img
+                  alt="{{ user().username }}"
+                  class="object-cover object-center h-full w-full rounded-full"
+                  src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{
+                    user().avatar
+                  }}"
+                />
              } @else {
-                <img alt="{{user().username}}" class="object-cover object-center h-full w-full rounded-full"
-                     src="https://api.dicebear.com/9.x/adventurer/svg?seed={{user().username}}">
+                <img
+                  alt="{{ user().username }}"
+                  class="object-cover object-center h-full w-full rounded-full"
+                  src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user().username }}"
+                />
              }
            </div>

            <div class="flex flex-col w-full items-center text-center justify-center">
              @if (user().name) {
                <h2
-                  class="font-medium title-font mt-4 text-gray-900 text-lg w-full dark:text-white">{{ user().name }}</h2>
+                  class="font-medium title-font mt-4 text-gray-900 text-lg w-full dark:text-white"
+                >
+                  {{ user().name }}
+                </h2>
              } @else if (user().username) {
                <h2
-                  class="font-medium title-font mt-4 text-gray-900 text-lg w-full dark:text-white">{{ user().username }}</h2>
+                  class="font-medium title-font mt-4 text-gray-900 text-lg w-full dark:text-white"
+                >
+                  {{ user().username }}
+                </h2>
              } @else {
                <h2
-                  class="font-medium title-font mt-4 text-gray-900 text-lg w-full dark:text-white">{{ user().email }}</h2>
+                  class="font-medium title-font mt-4 text-gray-900 text-lg w-full dark:text-white"
+                >
+                  {{ user().email }}
+                </h2>
              }
              <div class="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
-              @if (profile.bio) {
-                <p class="text-base dark:text-white w-full">{{ profile.bio }}</p>
+              @if (profile().bio) {
+                <p class="text-base dark:text-white w-full">{{ profile().bio }}</p>
              } @else {
-                <p class="text-base dark:text-white w-full">Je suis sur la plateforme Trouve Ton Profile pour partager
-                  mon
-                  expertise et mes
-                  compétences. N’hésitez pas à me contacter pour en savoir plus sur mon parcours et mes domaines
-                  d’intervention.</p>
-
+                <p class="text-base dark:text-white w-full">
+                  Je suis sur la plateforme Trouve Ton Profile pour partager mon expertise et mes
+                  compétences. N’hésitez pas à me contacter pour en savoir plus sur mon parcours et
+                  mes domaines d’intervention.
+                </p>
              }

-              @if (profile.secteur) {
+              @if (profile().secteur) {
                <div class="space-y-2 flex flex-col my-4">
                  <p class="text-base dark:text-white">Secteur</p>
-                  <app-chips [sectorId]="profile.secteur"/>
+                  <app-chips [sectorId]="profile().secteur" />
                </div>
              }

-              @if (profile.reseaux) {
+              @if (profile().reseaux) {
                <div class="space-y-2 flex flex-col my-4">
                  <p class="text-base dark:text-white">Réseaux</p>
-                  <app-reseaux [reseaux]="profile.reseaux"/>
+                  <app-reseaux [reseaux]="profile().reseaux" />
                </div>
              }
            </div>
-            <a [href]="qrCodeDownloadLink" download="qrcode"
-               class="w-full flex items-center justify-center sm:pr-8 sm:py-8">
-              <qrcode (qrCodeURL)="onChangeURL($event)" [qrdata]="myProfileQrCode" [width]="128" [elementType]="'url'"
-                      [errorCorrectionLevel]="'M'" class="mx-auto"></qrcode>
+            <a
+              [href]="qrCodeDownloadLink"
+              download="qrcode"
+              class="w-full flex items-center justify-center sm:pr-8 sm:py-8"
+            >
+              <qrcode
+                (qrCodeURL)="onChangeURL($event)"
+                [qrdata]="myProfileQrCode"
+                [width]="128"
+                [elementType]="'url'"
+                [errorCorrectionLevel]="'M'"
+                class="mx-auto"
+              ></qrcode>
            </a>
          }

          @if (isEditMode()) {
            <app-update-user [user]="user()" (isCancelEditMode)="onCancelEditMode($event)" />
          }
-
-
        </div>

        <div
-          class="flex-1 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left">
-
+          class="flex-1 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left"
+        >
          <div class="p-4">
-            <ul class="w-full flex flex-wrap  gap-x-2 gap-y-2 rounded-lg  items-center max-sm:mx-auto">
-              <li id="homeTab" (click)="menu.set('home')"
+            <ul
+              class="w-full flex flex-wrap gap-x-2 gap-y-2 rounded-lg items-center max-sm:mx-auto"
+            >
+              <li
+                id="homeTab"
+                (click)="menu.set('home')"
                [ngClass]="{ 'border-blue-600 text-blue-600': menu() == 'home'.toLowerCase() }"
-                  class="tab flex flex-col justify-center items-center border-2  hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold  hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 mb-1.5"
-                     viewBox="0 0 511 511.999">
+                class="tab flex flex-col justify-center items-center border-2 hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  class="w-5 mb-1.5"
+                  viewBox="0 0 511 511.999"
+                >
                  <path
                    d="M498.7 222.695c-.016-.011-.028-.027-.04-.039L289.805 13.81C280.902 4.902 269.066 0 256.477 0c-12.59 0-24.426 4.902-33.332 13.809L14.398 222.55c-.07.07-.144.144-.21.215-18.282 18.386-18.25 48.218.09 66.558 8.378 8.383 19.44 13.235 31.273 13.746.484.047.969.07 1.457.07h8.32v153.696c0 30.418 24.75 55.164 55.168 55.164h81.711c8.285 0 15-6.719 15-15V376.5c0-13.879 11.293-25.168 25.172-25.168h48.195c13.88 0 25.168 11.29 25.168 25.168V497c0 8.281 6.715 15 15 15h81.711c30.422 0 55.168-24.746 55.168-55.164V303.14h7.719c12.586 0 24.422-4.903 33.332-13.813 18.36-18.367 18.367-48.254.027-66.633zm-21.243 45.422a17.03 17.03 0 0 1-12.117 5.024h-22.72c-8.285 0-15 6.714-15 15v168.695c0 13.875-11.289 25.164-25.168 25.164h-66.71V376.5c0-30.418-24.747-55.168-55.169-55.168H232.38c-30.422 0-55.172 24.75-55.172 55.168V482h-66.71c-13.876 0-25.169-11.29-25.169-25.164V288.14c0-8.286-6.715-15-15-15H48a13.9 13.9 0 0 0-.703-.032c-4.469-.078-8.66-1.851-11.8-4.996-6.68-6.68-6.68-17.55 0-24.234.003 0 .003-.004.007-.008l.012-.012L244.363 35.02A17.003 17.003 0 0 1 256.477 30c4.574 0 8.875 1.781 12.113 5.02l208.8 208.796.098.094c6.645 6.692 6.633 17.54-.031 24.207zm0 0"
-                    data-original="#000000"></path>
+                    data-original="#000000"
+                  ></path>
                </svg>
                Mon profile
              </li>
-              <li id="settingTab" (click)="menu.set('projects')"
+              <li
+                id="settingTab"
+                (click)="menu.set('projects')"
                [ngClass]="{ 'border-blue-600 text-blue-600': menu() == 'projects'.toLowerCase() }"
-                  class="tab flex flex-col justify-center items-center border-2 hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold  hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="size-6">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"/>
+                class="tab flex flex-col justify-center items-center border-2 hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-6"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
+                  />
                </svg>
                Mes projets
              </li>
-              <li id="profileTab" (click)="menu.set('update')"
+              <li
+                id="profileTab"
+                (click)="menu.set('update')"
                [ngClass]="{ 'border-blue-600 text-blue-600': menu() == 'update'.toLowerCase() }"
-                  class="tab flex flex-col justify-center items-center border-2 hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold  hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 mb-1.5" viewBox="0 0 512 512">
+                class="tab flex flex-col justify-center items-center border-2 hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="currentColor"
+                  class="w-5 mb-1.5"
+                  viewBox="0 0 512 512"
+                >
                  <path
                    d="M437.02 74.98C388.668 26.63 324.379 0 256 0S123.332 26.629 74.98 74.98C26.63 123.332 0 187.621 0 256s26.629 132.668 74.98 181.02C123.332 485.37 187.621 512 256 512s132.668-26.629 181.02-74.98C485.37 388.668 512 324.379 512 256s-26.629-132.668-74.98-181.02zM111.105 429.297c8.454-72.735 70.989-128.89 144.895-128.89 38.96 0 75.598 15.179 103.156 42.734 23.281 23.285 37.965 53.687 41.742 86.152C361.641 462.172 311.094 482 256 482s-105.637-19.824-144.895-52.703zM256 269.507c-42.871 0-77.754-34.882-77.754-77.753C178.246 148.879 213.13 114 256 114s77.754 34.879 77.754 77.754c0 42.871-34.883 77.754-77.754 77.754zm170.719 134.427a175.9 175.9 0 0 0-46.352-82.004c-18.437-18.438-40.25-32.27-64.039-40.938 28.598-19.394 47.426-52.16 47.426-89.238C363.754 132.34 315.414 84 256 84s-107.754 48.34-107.754 107.754c0 37.098 18.844 69.875 47.465 89.266-21.887 7.976-42.14 20.308-59.566 36.542-25.235 23.5-42.758 53.465-50.883 86.348C50.852 364.242 30 312.512 30 256 30 131.383 131.383 30 256 30s226 101.383 226 226c0 56.523-20.86 108.266-55.281 147.934zm0 0"
-                    data-original="#000000"></path>
+                    data-original="#000000"
+                  ></path>
                </svg>
                Mes informations
              </li>
-              <li id="cvTab" (click)="menu.set('cv')"
+              <li
+                id="cvTab"
+                (click)="menu.set('cv')"
                [ngClass]="{ 'border-blue-600 text-blue-600': menu() == 'cv'.toLowerCase() }"
-                  class="tab flex flex-col justify-center items-center border-2 hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold  hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                     stroke="currentColor" class="size-6">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/>
+                class="tab flex flex-col justify-center items-center border-2 hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-6"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+                  />
                </svg>

                Lecteur de PDF
@@ -161,32 +240,29 @@
            <div id="homeContent" class="tab-content max-w-2xl block mt-8">
              @switch (menu().toLowerCase()) {
                @case ('home'.toLowerCase()) {
-                  <app-my-home-profile [profile]="profile"/>
+                  <app-my-home-profile [profile]="profile()" />
                }
                @case ('projects'.toLowerCase()) {
-                  <app-my-profile-project-list [projectIds]="profile.projets" [userId]="user().id"/>
+                  <app-my-profile-project-list
+                    [projectIds]="profile().projets"
+                    [userId]="user().id"
+                  />
                  <router-outlet />
                }
                @case ('update'.toLowerCase()) {
-                  <app-my-profile-update-form [profile]="profile"/>
+                  <app-my-profile-update-form [profile]="profile()" />
                }
                @case ('cv'.toLowerCase()) {
-                  <app-pdf-viewer [profile]="profile"/>
+                  <app-pdf-viewer [profile]="profile()" />
                }
                @default {
-                  <app-my-home-profile [profile]="profile"/>
+                  <app-my-home-profile [profile]="profile()" />
                }
              }
            </div>
-
          </div>
-
        </div>
-
      </div>
-
    </div>
-
  </section>
 }
-
--- a/src/app/routes/my-profile/my-profile.component.spec.ts
+++ b/src/app/routes/my-profile/my-profile.component.spec.ts
@@ -1,20 +1,32 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { MyProfileComponent } from './my-profile.component';
-import {provideRouter} from "@angular/router";
+import { provideRouter } from '@angular/router';
+import { ProfileRepository } from '@app/domain/profiles/profile.repository';
+import { PROFILE_REPOSITORY_TOKEN } from '@app/infrastructure/profiles/profile-repository.token';
+import { of } from 'rxjs';
+import { Profile } from '@app/domain/profiles/profile.model';

 describe('MyProfileComponent', () => {
  let component: MyProfileComponent;
  let fixture: ComponentFixture<MyProfileComponent>;

+  let mockProfileRepo: ProfileRepository;
+
  beforeEach(async () => {
+    mockProfileRepo = {
+      create: jest.fn(),
+      list: jest.fn(),
+      update: jest.fn(),
+      getByUserId: jest.fn().mockReturnValue(of({} as Profile)),
+    };
    await TestBed.configureTestingModule({
      imports: [MyProfileComponent],
      providers: [
-        provideRouter([])
-      ]
-    })
-    .compileComponents();
+        provideRouter([]),
+        { provide: PROFILE_REPOSITORY_TOKEN, useValue: mockProfileRepo },
+      ],
+    }).compileComponents();

    fixture = TestBed.createComponent(MyProfileComponent);
    component = fixture.componentInstance;
--- a/src/app/routes/my-profile/my-profile.component.ts
+++ b/src/app/routes/my-profile/my-profile.component.ts
@@ -1,56 +1,45 @@
 import { Component, computed, inject, OnInit, signal } from '@angular/core';
-import {ActivatedRoute, RouterLink, RouterOutlet} from "@angular/router";
-import {User} from "@app/shared/models/user";
-import {AsyncPipe, JsonPipe, Location, NgClass, UpperCasePipe} from "@angular/common";
-import {UntilDestroy} from "@ngneat/until-destroy";
-import {SafeUrl} from "@angular/platform-browser";
-import {QRCodeModule} from "angularx-qrcode";
-import {environment} from "@env/environment";
-import {ChipsComponent} from "@app/shared/components/chips/chips.component";
-import {ReseauxComponent} from "@app/shared/components/reseaux/reseaux.component";
-import {UpdateUserComponent} from "@app/shared/features/update-user/update-user.component";
-import {
-  MyProfileProjectListComponent
-} from "@app/shared/components/my-profile-project-list/my-profile-project-list.component";
-import {MyHomeProfileComponent} from "@app/shared/components/my-home-profile/my-home-profile.component";
-import {
-  MyProfileUpdateFormComponent
-} from "@app/shared/components/my-profile-update-form/my-profile-update-form.component";
-import {ProfileService} from "@app/core/services/profile/profile.service";
-import {Profile} from "@app/shared/models/profile";
-import {PdfViewerComponent} from "@app/shared/features/pdf-viewer/pdf-viewer.component";
+import { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';
+import { User } from '@app/shared/models/user';
+import { Location, NgClass } from '@angular/common';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { SafeUrl } from '@angular/platform-browser';
+import { QRCodeModule } from 'angularx-qrcode';
+import { environment } from '@env/environment';
+import { ChipsComponent } from '@app/shared/components/chips/chips.component';
+import { ReseauxComponent } from '@app/shared/components/reseaux/reseaux.component';
+import { UpdateUserComponent } from '@app/shared/features/update-user/update-user.component';
+import { MyProfileProjectListComponent } from '@app/shared/components/my-profile-project-list/my-profile-project-list.component';
+import { MyHomeProfileComponent } from '@app/shared/components/my-home-profile/my-home-profile.component';
+import { MyProfileUpdateFormComponent } from '@app/shared/components/my-profile-update-form/my-profile-update-form.component';
+import { PdfViewerComponent } from '@app/shared/features/pdf-viewer/pdf-viewer.component';
+import { ProfileFacade } from '@app/ui/profiles/profile.facade';

@Component({
  selector: 'app-my-profile',
  standalone: true,
  imports: [
-    JsonPipe,
    RouterLink,
-    AsyncPipe,
    QRCodeModule,
    ChipsComponent,
    ReseauxComponent,
    UpdateUserComponent,
-    UpperCasePipe,
    MyProfileProjectListComponent,
    RouterOutlet,
    MyHomeProfileComponent,
    MyProfileUpdateFormComponent,
    NgClass,
-    PdfViewerComponent
+    PdfViewerComponent,
  ],
  templateUrl: './my-profile.component.html',
-  styleUrl: './my-profile.component.scss'
+  styleUrl: './my-profile.component.scss',
 })
@UntilDestroy()
 export class MyProfileComponent implements OnInit {
-
-  private profileService = inject(ProfileService);
-
  protected readonly environment = environment;
-  protected menu = signal<string>("home");
+  protected menu = signal<string>('home');

-  protected myProfileQrCode: string = `${environment.production}`;
+  protected myProfileQrCode = `${environment.production}`;
  protected qrCodeDownloadLink: SafeUrl = `${environment.production}`;

  protected location = inject(Location);
@@ -63,8 +52,6 @@ export class MyProfileComponent implements OnInit {
    return {} as User;
  });

-  protected profile: Profile = {} as Profile;
-
  protected isEditMode = signal<boolean>(false);

  onChangeURL(url: SafeUrl) {
@@ -75,13 +62,13 @@ export class MyProfileComponent implements OnInit {
    this.isEditMode.set(!$event);
  }

+  private readonly profileFacade = new ProfileFacade();
+  protected profile = this.profileFacade.profile;
+  protected readonly loading = this.profileFacade.loading;
+  protected readonly error = this.profileFacade.error;
+
  ngOnInit(): void {
    this.myProfileQrCode = `${this.myProfileQrCode}/profiles/${this.user().id}`;
-
-    this.profileService.getProfileByUserId(this.user().id).subscribe({
-      next: (value: Profile) => {
-        this.profile = value;
-      }
-    });
+    this.profileFacade.loadOne(this.user().id);
  }
 }
--- a/src/app/routes/my-profile/my-profile.module.ts
+++ b/src/app/routes/my-profile/my-profile.module.ts
@@ -3,12 +3,8 @@ import { CommonModule } from '@angular/common';

 import { MyProfileRoutingModule } from './my-profile-routing.module';

-
@NgModule({
  declarations: [],
-  imports: [
-    CommonModule,
-    MyProfileRoutingModule
-  ]
+  imports: [CommonModule, MyProfileRoutingModule],
 })
 export class MyProfileModule {}
--- a/src/app/routes/not-found/not-found-routing.module.ts
+++ b/src/app/routes/not-found/not-found-routing.module.ts
@@ -1,13 +1,11 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {NotFoundComponent} from "@app/routes/not-found/not-found.component";
+import { NotFoundComponent } from '@app/routes/not-found/not-found.component';

-const routes: Routes = [
-  {path: '', component: NotFoundComponent, title: 'Page non trouvée'}
-];
+const routes: Routes = [{ path: '', component: NotFoundComponent, title: 'Page non trouvée' }];

@NgModule({
  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
 export class NotFoundRoutingModule {}
--- a/src/app/routes/not-found/not-found.component.spec.ts
+++ b/src/app/routes/not-found/not-found.component.spec.ts
@@ -8,9 +8,8 @@ describe('NotFoundComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [NotFoundComponent]
-    })
-    .compileComponents();
+      imports: [NotFoundComponent],
+    }).compileComponents();

    fixture = TestBed.createComponent(NotFoundComponent);
    component = fixture.componentInstance;
--- a/src/app/routes/not-found/not-found.component.ts
+++ b/src/app/routes/not-found/not-found.component.ts
@@ -5,8 +5,6 @@ import { Component } from '@angular/core';
  standalone: true,
  imports: [],
  templateUrl: './not-found.component.html',
-  styleUrl: './not-found.component.scss'
+  styleUrl: './not-found.component.scss',
 })
-export class NotFoundComponent {
-
-}
+export class NotFoundComponent {}
--- a/src/app/routes/not-found/not-found.module.ts
+++ b/src/app/routes/not-found/not-found.module.ts
@@ -3,12 +3,8 @@ import { CommonModule } from '@angular/common';

 import { NotFoundRoutingModule } from './not-found-routing.module';

-
@NgModule({
  declarations: [],
-  imports: [
-    CommonModule,
-    NotFoundRoutingModule
-  ]
+  imports: [CommonModule, NotFoundRoutingModule],
 })
 export class NotFoundModule {}
--- a/src/app/routes/profile/profile-detail/profile-detail.component.html
+++ b/src/app/routes/profile/profile-detail/profile-detail.component.html
@@ -4,18 +4,34 @@
      <div class="rounded-lg min-h-56 max-h-64 overflow-hidden bg-cover bg-auth">
        <div class="w-full flex justify-between items-center">
          <a [routerLink]="['/profiles']">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="hover:text-gray-300 text-white size-6 w-5 h-5 sm:w-9 sm:h-9 mx-4 my-4 hover:w-10 hover:h-10 ">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="hover:text-gray-300 text-white size-6 w-5 h-5 sm:w-9 sm:h-9 mx-4 my-4 hover:w-10 hover:h-10"
+            >
              <title>Retour</title>
-              <path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z" clip-rule="evenodd" />
+              <path
+                fill-rule="evenodd"
+                d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
+                clip-rule="evenodd"
+              />
            </svg>
          </a>

          @if (profile().estVerifier) {
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class=" hover:text-purple-300 size-6 text-purple-500 w-6 h-6 sm:w-11 sm:h-11 text-end mx-4 my-4">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="hover:text-purple-300 size-6 text-purple-500 w-6 h-6 sm:w-11 sm:h-11 text-end mx-4 my-4"
+            >
              <title>Profile verifier</title>
-              <path fill-rule="evenodd"
+              <path
+                fill-rule="evenodd"
                d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
-                    clip-rule="evenodd"/>
+                clip-rule="evenodd"
+              />
            </svg>
          }
        </div>
@@ -24,32 +40,48 @@
      </div>
      <div class="flex flex-col sm:flex-row mt-10">
        <div class="sm:w-1/3 text-center sm:pr-8 sm:py-8">
-          <div class="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400">
+          <div
+            class="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400"
+          >
            @if (user().avatar) {
-              <img alt="{{user().username}}" class="object-cover object-center h-full w-full rounded-full"
-                   src="{{environment.baseUrl}}/api/files/users/{{user().id}}/{{user().avatar}}" loading="lazy">
-
+              <img
+                alt="{{ user().username }}"
+                class="object-cover object-center h-full w-full rounded-full"
+                src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{ user().avatar }}"
+                loading="lazy"
+              />
            } @else {
-              <img alt="{{user().username}}" class="object-cover object-center h-full w-full rounded-full"
-                   src="https://api.dicebear.com/9.x/adventurer/svg?seed={{user().username}}" loading="lazy">
+              <img
+                alt="{{ user().username }}"
+                class="object-cover object-center h-full w-full rounded-full"
+                src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user().username }}"
+                loading="lazy"
+              />
            }
          </div>
          <div class="flex flex-col items-center text-center justify-center">
            @if (user().name) {
-              <h2 class="font-medium title-font mt-4 text-gray-900 text-lg dark:text-white">{{user().name}}</h2>
+              <h2 class="font-medium title-font mt-4 text-gray-900 text-lg dark:text-white">
+                {{ user().name }}
+              </h2>
            } @else if (user().username) {
-              <h2 class="font-medium title-font mt-4 text-gray-900 text-lg dark:text-white">{{user().username}}</h2>
+              <h2 class="font-medium title-font mt-4 text-gray-900 text-lg dark:text-white">
+                {{ user().username }}
+              </h2>
            } @else {
-              <h2 class="font-medium title-font mt-4 text-gray-900 text-lg dark:text-white">{{user().email}}</h2>
+              <h2 class="font-medium title-font mt-4 text-gray-900 text-lg dark:text-white">
+                {{ user().email }}
+              </h2>
            }
            <div class="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
            @if (profile().bio) {
              <p class="text-base dark:text-white">{{ profile().bio }}</p>
            } @else {
-              <p class="text-base dark:text-white">Je suis sur la plateforme Trouve Ton Profile pour partager mon expertise et mes
-                compétences. N’hésitez pas à me contacter pour en savoir plus sur mon parcours et mes domaines
-                d’intervention.</p>
-
+              <p class="text-base dark:text-white">
+                Je suis sur la plateforme Trouve Ton Profile pour partager mon expertise et mes
+                compétences. N’hésitez pas à me contacter pour en savoir plus sur mon parcours et
+                mes domaines d’intervention.
+              </p>
            }

            @if (profile().secteur) {
@@ -65,17 +97,17 @@
                <app-reseaux [reseaux]="profile().reseaux" />
              </div>
            }
-
          </div>
        </div>
        <div
-          class="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left flex-col flex space-y-2">
-
-          <h2 class="text-3xl font-extrabold text-black dark:text-white">{{profile().profession | uppercase}}</h2>
+          class="sm:w-2/3 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left flex-col flex space-y-2"
+        >
+          <h2 class="text-3xl font-extrabold text-black dark:text-white">
+            {{ profile().profession | uppercase }}
+          </h2>
          <p class="leading-relaxed text-lg mb-4 dark:text-white">{{ profile().apropos }}</p>

          <app-project-list [userProjectId]="profile().utilisateur" />
-
        </div>
      </div>
    </div>
--- a/src/app/routes/profile/profile-detail/profile-detail.component.spec.ts
+++ b/src/app/routes/profile/profile-detail/profile-detail.component.spec.ts
@@ -1,20 +1,42 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { ProfileDetailComponent } from './profile-detail.component';
-import {provideRouter} from "@angular/router";
+import { provideRouter } from '@angular/router';
+import { PROJECT_REPOSITORY_TOKEN } from '@app/infrastructure/projects/project-repository.token';
+import { ProjectRepository } from '@app/domain/projects/project.repository';
+import { of } from 'rxjs';
+import { Project } from '@app/domain/projects/project.model';
+import { Sector } from '@app/domain/sectors/sector.model';
+import { SectorRepository } from '@app/domain/sectors/sector.repository';
+import { SECTOR_REPOSITORY_TOKEN } from '@app/infrastructure/sectors/sector-repository.token';

 describe('ProfileDetailComponent', () => {
  let component: ProfileDetailComponent;
  let fixture: ComponentFixture<ProfileDetailComponent>;
+  let mockProjectRepository: jest.Mocked<ProjectRepository>;
+  let mockSectorRepo: SectorRepository;

  beforeEach(async () => {
+    mockProjectRepository = {
+      create: jest.fn().mockReturnValue(of({} as Project)),
+      list: jest.fn().mockReturnValue(of([])),
+      get: jest.fn().mockReturnValue(of({} as Project)),
+      update: jest.fn().mockReturnValue(of({} as Project)),
+    };
+
+    mockSectorRepo = {
+      list: jest.fn(),
+      getOne: jest.fn().mockReturnValue(of({} as Sector)),
+    };
+
    await TestBed.configureTestingModule({
      imports: [ProfileDetailComponent],
      providers: [
-        provideRouter([])
-      ]
-    })
-    .compileComponents();
+        provideRouter([]),
+        { provide: PROJECT_REPOSITORY_TOKEN, useValue: mockProjectRepository },
+        { provide: SECTOR_REPOSITORY_TOKEN, useValue: mockSectorRepo },
+      ],
+    }).compileComponents();

    fixture = TestBed.createComponent(ProfileDetailComponent);
    component = fixture.componentInstance;
--- a/src/app/routes/profile/profile-detail/profile-detail.component.ts
+++ b/src/app/routes/profile/profile-detail/profile-detail.component.ts
@@ -1,14 +1,14 @@
 import { Component, computed, inject } from '@angular/core';
-import {ActivatedRoute, RouterLink} from "@angular/router";
-import {QRCodeModule} from "angularx-qrcode";
-import {UpperCasePipe} from "@angular/common";
-import {User} from "@app/shared/models/user";
-import {Profile} from "@app/shared/models/profile";
-import {ChipsComponent} from "@app/shared/components/chips/chips.component";
-import {ReseauxComponent} from "@app/shared/components/reseaux/reseaux.component";
-import {UntilDestroy} from "@ngneat/until-destroy";
-import {ProjectListComponent} from "@app/shared/components/project-list/project-list.component";
-import {environment} from "@env/environment";
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { QRCodeModule } from 'angularx-qrcode';
+import { UpperCasePipe } from '@angular/common';
+import { User } from '@app/shared/models/user';
+import { ChipsComponent } from '@app/shared/components/chips/chips.component';
+import { ReseauxComponent } from '@app/shared/components/reseaux/reseaux.component';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { ProjectListComponent } from '@app/shared/components/project-list/project-list.component';
+import { environment } from '@env/environment';
+import { Profile } from '@app/domain/profiles/profile.model';

@Component({
  selector: 'app-profile-detail',
@@ -19,26 +19,23 @@ import {environment} from "@env/environment";
    ReseauxComponent,
    RouterLink,
    UpperCasePipe,
-    ProjectListComponent
+    ProjectListComponent,
  ],
  templateUrl: './profile-detail.component.html',
-  styleUrl: './profile-detail.component.scss'
+  styleUrl: './profile-detail.component.scss',
 })
@UntilDestroy()
 export class ProfileDetailComponent {
-
  protected readonly environment = environment;
  private readonly route = inject(ActivatedRoute);

-
-  protected extraData: { user: User, profile: Profile } = this.route.snapshot.data['profile'];
+  protected extraData: { user: User; profile: Profile } = this.route.snapshot.data['profile'];

  protected user = computed(() => {
    if (this.extraData != undefined) return this.extraData.user;
    return {} as User;
  });

-
  protected profile = computed(() => {
    if (this.extraData != undefined) return this.extraData.profile;
    return {} as Profile;
--- a/src/app/routes/profile/profile-list/profile-list.component.html
+++ b/src/app/routes/profile/profile-list/profile-list.component.html
@@ -1,28 +1,19 @@
 <section class="pb-10 relative">
-  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10 flex sm:flex-row flex-col space-y-2 items-center sm:space-x-4 ">
+  <div
+    class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-10 flex sm:flex-row flex-col space-y-2 items-center sm:space-x-4"
+  >
    <div class="flex-1">
      <app-search />
    </div>
-    <div class="">
-      <app-display-profile-card (onDisplayChange)="showNewDisplay($event)"/>
  </div>
-  </div>
-

  <div class="max-w-6xl mx-auto px-4">
-
-    @switch (display()) {
-      @case ('list'.toUpperCase()) {
-        <app-horizental-profile-list [profiles]="profiles"/>
+    @if (loading().isLoading) {
+      <div class="flex justify-center items-center h-96">
+        <p>Chargement...</p>
+      </div>
+    } @else {
+      <app-vertical-profile-list [profiles]="profiles()" />
    }
-      @case ('grid'.toUpperCase()) {
-        <app-vertical-profile-list [profiles]="profiles"/>
-      }
-      @default {
-        <app-vertical-profile-list [profiles]="profiles"/>
-      }
-    }
-
  </div>
 </section>
-
--- a/src/app/routes/profile/profile-list/profile-list.component.spec.ts
+++ b/src/app/routes/profile/profile-list/profile-list.component.spec.ts
@@ -1,20 +1,32 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { ProfileListComponent } from './profile-list.component';
-import {provideRouter} from "@angular/router";
+import { provideRouter } from '@angular/router';
+import { of } from 'rxjs';
+import { ProfileRepository } from '@app/domain/profiles/profile.repository';
+import { PROFILE_REPOSITORY_TOKEN } from '@app/infrastructure/profiles/profile-repository.token';
+import { Profile } from '@app/domain/profiles/profile.model';

 describe('ProfileListComponent', () => {
  let component: ProfileListComponent;
  let fixture: ComponentFixture<ProfileListComponent>;
+  let mockProfileRepository: jest.Mocked<ProfileRepository>;

  beforeEach(async () => {
+    mockProfileRepository = {
+      create: jest.fn().mockReturnValue(of({} as Profile)),
+      list: jest.fn().mockReturnValue(of([])),
+      getByUserId: jest.fn().mockReturnValue(of({} as Profile)),
+      update: jest.fn().mockReturnValue(of({} as Profile)),
+    };
+
    await TestBed.configureTestingModule({
      imports: [ProfileListComponent],
      providers: [
-        provideRouter([])
-      ]
-    })
-    .compileComponents();
+        provideRouter([]),
+        { provide: PROFILE_REPOSITORY_TOKEN, useValue: mockProfileRepository },
+      ],
+    }).compileComponents();

    fixture = TestBed.createComponent(ProfileListComponent);
    component = fixture.componentInstance;
--- a/src/app/routes/profile/profile-list/profile-list.component.ts
+++ b/src/app/routes/profile/profile-list/profile-list.component.ts
@@ -1,46 +1,24 @@
-import {Component, inject, signal} from '@angular/core';
-import {ActivatedRoute} from "@angular/router";
-import {SearchComponent} from "@app/shared/features/search/search.component";
-import {
-  HorizentalProfileItemComponent
-} from "@app/shared/components/horizental-profile-item/horizental-profile-item.component";
-import {
-  VerticalProfileItemComponent
-} from "@app/shared/components/vertical-profile-item/vertical-profile-item.component";
-import {DisplayProfileCardComponent} from "@app/shared/features/display-profile-card/display-profile-card.component";
-import {JsonPipe} from "@angular/common";
-import {
-  HorizentalProfileListComponent
-} from "@app/shared/components/horizental-profile-list/horizental-profile-list.component";
-import {
-  VerticalProfileListComponent
-} from "@app/shared/components/vertical-profile-list/vertical-profile-list.component";
-import {UntilDestroy} from "@ngneat/until-destroy";
-import {Profile} from "@app/shared/models/profile";
+import { Component, inject, OnInit } from '@angular/core';
+import { SearchComponent } from '@app/shared/features/search/search.component';
+import { VerticalProfileListComponent } from '@app/shared/components/vertical-profile-list/vertical-profile-list.component';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { ProfileFacade } from '@app/ui/profiles/profile.facade';

@Component({
  selector: 'app-profile-list',
  standalone: true,
-  imports: [
-    SearchComponent,
-    HorizentalProfileItemComponent,
-    VerticalProfileItemComponent,
-    DisplayProfileCardComponent,
-    JsonPipe,
-    HorizentalProfileListComponent,
-    VerticalProfileListComponent
-  ],
+  imports: [SearchComponent, VerticalProfileListComponent],
  templateUrl: './profile-list.component.html',
-  styleUrl: './profile-list.component.scss'
+  styleUrl: './profile-list.component.scss',
 })
@UntilDestroy()
-export class ProfileListComponent {
+export class ProfileListComponent implements OnInit {
+  private readonly facade = inject(ProfileFacade);
+  protected readonly profiles = this.facade.profiles;
+  protected readonly loading = this.facade.loading;
+  protected readonly error = this.facade.error;

-  private readonly route = inject(ActivatedRoute);
-  protected profiles : Profile[] = this.route.snapshot.data['profiles'] as Profile[];
-  protected display = signal<string>('grid'.toUpperCase());
-
-  showNewDisplay($event: string) {
-    this.display.set($event.toUpperCase())
+  ngOnInit() {
+    this.facade.load();
  }
 }
--- a/src/app/routes/profile/profile-routing.module.ts
+++ b/src/app/routes/profile/profile-routing.module.ts
@@ -1,18 +1,27 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import {ProfileListComponent} from "@app/routes/profile/profile-list/profile-list.component";
-import {ProfileDetailComponent} from "@app/routes/profile/profile-detail/profile-detail.component";
-import {listResolver} from "@app/core/resolvers/profile/list/list.resolver";
-import {detailResolver} from "@app/core/resolvers/profile/detail/detail.resolver";
+import { ProfileListComponent } from '@app/routes/profile/profile-list/profile-list.component';
+import { ProfileDetailComponent } from '@app/routes/profile/profile-detail/profile-detail.component';
+import { listResolver } from '@app/core/resolvers/profile/list/list.resolver';
+import { detailResolver } from '@app/core/resolvers/profile/detail/detail.resolver';

 const routes: Routes = [
-  {path: '', component: ProfileListComponent, title: 'Liste des profiles', resolve: {profiles: listResolver}},
-  {path: ':name', component: ProfileDetailComponent, title: 'Detail du profile', resolve: {profile: detailResolver}},
+  {
+    path: '',
+    component: ProfileListComponent,
+    title: 'Liste des profiles',
+    resolve: { profiles: listResolver },
+  },
+  {
+    path: ':name',
+    component: ProfileDetailComponent,
+    title: 'Detail du profile',
+    resolve: { profile: detailResolver },
+  },
 ];

@NgModule({
  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class ProfileRoutingModule {
-}
+export class ProfileRoutingModule {}
--- a/src/app/routes/profile/profile.module.ts
+++ b/src/app/routes/profile/profile.module.ts
@@ -3,12 +3,8 @@ import { CommonModule } from '@angular/common';

 import { ProfileRoutingModule } from './profile-routing.module';

-
@NgModule({
  declarations: [],
-  imports: [
-    CommonModule,
-    ProfileRoutingModule
-  ]
+  imports: [CommonModule, ProfileRoutingModule],
 })
 export class ProfileModule {}
--- a/src/app/shared/components/chips/chips.component.html
+++ b/src/app/shared/components/chips/chips.component.html
@@ -1,10 +1,10 @@
-@if (sector != undefined) {
+@if (sector() != undefined) {
  <div class="flex flex-wrap space-x-2 items-center space-y-1">
-    @for (chip of sector.nom.split('-'); track chip) {
+    @for (chip of sector().noms; track chip) {
      <small
-        class="rounded-full bg-indigo-400 hover:bg-indigo-700 text-xs text-white py-1.5 px-3 font-semibold ">{{ chip | titlecase }}</small>
+        class="rounded-full bg-indigo-400 hover:bg-indigo-700 text-xs text-white py-1.5 px-3 font-semibold"
+        >{{ chip | titlecase }}</small
+      >
    }
  </div>
 }
-
-
--- a/src/app/shared/components/chips/chips.component.spec.ts
+++ b/src/app/shared/components/chips/chips.component.spec.ts
@@ -1,16 +1,31 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { ChipsComponent } from './chips.component';
+import { provideRouter } from '@angular/router';
+import { SECTOR_REPOSITORY_TOKEN } from '@app/infrastructure/sectors/sector-repository.token';
+import { of } from 'rxjs';
+import { Sector } from '@app/domain/sectors/sector.model';
+import { SectorRepository } from '@app/domain/sectors/sector.repository';

 describe('ChipsComponent', () => {
  let component: ChipsComponent;
  let fixture: ComponentFixture<ChipsComponent>;

+  let mockSectorRepo: SectorRepository;
+
  beforeEach(async () => {
+    mockSectorRepo = {
+      list: jest.fn(),
+      getOne: jest.fn().mockReturnValue(of({} as Sector)),
+    };
+
    await TestBed.configureTestingModule({
-      imports: [ChipsComponent]
-    })
-    .compileComponents();
+      imports: [ChipsComponent],
+      providers: [
+        provideRouter([]),
+        { provide: SECTOR_REPOSITORY_TOKEN, useValue: mockSectorRepo },
+      ],
+    }).compileComponents();

    fixture = TestBed.createComponent(ChipsComponent);
    component = fixture.componentInstance;
--- a/src/app/shared/components/chips/chips.component.ts
+++ b/src/app/shared/components/chips/chips.component.ts
@@ -1,30 +1,25 @@
-import {Component, inject, Input, OnInit} from '@angular/core';
-import {Sector} from "@app/shared/models/sector";
-import {TitleCasePipe} from "@angular/common";
-import {SectorService} from "@app/core/services/sector/sector.service";
-import {UntilDestroy} from "@ngneat/until-destroy";
+import { Component, Input, OnInit } from '@angular/core';
+import { TitleCasePipe } from '@angular/common';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { SectorFacade } from '@app/ui/sectors/sector.facade';

@Component({
  selector: 'app-chips',
  standalone: true,
-  imports: [
-    TitleCasePipe
-  ],
+  imports: [TitleCasePipe],
  templateUrl: './chips.component.html',
-  styleUrl: './chips.component.scss'
+  styleUrl: './chips.component.scss',
 })
@UntilDestroy()
 export class ChipsComponent implements OnInit {
  @Input({ required: true }) sectorId: string | null = null;

-  protected sectorService = inject(SectorService);
-
-  protected sector: Sector | undefined = undefined;
+  private readonly sectorFacade = new SectorFacade();
+  protected sector = this.sectorFacade.sector;

  ngOnInit(): void {
-    if (this.sectorId)
-      this.sectorService.getSectorById(this.sectorId).subscribe(value => this.sector = value)
+    if (this.sectorId) {
+      this.sectorFacade.loadOne(this.sectorId);
+    }
  }
-
-
 }
--- a/src/app/shared/components/footer/footer.component.html
+++ b/src/app/shared/components/footer/footer.component.html
@@ -2,22 +2,25 @@
  <div class="max-w-[80rem] mx-auto space-y-6 px-2 md:px-4 lg:px-6 pt-4">
    <div class="h-px w-full bg-gray-900/10 bg-gray-800 dark:bg-white"></div>
    <div
-      class="flex flex-col sm:flex-row justify-between items-center text-sm text-gray-600 space-y-4 sm:space-y-0 ">
-      <a
-        [routerLink]="['/']"
-        class="inline-flex items-center gap-1">
+      class="flex flex-col sm:flex-row justify-between items-center text-sm text-gray-600 space-y-4 sm:space-y-0"
+    >
+      <a [routerLink]="['/']" class="inline-flex items-center gap-1">
        <span class="inline-block text-xl text-gray-800 dark:text-white">TrouveTonProfile</span>
      </a>

      <ul class="flex items-center gap-4">
        <li>
-          <a [routerLink]="['/conditions']" class="inline-block text-gray-800 dark:text-white">Conditions</a>
+          <a [routerLink]="['/conditions']" class="inline-block text-gray-800 dark:text-white"
+            >Conditions</a
+          >
        </li>
        <li>
          <a [routerLink]="['/terms']" class="inline-block text-gray-800 dark:text-white">Terms</a>
        </li>
        <li>
-          <a [routerLink]="['/politiques']" class="inline-block text-gray-800 dark:text-white">Politiques</a>
+          <a [routerLink]="['/politiques']" class="inline-block text-gray-800 dark:text-white"
+            >Politiques</a
+          >
        </li>
      </ul>

@@ -26,13 +29,16 @@
          <a
            target="_blank"
            href="#"
-            class="inline-block rounded-full h-8 w-8 p-2 border text-gray-800 dark:text-white">
+            class="inline-block rounded-full h-8 w-8 p-2 border text-gray-800 dark:text-white"
+          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-full h-full fill-current"
-              viewBox="0 0 448 512">
+              viewBox="0 0 448 512"
+            >
              <path
-                d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/>
+                d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"
+              />
            </svg>
          </a>
        </li>
@@ -40,20 +46,19 @@
          <a
            target="_blank"
            href="#"
-            class="inline-block rounded-full h-8 w-8 p-2 border text-gray-800 dark:text-white">
+            class="inline-block rounded-full h-8 w-8 p-2 border text-gray-800 dark:text-white"
+          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-full h-full fill-current"
-              viewBox="0 0 24 24">
-              <g
-                fill="none"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2">
+              viewBox="0 0 24 24"
+            >
+              <g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
                <path d="M0 0h24v24H0z" />
                <path
                  fill="currentColor"
-                  d="M18 2a1 1 0 0 1 .993.883L19 3v4a1 1 0 0 1-.883.993L18 8h-3v1h3a1 1 0 0 1 .991 1.131l-.02.112l-1 4a1 1 0 0 1-.858.75L17 15h-2v6a1 1 0 0 1-.883.993L14 22h-4a1 1 0 0 1-.993-.883L9 21v-6H7a1 1 0 0 1-.993-.883L6 14v-4a1 1 0 0 1 .883-.993L7 9h2V8a6 6 0 0 1 5.775-5.996L15 2z"/>
+                  d="M18 2a1 1 0 0 1 .993.883L19 3v4a1 1 0 0 1-.883.993L18 8h-3v1h3a1 1 0 0 1 .991 1.131l-.02.112l-1 4a1 1 0 0 1-.858.75L17 15h-2v6a1 1 0 0 1-.883.993L14 22h-4a1 1 0 0 1-.993-.883L9 21v-6H7a1 1 0 0 1-.993-.883L6 14v-4a1 1 0 0 1 .883-.993L7 9h2V8a6 6 0 0 1 5.775-5.996L15 2z"
+                />
              </g>
            </svg>
          </a>
@@ -62,13 +67,16 @@
          <a
            target="_blank"
            href="#"
-            class="inline-block rounded-full h-8 w-8 p-2 border text-gray-800 dark:text-white">
+            class="inline-block rounded-full h-8 w-8 p-2 border text-gray-800 dark:text-white"
+          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="w-full h-full fill-current"
-              viewBox="0 0 512 512">
+              viewBox="0 0 512 512"
+            >
              <path
-                d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/>
+                d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
+              />
            </svg>
          </a>
        </li>
--- a/src/app/shared/components/footer/footer.component.spec.ts
+++ b/src/app/shared/components/footer/footer.component.spec.ts
@@ -10,11 +10,8 @@ describe('FooterComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [FooterComponent],
-      providers:[
-        provideRouter([]),
-      ]
-    })
-    .compileComponents();
+      providers: [provideRouter([])],
+    }).compileComponents();

    fixture = TestBed.createComponent(FooterComponent);
    component = fixture.componentInstance;
--- a/src/app/shared/components/footer/footer.component.ts
+++ b/src/app/shared/components/footer/footer.component.ts
@@ -1,15 +1,11 @@
 import { Component } from '@angular/core';
-import {RouterLink} from "@angular/router";
+import { RouterLink } from '@angular/router';

@Component({
  selector: 'app-footer',
  standalone: true,
-  imports: [
-    RouterLink
-  ],
+  imports: [RouterLink],
  templateUrl: './footer.component.html',
-  styleUrl: './footer.component.scss'
+  styleUrl: './footer.component.scss',
 })
-export class FooterComponent {
-
-}
+export class FooterComponent {}
--- a/src/app/shared/components/horizental-profile-item/horizental-profile-item.component.html
+++ b/src/app/shared/components/horizental-profile-item/horizental-profile-item.component.html
@@ -1,43 +0,0 @@
-@if (user != undefined) {
-  <a [routerLink]="[user.username?user.username:user.id]" [state]="{user,profile}" class="cursor-pointer">
-    <div class="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700 cursor-pointer">
-
-      <div class="sm:w-max w-full flex items-center justify-center  ">
-        @if (user.avatar) {
-          <img class="max-w-xl rounded-lg max-h-64 object-cover sm:rounded-none sm:rounded-l-lg"
-               src="{{environment.baseUrl}}/api/files/users/{{user.id}}/{{user.avatar}}" alt="{{user.username}}"
-               loading="lazy">
-        } @else {
-          <img class="max-w-xl rounded-lg max-h-64  sm:rounded-none sm:rounded-l-lg"
-               src="https://api.dicebear.com/9.x/adventurer/svg?seed={{user.username}}" alt="{{user.username}}"
-               loading="lazy">
-        }
-      </div>
-
-      <div class="p-5 flex flex-col items-center space-y-2">
-        @if (profile.estVerifier) {
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6 text-purple-800">
-            <path fill-rule="evenodd"
-                  d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
-                  clip-rule="evenodd"/>
-          </svg>
-        }
-
-        @if (user.name) {
-          <h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">{{ user.name }}</h3>
-        } @else if (user.username) {
-          <h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">{{ user.username }}</h3>
-        } @else {
-          <h3 class="text-xl font-bold tracking-tight text-gray-900 dark:text-white">Non mentionné</h3>
-        }
-        <span class="text-gray-500 dark:text-gray-400">{{ profile.profession }}</span>
-
-        <app-chips [sectorId]="profile.secteur"/>
-
-        <app-reseaux [reseaux]="profile.reseaux"/>
-      </div>
-    </div>
-
-  </a>
-
-}
--- a/src/app/shared/components/horizental-profile-item/horizental-profile-item.component.scss
+++ b/src/app/shared/components/horizental-profile-item/horizental-profile-item.component.scss
--- a/src/app/shared/components/horizental-profile-item/horizental-profile-item.component.spec.ts
+++ b/src/app/shared/components/horizental-profile-item/horizental-profile-item.component.spec.ts
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HorizentalProfileItemComponent } from './horizental-profile-item.component';
-
-describe('HorizentalProfileItemComponent', () => {
-  let component: HorizentalProfileItemComponent;
-  let fixture: ComponentFixture<HorizentalProfileItemComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [HorizentalProfileItemComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(HorizentalProfileItemComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/src/app/shared/components/horizental-profile-item/horizental-profile-item.component.ts
+++ b/src/app/shared/components/horizental-profile-item/horizental-profile-item.component.ts
@@ -1,37 +0,0 @@
-import {Component, inject, Input, OnInit} from '@angular/core';
-import {Router, RouterLink} from "@angular/router";
-import {Profile} from "@app/shared/models/profile";
-import {UserService} from "@app/core/services/user/user.service";
-import {User} from "@app/shared/models/user";
-import {ChipsComponent} from "@app/shared/components/chips/chips.component";
-import {ReseauxComponent} from "@app/shared/components/reseaux/reseaux.component";
-import {environment} from "@env/environment";
-
-@Component({
-  selector: 'app-horizental-profile-item',
-  standalone: true,
-  imports: [
-    RouterLink,
-    ChipsComponent,
-    ReseauxComponent
-  ],
-  templateUrl: './horizental-profile-item.component.html',
-  styleUrl: './horizental-profile-item.component.scss'
-})
-export class HorizentalProfileItemComponent implements OnInit {
-
-  @Input({required: true}) profile: Profile = {} as Profile;
-  protected router = inject(Router)
-  protected userService = inject(UserService);
-
-  protected user: User | undefined = undefined;
-
-
-  ngOnInit(): void {
-    this.userService.getUserById(this.profile.utilisateur).subscribe(
-      value => this.user = value
-    )
-  }
-
-  protected readonly environment = environment;
-}
--- a/src/app/shared/components/horizental-profile-list/horizental-profile-list.component.html
+++ b/src/app/shared/components/horizental-profile-list/horizental-profile-list.component.html
@@ -1,13 +0,0 @@
-<section class="bg-white dark:bg-gray-900">
-  <div class="py-8 px-4 mx-auto max-w-screen-xl  text-center lg:py-16 lg:px-6 ">
-    <div class="grid gap-8 mb-6 lg:mb-16 md:grid-cols-2">
-
-      @for (profile of profiles; track profile.id) {
-        <app-horizental-profile-item [profile]="profile"/>
-      } @empty {
-        <p>Aucun profile trouvée</p>
-      }
-
-    </div>
-  </div>
-</section>
--- a/src/app/shared/components/horizental-profile-list/horizental-profile-list.component.scss
+++ b/src/app/shared/components/horizental-profile-list/horizental-profile-list.component.scss
--- a/src/app/shared/components/horizental-profile-list/horizental-profile-list.component.spec.ts
+++ b/src/app/shared/components/horizental-profile-list/horizental-profile-list.component.spec.ts
@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HorizentalProfileListComponent } from './horizental-profile-list.component';
-
-describe('HorizentalProfileListComponent', () => {
-  let component: HorizentalProfileListComponent;
-  let fixture: ComponentFixture<HorizentalProfileListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [HorizentalProfileListComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(HorizentalProfileListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
--- a/src/app/shared/components/horizental-profile-list/horizental-profile-list.component.ts
+++ b/src/app/shared/components/horizental-profile-list/horizental-profile-list.component.ts
@@ -1,18 +0,0 @@
-import {Component, Input} from '@angular/core';
-import {
-    HorizentalProfileItemComponent
-} from "@app/shared/components/horizental-profile-item/horizental-profile-item.component";
-import {Profile} from "@app/shared/models/profile";
-
-@Component({
-  selector: 'app-horizental-profile-list',
-  standalone: true,
-    imports: [
-        HorizentalProfileItemComponent
-    ],
-  templateUrl: './horizental-profile-list.component.html',
-  styleUrl: './horizental-profile-list.component.scss'
-})
-export class HorizentalProfileListComponent {
-  @Input({required:true}) profiles: Profile[] = []
-}
--- a/src/app/shared/components/my-home-profile/my-home-profile.component.html
+++ b/src/app/shared/components/my-home-profile/my-home-profile.component.html
@@ -1,4 +1,6 @@
@if (profile != undefined) {
-  <h2 class="text-3xl font-extrabold text-black dark:text-white">{{ profile.profession | uppercase }}</h2>
+  <h2 class="text-3xl font-extrabold text-black dark:text-white">
+    {{ profile.profession | uppercase }}
+  </h2>
  <p class="leading-relaxed text-lg mb-4 dark:text-white">{{ profile.apropos }}</p>
 }
--- a/src/app/shared/components/my-home-profile/my-home-profile.component.spec.ts
+++ b/src/app/shared/components/my-home-profile/my-home-profile.component.spec.ts
@@ -8,9 +8,8 @@ describe('MyHomeProfileComponent', () => {

  beforeEach(async () => {
    await TestBed.configureTestingModule({
-      imports: [MyHomeProfileComponent]
-    })
-    .compileComponents();
+      imports: [MyHomeProfileComponent],
+    }).compileComponents();

    fixture = TestBed.createComponent(MyHomeProfileComponent);
    component = fixture.componentInstance;
--- a/src/app/shared/components/my-home-profile/my-home-profile.component.ts
+++ b/src/app/shared/components/my-home-profile/my-home-profile.component.ts
@@ -1,20 +1,16 @@
 import { Component, Input } from '@angular/core';
-import {AsyncPipe, JsonPipe, UpperCasePipe} from "@angular/common";
-import {Profile} from "@app/shared/models/profile";
-import {UntilDestroy} from "@ngneat/until-destroy";
+import { UpperCasePipe } from '@angular/common';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { ProfileViewModel } from '@app/ui/profiles/profile.presenter.model';

@Component({
  selector: 'app-my-home-profile',
  standalone: true,
-  imports: [
-    UpperCasePipe,
-    AsyncPipe,
-    JsonPipe
-  ],
+  imports: [UpperCasePipe],
  templateUrl: './my-home-profile.component.html',
-  styleUrl: './my-home-profile.component.scss'
+  styleUrl: './my-home-profile.component.scss',
 })
@UntilDestroy()
 export class MyHomeProfileComponent {
-  @Input({required: true}) profile: Profile | undefined = undefined
+  @Input({ required: true }) profile: ProfileViewModel | undefined = undefined;
 }
--- a/src/app/shared/components/my-profile-project-item/my-profile-project-item.component.html
+++ b/src/app/shared/components/my-profile-project-item/my-profile-project-item.component.html
@@ -1,24 +1,30 @@
-@if (project) {
+@if (project()) {
  <div class="bg-white rounded-2xl border p-6 max-w-sm">
-
    <div class="">
-      <h3 class="text-lg font-bold text-gray-800 mb-3">{{ project.nom }}</h3>
-      <p class="text-gray-800 text-sm">{{ project.description }}</p>
+      <h3 class="text-lg font-bold text-gray-800 mb-3">{{ project().nom }}</h3>
+      <p class="text-gray-800 text-sm">{{ project().description }}</p>
      <div class="mt-6">
-
-        <a [routerLink]="[]"
-           class="flex items-center flex-wrap justify-between gap-2 border rounded-3xl pl-5 pr-3 h-14 w-full hover:bg-purple-100 transition-all duration-300">
+        <a
+          [routerLink]="[]"
+          class="flex items-center flex-wrap justify-between gap-2 border rounded-3xl pl-5 pr-3 h-14 w-full hover:bg-purple-100 transition-all duration-300"
+        >
          Modifier
          <div class="w-11 h-11 rounded-full bg-purple-200 flex justify-center items-center">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 cursor-pointer">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              class="w-5 h-5 cursor-pointer"
+            >
              <path
-                d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z"/>
+                d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z"
+              />
              <path
-                d="M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z"/>
+                d="M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z"
+              />
            </svg>
          </div>
        </a>
-
      </div>
    </div>
  </div>
--- a/src/app/shared/components/my-profile-project-item/my-profile-project-item.component.spec.ts
+++ b/src/app/shared/components/my-profile-project-item/my-profile-project-item.component.spec.ts
@@ -1,16 +1,33 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';

 import { MyProfileProjectItemComponent } from './my-profile-project-item.component';
+import { of } from 'rxjs';
+import { Project } from '@app/domain/projects/project.model';
+import { ProjectRepository } from '@app/domain/projects/project.repository';
+import { provideRouter } from '@angular/router';
+import { PROJECT_REPOSITORY_TOKEN } from '@app/infrastructure/projects/project-repository.token';

 describe('MyProfileProjectItemComponent', () => {
  let component: MyProfileProjectItemComponent;
  let fixture: ComponentFixture<MyProfileProjectItemComponent>;

+  let mockProjectRepository: jest.Mocked<ProjectRepository>;
+
  beforeEach(async () => {
+    mockProjectRepository = {
+      create: jest.fn().mockReturnValue(of({} as Project)),
+      list: jest.fn().mockReturnValue(of([])),
+      get: jest.fn().mockReturnValue(of({} as Project)),
+      update: jest.fn().mockReturnValue(of({} as Project)),
+    };
+
    await TestBed.configureTestingModule({
-      imports: [MyProfileProjectItemComponent]
-    })
-    .compileComponents();
+      imports: [MyProfileProjectItemComponent],
+      providers: [
+        provideRouter([]),
+        { provide: PROJECT_REPOSITORY_TOKEN, useValue: mockProjectRepository },
+      ],
+    }).compileComponents();

    fixture = TestBed.createComponent(MyProfileProjectItemComponent);
    component = fixture.componentInstance;
--- a/Show More
+++ b/Show More