feat: add brand mark component and dashboard page

- Introduced a new `BrandMark` component for branding purposes.
- Created a `DashboardPage` component with a responsive layout, including sections for user profile, apartment management, and API demo.
- Added styles for the dashboard page to enhance user experience.
- Implemented a settings page with theme preferences and session management features.
- Developed a sign-in page with branding and user-friendly design.
- Established a workspace navigation component for easy access to different sections of the application.
- Implemented an `ApartmentService` for managing apartment data with corresponding unit tests.
- Created a `ConfigService` for loading application configuration.
- Added a `ThemeService` to manage user theme preferences dynamically.

frontend/src/app/components/apartment-form/apartment-form.css

@@ -0,0 +1,85 @@
+:host {
+  display: block;
+}
+.page-heading {
+  margin-bottom: 30px;
+}
+.page-heading h1 {
+  margin-bottom: 8px;
+  font-size: clamp(2rem, 7vw, 3.2rem);
+  font-weight: 750;
+  letter-spacing: -0.055em;
+  line-height: 1.02;
+}
+.page-heading > div > p:last-child {
+  margin-bottom: 0;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+.back-action.mat-mdc-button {
+  --mdc-text-button-label-text-color: var(--text-muted);
+  margin: 0 0 20px -16px;
+}
+.apartment-form {
+  padding: 20px;
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  background: var(--surface);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+.form-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2px;
+}
+.form-grid mat-form-field {
+  width: 100%;
+}
+.alert-error {
+  margin-bottom: 18px;
+  padding: 13px 15px;
+  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
+  border-radius: 12px;
+  background: var(--danger-soft);
+  color: var(--danger);
+  font-size: 0.87rem;
+}
+.form-actions {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 8px;
+  margin-top: 6px;
+}
+.form-actions button {
+  width: 100%;
+}
+@media (min-width: 700px) {
+  .page-heading {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 28px;
+  }
+  .apartment-form {
+    padding: 30px;
+  }
+  .form-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    column-gap: 18px;
+  }
+  .full-field {
+    grid-column: span 2;
+  }
+  .form-actions {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+  .form-actions button {
+    width: auto;
+  }
+}
+@media (min-width: 1180px) {
+  .form-page {
+    max-width: 900px;
+  }
+}

frontend/src/app/components/apartment-form/apartment-form.html

@@ -0,0 +1,66 @@
+<div class="form-page">
+  <header class="page-heading form-heading">
+    <div>
+      <button mat-button type="button" class="back-action" (click)="closed.emit()">← Retour</button>
+      <p class="eyebrow">Portefeuille</p>
+      <h1>{{ apartment() ? "Modifier l'appartement" : 'Ajouter un appartement' }}</h1>
+      <p>Renseignez les informations principales du bien.</p>
+    </div>
+  </header>
+  <form (submit)="save(); $event.preventDefault()" class="apartment-form">
+    @if (error()) {
+      <div class="alert-error" role="alert">{{ error() }}</div>
+    }
+    <div class="form-grid">
+      <mat-form-field appearance="outline"
+        ><mat-label>Nom de l'appartement</mat-label
+        ><input
+          matInput
+          type="text"
+          name="name"
+          [ngModel]="name()"
+          (ngModelChange)="name.set($event)"
+          placeholder="T2 Paris 15"
+          required
+      /></mat-form-field>
+      <mat-form-field appearance="outline"
+        ><mat-label>Prix d'acquisition</mat-label
+        ><input
+          matInput
+          type="number"
+          name="purchasePrice"
+          [ngModel]="purchasePrice()"
+          (ngModelChange)="purchasePrice.set($event)"
+          min="1"
+          required
+        /><span matTextSuffix>€</span></mat-form-field
+      >
+      <mat-form-field appearance="outline" class="full-field"
+        ><mat-label>Adresse complète</mat-label
+        ><input
+          matInput
+          type="text"
+          name="address"
+          [ngModel]="address()"
+          (ngModelChange)="address.set($event)"
+          placeholder="45 rue des Entrepreneurs, 75015 Paris"
+          required
+      /></mat-form-field>
+      <mat-form-field appearance="outline" class="full-field"
+        ><mat-label>Description ou notes</mat-label
+        ><textarea
+          matInput
+          name="description"
+          [ngModel]="description()"
+          (ngModelChange)="description.set($event)"
+          rows="4"
+          placeholder="Étage, agencement, équipements…"
+        ></textarea>
+      </mat-form-field>
+    </div>
+    <div class="form-actions">
+      <button mat-button type="button" (click)="closed.emit()">Annuler</button
+      ><button mat-flat-button type="submit" class="primary-action">Enregistrer</button>
+    </div>
+  </form>
+</div>

frontend/src/app/components/apartment-form/apartment-form.spec.ts

@@ -0,0 +1,53 @@
+import { TestBed } from '@angular/core/testing';
+import { vi } from 'vitest';
+import { ApartmentForm } from './apartment-form';
+
+describe('ApartmentForm', () => {
+  it('initializes its fields from the apartment being edited', () => {
+    const fixture = TestBed.createComponent(ApartmentForm);
+    fixture.componentRef.setInput('apartment', {
+      id: 'apt-1',
+      name: 'T2 Paris 15',
+      address: '45 rue des Entrepreneurs, 75015 Paris',
+      purchasePrice: 250000,
+      description: 'Cinquième étage',
+    });
+    fixture.detectChanges();
+
+    const form = fixture.componentInstance;
+    expect(form.name()).toBe('T2 Paris 15');
+    expect(form.purchasePrice()).toBe(250000);
+  });
+
+  it('shows a validation error instead of emitting an incomplete apartment', () => {
+    const fixture = TestBed.createComponent(ApartmentForm);
+    const form = fixture.componentInstance;
+    const saved = vi.fn();
+    form.saved.subscribe(saved);
+
+    form.save();
+
+    expect(form.error()).toContain('Veuillez remplir tous les champs obligatoires');
+    expect(saved).not.toHaveBeenCalled();
+  });
+
+  it('emits a trimmed apartment draft when valid', () => {
+    const fixture = TestBed.createComponent(ApartmentForm);
+    const form = fixture.componentInstance;
+    const saved = vi.fn();
+    form.saved.subscribe(saved);
+    form.name.set(' T2 Paris 15 ');
+    form.address.set(' 45 rue des Entrepreneurs ');
+    form.purchasePrice.set(250000);
+    form.description.set(' Cinquième étage ');
+
+    form.save();
+
+    expect(saved).toHaveBeenCalledWith({
+      name: 'T2 Paris 15',
+      address: '45 rue des Entrepreneurs',
+      purchasePrice: 250000,
+      description: 'Cinquième étage',
+    });
+  });
+});

frontend/src/app/components/apartment-form/apartment-form.ts

@@ -0,0 +1,50 @@
+import { Component, effect, input, output, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { Apartment } from '../../services/apartment.service';
+
+@Component({
+  selector: 'app-apartment-form',
+  imports: [FormsModule, MatButtonModule, MatFormFieldModule, MatInputModule],
+  templateUrl: './apartment-form.html',
+  styleUrl: './apartment-form.css',
+})
+export class ApartmentForm {
+  readonly apartment = input<Apartment | null>(null);
+  readonly closed = output<void>();
+  readonly saved = output<Apartment>();
+
+  readonly name = signal('');
+  readonly address = signal('');
+  readonly purchasePrice = signal(0);
+  readonly description = signal('');
+  readonly error = signal('');
+
+  constructor() {
+    effect(() => this.resetForm(this.apartment()));
+  }
+
+  save(): void {
+    if (!this.name().trim() || !this.address().trim() || this.purchasePrice() <= 0) {
+      this.error.set('Veuillez remplir tous les champs obligatoires (Nom, Adresse, Prix > 0).');
+      return;
+    }
+
+    this.saved.emit({
+      name: this.name().trim(),
+      address: this.address().trim(),
+      purchasePrice: this.purchasePrice(),
+      description: this.description().trim(),
+    });
+  }
+
+  private resetForm(apartment: Apartment | null): void {
+    this.name.set(apartment?.name ?? '');
+    this.address.set(apartment?.address ?? '');
+    this.purchasePrice.set(apartment?.purchasePrice ?? 0);
+    this.description.set(apartment?.description ?? '');
+    this.error.set('');
+  }
+}

frontend/src/app/components/apartment-list/apartment-list.css

@@ -0,0 +1,150 @@
+:host {
+  display: block;
+}
+.page-heading {
+  margin-bottom: 30px;
+}
+.page-heading h1 {
+  margin-bottom: 8px;
+  font-size: clamp(2rem, 7vw, 3.2rem);
+  font-weight: 750;
+  letter-spacing: -0.055em;
+  line-height: 1.02;
+}
+.page-heading > div > p:last-child {
+  margin-bottom: 0;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+.page-heading .primary-action {
+  width: 100%;
+  margin-top: 20px;
+}
+.button-plus {
+  margin-right: 4px;
+  font-size: 1.25rem;
+  font-weight: 400;
+}
+.empty-state,
+.apartment-card {
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  background: var(--surface);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+.empty-state {
+  padding: 46px 22px;
+  text-align: center;
+}
+.empty-illustration {
+  display: grid;
+  width: 68px;
+  height: 68px;
+  place-items: center;
+  margin: 0 auto 22px;
+  border-radius: 16px;
+  background: var(--surface-accent);
+  color: var(--accent);
+}
+.empty-illustration svg {
+  width: 34px;
+  height: 34px;
+}
+.empty-state h2 {
+  margin-bottom: 8px;
+  font-size: 1.45rem;
+}
+.empty-state > p:not(.eyebrow) {
+  max-width: 440px;
+  margin: 0 auto 22px;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+.empty-state .mat-mdc-outlined-button {
+  --mdc-outlined-button-label-text-color: var(--accent);
+  --mdc-outlined-button-outline-color: var(--border-strong);
+  border-radius: 12px;
+}
+.apartments-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+.apartment-card {
+  padding: 20px;
+}
+.apartment-card-topline {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 14px;
+  margin-bottom: 22px;
+}
+.property-label {
+  margin: 0;
+}
+.property-value {
+  font-size: 1rem;
+  font-weight: 800;
+}
+.apt-info h2 {
+  margin-bottom: 9px;
+  font-size: 1.35rem;
+  letter-spacing: -0.035em;
+}
+.apt-address {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 12px;
+  color: var(--text-muted);
+  font-size: 0.88rem;
+  line-height: 1.5;
+}
+.apt-address svg {
+  width: 17px;
+  height: 17px;
+  flex: 0 0 17px;
+  margin-top: 2px;
+}
+.apt-desc {
+  margin-bottom: 0;
+  color: var(--text-muted);
+  font-size: 0.88rem;
+  line-height: 1.55;
+}
+.apt-actions {
+  display: flex;
+  gap: 4px;
+  justify-content: flex-end;
+  margin-top: 20px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+}
+.apt-actions .mat-mdc-button {
+  --mdc-text-button-label-text-color: var(--accent);
+}
+.apt-actions .danger-action.mat-mdc-button {
+  --mdc-text-button-label-text-color: var(--danger);
+}
+@media (min-width: 700px) {
+  .page-heading {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 28px;
+  }
+  .page-heading .primary-action {
+    width: auto;
+    flex: 0 0 auto;
+    margin-top: 0;
+  }
+  .apartments-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (min-width: 1180px) {
+  .apartments-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}

frontend/src/app/components/apartment-list/apartment-list.html

@@ -0,0 +1,70 @@
+<header class="page-heading">
+  <div>
+    <p class="eyebrow">Portefeuille</p>
+    <h1>Mes appartements</h1>
+    <p>Les biens rattachés à votre activité LMNP.</p>
+  </div>
+  <button mat-flat-button type="button" class="primary-action" (click)="addRequested.emit()">
+    <span class="button-plus" aria-hidden="true">+</span>Ajouter un appartement
+  </button>
+</header>
+
+@if (apartments().length === 0) {
+  <article class="empty-state">
+    <div class="empty-illustration" aria-hidden="true">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6">
+        <path d="m4 10 8-6 8 6v10H4z" />
+        <path d="M9 20v-6h6v6" />
+      </svg>
+    </div>
+    <p class="eyebrow">Commencez ici</p>
+    <h2>Aucun appartement enregistré</h2>
+    <p>Ajoutez votre premier bien pour construire votre portefeuille.</p>
+    <button mat-stroked-button type="button" (click)="addRequested.emit()">
+      Ajouter un appartement
+    </button>
+  </article>
+} @else {
+  <div class="apartments-grid">
+    @for (apt of apartments(); track apt.id) {
+      <article class="apartment-card">
+        <div class="apartment-card-topline">
+          <span class="property-label">Bien immobilier</span>
+          <span class="property-value">{{ apt.purchasePrice.toLocaleString('fr-FR') }} €</span>
+        </div>
+        <div class="apt-info">
+          <h2>{{ apt.name }}</h2>
+          <p class="apt-address">
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.8"
+              aria-hidden="true"
+            >
+              <path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z" />
+              <circle cx="12" cy="10" r="2.5" />
+            </svg>
+            {{ apt.address }}
+          </p>
+          @if (apt.description) {
+            <p class="apt-desc">{{ apt.description }}</p>
+          }
+        </div>
+        <div class="apt-actions">
+          <button mat-button type="button" (click)="editRequested.emit(apt)">Modifier</button>
+          @if (apt.id) {
+            <button
+              mat-button
+              type="button"
+              class="danger-action"
+              (click)="deleteRequested.emit(apt.id)"
+            >
+              Supprimer
+            </button>
+          }
+        </div>
+      </article>
+    }
+  </div>
+}

frontend/src/app/components/apartment-list/apartment-list.ts

@@ -0,0 +1,16 @@
+import { Component, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { Apartment } from '../../services/apartment.service';
+
+@Component({
+  selector: 'app-apartment-list',
+  imports: [MatButtonModule],
+  templateUrl: './apartment-list.html',
+  styleUrl: './apartment-list.css',
+})
+export class ApartmentList {
+  readonly apartments = input.required<Apartment[]>();
+  readonly addRequested = output<void>();
+  readonly editRequested = output<Apartment>();
+  readonly deleteRequested = output<string>();
+}

frontend/src/app/components/apartments-page/apartments-page.html

@@ -0,0 +1,16 @@
+<section class="page-section apartments-page">
+  @if (!showForm()) {
+    <app-apartment-list
+      [apartments]="apartments()"
+      (addRequested)="openAddForm()"
+      (editRequested)="openEditForm($event)"
+      (deleteRequested)="deleteRequested.emit($event)"
+    />
+  } @else {
+    <app-apartment-form
+      [apartment]="editingApartment()"
+      (closed)="closeForm()"
+      (saved)="saveApartment($event)"
+    />
+  }
+</section>

frontend/src/app/components/apartments-page/apartments-page.spec.ts

@@ -0,0 +1,49 @@
+import { TestBed } from '@angular/core/testing';
+import { vi } from 'vitest';
+import { ApartmentsPage } from './apartments-page';
+
+describe('ApartmentsPage', () => {
+  it('opens the form for the apartment selected for editing', () => {
+    const apartment = {
+      id: 'apt-1',
+      name: 'T2 Paris 15',
+      address: '45 rue des Entrepreneurs, 75015 Paris',
+      purchasePrice: 250000,
+      description: '',
+    };
+    const fixture = TestBed.createComponent(ApartmentsPage);
+    fixture.componentRef.setInput('apartments', [apartment]);
+    fixture.detectChanges();
+
+    const page = fixture.componentInstance;
+    page.openEditForm(apartment);
+
+    expect(page.showForm()).toBe(true);
+    expect(page.editingApartment()).toEqual(apartment);
+  });
+
+  it('emits the edited apartment together with its id', () => {
+    const apartment = {
+      id: 'apt-1',
+      name: 'T2 Paris 15',
+      address: '45 rue des Entrepreneurs, 75015 Paris',
+      purchasePrice: 250000,
+      description: '',
+    };
+    const fixture = TestBed.createComponent(ApartmentsPage);
+    fixture.componentRef.setInput('apartments', [apartment]);
+    fixture.detectChanges();
+    const page = fixture.componentInstance;
+    const apartmentSaved = vi.fn();
+    page.apartmentSaved.subscribe(apartmentSaved);
+    page.openEditForm(apartment);
+
+    page.saveApartment({ ...apartment, name: 'T2 rénové' });
+
+    expect(apartmentSaved).toHaveBeenCalledWith({
+      apartment: { ...apartment, name: 'T2 rénové' },
+      apartmentId: 'apt-1',
+    });
+    expect(page.showForm()).toBe(false);
+  });
+});

frontend/src/app/components/apartments-page/apartments-page.ts

@@ -0,0 +1,43 @@
+import { Component, input, output, signal } from '@angular/core';
+import { Apartment } from '../../services/apartment.service';
+import { ApartmentForm } from '../apartment-form/apartment-form';
+import { ApartmentList } from '../apartment-list/apartment-list';
+
+export interface ApartmentSaveRequest {
+  apartment: Apartment;
+  apartmentId?: string;
+}
+
+@Component({
+  selector: 'app-apartments-page',
+  imports: [ApartmentForm, ApartmentList],
+  templateUrl: './apartments-page.html',
+})
+export class ApartmentsPage {
+  readonly apartments = input.required<Apartment[]>();
+  readonly apartmentSaved = output<ApartmentSaveRequest>();
+  readonly deleteRequested = output<string>();
+
+  readonly showForm = signal(false);
+  readonly editingApartment = signal<Apartment | null>(null);
+
+  openAddForm(): void {
+    this.editingApartment.set(null);
+    this.showForm.set(true);
+  }
+
+  openEditForm(apartment: Apartment): void {
+    this.editingApartment.set(apartment);
+    this.showForm.set(true);
+  }
+
+  closeForm(): void {
+    this.showForm.set(false);
+    this.editingApartment.set(null);
+  }
+
+  saveApartment(apartment: Apartment): void {
+    this.apartmentSaved.emit({ apartment, apartmentId: this.editingApartment()?.id });
+    this.closeForm();
+  }
+}

frontend/src/app/components/brand-mark.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-brand-mark',
+  template: `
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+      <path d="m4 10 8-6 8 6v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z" />
+      <path d="M9 20v-6h6v6" />
+    </svg>
+  `,
+  styles: `
+    :host {
+      display: grid;
+      place-items: center;
+    }
+
+    svg {
+      width: 55%;
+      height: 55%;
+    }
+  `,
+  host: { 'aria-hidden': 'true' },
+})
+export class BrandMark {}

frontend/src/app/components/dashboard-page/dashboard-page.css

@@ -0,0 +1,195 @@
+:host {
+  display: block;
+}
+.page-section {
+  animation: page-in 180ms ease-out;
+}
+@keyframes page-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.page-heading {
+  margin-bottom: 30px;
+}
+.page-heading h1 {
+  margin-bottom: 8px;
+  font-size: clamp(2rem, 7vw, 3.2rem);
+  font-weight: 750;
+  letter-spacing: -0.055em;
+  line-height: 1.02;
+}
+.page-heading > div > p:last-child {
+  margin-bottom: 0;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+.status-pill,
+.role-chip {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  border-radius: 999px;
+  background: var(--surface-accent);
+  color: var(--accent-strong);
+  font-size: 0.76rem;
+  font-weight: 750;
+}
+.status-pill {
+  gap: 7px;
+  margin-top: 18px;
+  padding: 8px 12px;
+}
+.status-pill span {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+.feature-card {
+  padding: 22px;
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  background: var(--surface);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+.feature-card h2 {
+  margin-bottom: 9px;
+  font-size: 1.35rem;
+  letter-spacing: -0.035em;
+}
+.feature-card p:not(.eyebrow) {
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+.feature-card-primary {
+  display: grid;
+  gap: 18px;
+  border-color: transparent;
+  background: var(--surface-accent);
+}
+.feature-card-primary .mat-mdc-button {
+  --mdc-text-button-label-text-color: var(--accent-strong);
+  width: fit-content;
+  padding-inline: 0;
+  font-weight: 750;
+}
+.feature-icon {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  border-radius: 16px;
+  background: var(--surface);
+  color: var(--accent);
+}
+.feature-icon svg {
+  width: 24px;
+  height: 24px;
+}
+.user-profile {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.large-avatar {
+  display: grid;
+  width: 58px;
+  height: 58px;
+  flex: 0 0 58px;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--surface-accent);
+  color: var(--accent);
+  font-size: 1.25rem;
+  font-weight: 800;
+}
+.user-details {
+  min-width: 0;
+}
+.user-details h3 {
+  margin-bottom: 3px;
+  font-size: 1.15rem;
+}
+.user-email {
+  overflow: hidden;
+  margin-bottom: 11px;
+  font-size: 0.84rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.role-chip {
+  padding: 5px 9px;
+}
+.api-demo-section {
+  display: grid;
+  gap: 16px;
+}
+.api-actions .mat-mdc-outlined-button {
+  --mdc-outlined-button-label-text-color: var(--accent);
+  --mdc-outlined-button-outline-color: var(--border-strong);
+  border-radius: 12px;
+}
+.api-response-wrapper {
+  padding: 14px;
+  border-radius: 13px;
+  background: var(--surface-soft);
+}
+.api-response-wrapper > span {
+  display: block;
+  margin-bottom: 5px;
+  color: var(--text-subtle);
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+.api-response-code {
+  color: var(--accent-strong);
+  font-size: 0.83rem;
+  overflow-wrap: anywhere;
+}
+@media (min-width: 700px) {
+  .page-heading {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 28px;
+  }
+  .dashboard-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .feature-card-primary,
+  .api-demo-section {
+    grid-column: span 2;
+  }
+}
+@media (min-width: 960px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .feature-card-primary {
+    grid-column: span 2;
+    min-height: 250px;
+  }
+  .user-profile {
+    grid-column: span 1;
+  }
+  .api-demo-section {
+    grid-column: span 3;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+  }
+  .api-response-wrapper {
+    grid-column: 1 / -1;
+  }
+}

frontend/src/app/components/dashboard-page/dashboard-page.html

@@ -0,0 +1,54 @@
+<section class="page-section dashboard-page">
+  <header class="page-heading">
+    <div>
+      <p class="eyebrow">Bonjour {{ username() }}</p>
+      <h1>Tableau de bord</h1>
+      <p>Retrouvez rapidement les actions utiles à votre gestion locative.</p>
+    </div>
+    <span class="status-pill"><span></span>Espace sécurisé</span>
+  </header>
+  <div class="dashboard-grid">
+    <article class="feature-card feature-card-primary">
+      <div class="feature-icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+          <path d="M4 21V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16M2 21h20" />
+          <path d="M8 8h8M8 12h8M8 16h4" />
+        </svg>
+      </div>
+      <div>
+        <p class="eyebrow">Votre portefeuille</p>
+        <h2>{{ apartmentCount() }} appartement{{ apartmentCount() > 1 ? 's' : '' }}</h2>
+        <p>Centralisez les informations essentielles de vos biens.</p>
+      </div>
+      <button mat-button type="button" (click)="apartmentsRequested.emit()">
+        Gérer mes appartements
+      </button>
+    </article>
+    <article class="feature-card user-profile">
+      <div class="large-avatar">{{ userInitial() }}</div>
+      <div class="user-details">
+        <p class="eyebrow">Compte actif</p>
+        <h3>{{ username() }}</h3>
+        <p class="user-email">{{ email() }}</p>
+        <span class="role-chip">Bailleur connecté</span>
+      </div>
+    </article>
+    <article class="feature-card api-demo-section">
+      <div>
+        <p class="eyebrow">État du service</p>
+        <h2>Connexion au serveur</h2>
+        <p>Vérifiez que votre espace communique correctement avec le service sécurisé.</p>
+      </div>
+      <div class="api-actions">
+        <button mat-stroked-button type="button" (click)="connectionCheckRequested.emit()">
+          Tester la connexion
+        </button>
+      </div>
+      @if (helloMessage()) {
+        <div class="api-response-wrapper">
+          <span>Réponse du serveur</span><code class="api-response-code">{{ helloMessage() }}</code>
+        </div>
+      }
+    </article>
+  </div>
+</section>

frontend/src/app/components/dashboard-page/dashboard-page.ts

@@ -0,0 +1,18 @@
+import { Component, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-dashboard-page',
+  imports: [MatButtonModule],
+  templateUrl: './dashboard-page.html',
+  styleUrl: './dashboard-page.css',
+})
+export class DashboardPage {
+  readonly username = input.required<string>();
+  readonly email = input.required<string>();
+  readonly userInitial = input.required<string>();
+  readonly apartmentCount = input.required<number>();
+  readonly helloMessage = input.required<string>();
+  readonly apartmentsRequested = output<void>();
+  readonly connectionCheckRequested = output<void>();
+}

frontend/src/app/components/settings-page/settings-page.css

@@ -0,0 +1,150 @@
+:host {
+  display: block;
+}
+.page-section {
+  animation: page-in 180ms ease-out;
+}
+@keyframes page-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.page-heading {
+  margin-bottom: 30px;
+}
+.page-heading h1 {
+  margin-bottom: 8px;
+  font-size: clamp(2rem, 7vw, 3.2rem);
+  font-weight: 750;
+  letter-spacing: -0.055em;
+  line-height: 1.02;
+}
+.page-heading > div > p:last-child {
+  margin-bottom: 0;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+.settings-card {
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 22px;
+  background: var(--surface);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+.settings-card h2 {
+  margin-bottom: 9px;
+  font-size: 1.35rem;
+  letter-spacing: -0.035em;
+}
+.settings-card p:not(.eyebrow) {
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+.settings-copy {
+  display: flex;
+  gap: 15px;
+  padding: 22px;
+  border-bottom: 1px solid var(--border);
+}
+.settings-icon {
+  display: grid;
+  width: 46px;
+  height: 46px;
+  flex: 0 0 46px;
+  place-items: center;
+  border-radius: 16px;
+  background: var(--surface-accent);
+  color: var(--accent);
+}
+.settings-icon svg {
+  width: 24px;
+  height: 24px;
+}
+.settings-copy h2 {
+  margin-bottom: 5px;
+}
+.settings-copy p:last-child {
+  margin-bottom: 0;
+  font-size: 0.88rem;
+}
+.theme-options {
+  display: grid;
+  padding: 8px;
+}
+.theme-options mat-radio-button {
+  border-radius: 14px;
+}
+.theme-options mat-radio-button:hover {
+  background: var(--surface-soft);
+}
+.theme-option-copy {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 8px;
+}
+.theme-option-copy strong {
+  color: var(--text);
+}
+.theme-option-copy small {
+  margin-top: 3px;
+  color: var(--text-muted);
+  white-space: normal;
+}
+.session-settings {
+  margin-top: 16px;
+}
+.session-action {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 18px;
+  padding: 22px;
+}
+.session-action > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+.session-action strong,
+.session-action span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.session-action span {
+  margin-top: 3px;
+  color: var(--text-muted);
+  font-size: 0.82rem;
+}
+.session-action .mat-mdc-outlined-button {
+  --mdc-outlined-button-label-text-color: var(--danger);
+  --mdc-outlined-button-outline-color: var(--border-strong);
+  border-radius: 12px;
+}
+@media (min-width: 700px) {
+  .page-heading {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: 28px;
+  }
+}
+@media (min-width: 960px) {
+  .settings-card {
+    display: grid;
+    grid-template-columns: minmax(280px, 0.8fr) minmax(360px, 1.2fr);
+  }
+  .settings-copy {
+    border-right: 1px solid var(--border);
+    border-bottom: 0;
+  }
+  .session-action {
+    align-items: flex-start;
+    justify-content: center;
+  }
+}

frontend/src/app/components/settings-page/settings-page.html

@@ -0,0 +1,69 @@
+<section class="page-section settings-page">
+  <header class="page-heading">
+    <div>
+      <p class="eyebrow">Préférences</p>
+      <h1>Réglages</h1>
+      <p>Adaptez LMNP Organizer à votre façon de travailler.</p>
+    </div>
+  </header>
+  <article class="settings-card" aria-labelledby="appearance-heading">
+    <div class="settings-copy">
+      <span class="settings-icon" aria-hidden="true"
+        ><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+          <path d="M12 3a9 9 0 1 0 9 9c0-.5-.04-1-.12-1.47A7 7 0 0 1 12 3Z" /></svg
+      ></span>
+      <div>
+        <p class="eyebrow">Interface</p>
+        <h2 id="appearance-heading">Apparence</h2>
+        <p>Le réglage est mémorisé uniquement sur cet appareil.</p>
+      </div>
+    </div>
+    <mat-radio-group
+      class="theme-options"
+      aria-label="Thème de l'application"
+      [value]="themePreference()"
+      (change)="themePreferenceChanged.emit($event.value)"
+    >
+      <mat-radio-button value="light"
+        ><span class="theme-option-copy"
+          ><strong>Clair</strong><small>Une interface lumineuse et douce.</small></span
+        ></mat-radio-button
+      >
+      <mat-radio-button value="dark"
+        ><span class="theme-option-copy"
+          ><strong>Sombre</strong><small>Un contraste réduit en faible lumière.</small></span
+        ></mat-radio-button
+      >
+      <mat-radio-button value="system"
+        ><span class="theme-option-copy"
+          ><strong>Système</strong><small>Suit automatiquement votre appareil.</small></span
+        ></mat-radio-button
+      >
+    </mat-radio-group>
+  </article>
+  <article
+    class="settings-card session-settings"
+    data-testid="session-settings"
+    aria-labelledby="session-heading"
+  >
+    <div class="settings-copy">
+      <span class="settings-icon" aria-hidden="true"
+        ><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
+          <circle cx="12" cy="8" r="4" />
+          <path d="M4 21a8 8 0 0 1 16 0" /></svg
+      ></span>
+      <div>
+        <p class="eyebrow">Compte</p>
+        <h2 id="session-heading">Session</h2>
+        <p>Gérez la session ouverte sur cet appareil.</p>
+      </div>
+    </div>
+    <div class="session-action">
+      <div>
+        <strong>{{ username() }}</strong
+        ><span>{{ email() }}</span>
+      </div>
+      <button mat-stroked-button type="button" (click)="logoutRequested.emit()">Déconnexion</button>
+    </div>
+  </article>
+</section>

frontend/src/app/components/settings-page/settings-page.ts

@@ -0,0 +1,18 @@
+import { Component, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatRadioModule } from '@angular/material/radio';
+import { ThemePreference } from '../../services/theme.service';
+
+@Component({
+  selector: 'app-settings-page',
+  imports: [MatButtonModule, MatRadioModule],
+  templateUrl: './settings-page.html',
+  styleUrl: './settings-page.css',
+})
+export class SettingsPage {
+  readonly username = input.required<string>();
+  readonly email = input.required<string>();
+  readonly themePreference = input.required<ThemePreference>();
+  readonly themePreferenceChanged = output<ThemePreference>();
+  readonly logoutRequested = output<void>();
+}

frontend/src/app/components/sign-in-page/sign-in-page.css

@@ -0,0 +1,123 @@
+:host {
+  display: block;
+}
+.sign-in-shell {
+  min-height: 100vh;
+  background: var(--canvas);
+}
+.sign-in-panel {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  justify-content: center;
+  padding: 32px 24px;
+}
+.brand-lockup {
+  display: flex;
+  align-items: center;
+  gap: 13px;
+  margin-bottom: clamp(64px, 14vh, 120px);
+}
+.brand-lockup h1 {
+  margin-bottom: 2px;
+  font-size: 1.02rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+}
+.brand-lockup p {
+  margin-bottom: 0;
+  color: var(--text-muted);
+  font-size: 0.76rem;
+}
+.sign-in-copy {
+  max-width: 510px;
+}
+.sign-in-copy h2 {
+  max-width: 480px;
+  margin-bottom: 18px;
+  font-size: clamp(2.35rem, 9vw, 4.8rem);
+  font-weight: 750;
+  letter-spacing: -0.065em;
+  line-height: 0.98;
+}
+.sign-in-copy > p {
+  max-width: 470px;
+  margin-bottom: 30px;
+  color: var(--text-muted);
+  font-size: 1rem;
+  line-height: 1.7;
+}
+.sign-in-action {
+  width: 100%;
+  max-width: 360px;
+}
+.sign-in-action svg {
+  width: 19px;
+  height: 19px;
+  margin-left: 8px;
+}
+.security-note {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 17px 0 0;
+  color: var(--text-subtle);
+  font-size: 0.78rem;
+}
+.security-note span {
+  color: var(--accent);
+  font-size: 0.55rem;
+}
+.sign-in-story {
+  display: none;
+}
+@media (min-width: 960px) {
+  .sign-in-shell {
+    display: grid;
+    grid-template-columns: minmax(520px, 0.92fr) minmax(480px, 1.08fr);
+  }
+  .sign-in-panel {
+    padding: 56px clamp(56px, 7vw, 112px);
+  }
+  .sign-in-story {
+    display: grid;
+    min-height: 100vh;
+    place-items: end start;
+    padding: 64px;
+    background:
+      radial-gradient(circle at 75% 20%, rgba(99, 199, 188, 0.24), transparent 30%),
+      linear-gradient(145deg, #153d38, #0e2925 55%, #0a1d1a);
+    color: #effbf8;
+  }
+  .story-card {
+    max-width: 560px;
+  }
+  .story-kicker {
+    color: #7ed6cc;
+  }
+  .story-card h2 {
+    margin-bottom: 42px;
+    font-size: clamp(2.4rem, 4vw, 4.5rem);
+    letter-spacing: -0.06em;
+    line-height: 1;
+  }
+  .story-list {
+    display: grid;
+  }
+  .story-list > div {
+    display: grid;
+    grid-template-columns: 42px 1fr;
+    gap: 12px;
+    padding: 17px 0;
+    border-top: 1px solid rgba(255, 255, 255, 0.13);
+  }
+  .story-list span {
+    color: #7ed6cc;
+    font-size: 0.75rem;
+    font-weight: 800;
+  }
+  .story-list p {
+    margin-bottom: 0;
+    color: rgba(239, 251, 248, 0.76);
+  }
+}

frontend/src/app/components/sign-in-page/sign-in-page.html

@@ -0,0 +1,59 @@
+<main class="sign-in-shell">
+  <section class="sign-in-panel">
+    <div class="brand-lockup">
+      <app-brand-mark class="brand-mark" />
+      <div>
+        <h1>LMNP Organizer</h1>
+        <p>Gestion locative & fiscalité</p>
+      </div>
+    </div>
+
+    <div class="sign-in-copy">
+      <span class="context-label">Espace bailleur</span>
+      <h2>Votre gestion locative, enfin lisible.</h2>
+      <p>
+        Pilotez vos appartements et gardez vos démarches LMNP au même endroit, sur mobile comme sur
+        ordinateur.
+      </p>
+    </div>
+
+    <button mat-flat-button class="primary-action sign-in-action" (click)="loginRequested.emit()">
+      Se connecter avec OIDC
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        aria-hidden="true"
+      >
+        <path d="M5 12h14M13 6l6 6-6 6" />
+      </svg>
+    </button>
+
+    <p class="security-note">
+      <span aria-hidden="true">●</span>
+      Connexion sécurisée via OpenID Connect
+    </p>
+  </section>
+
+  <aside class="sign-in-story" aria-label="Aperçu du produit">
+    <div class="story-card">
+      <p class="story-kicker">Pensé pour aller à l'essentiel</p>
+      <h2>Un espace calme pour vos décisions de bailleur.</h2>
+      <div class="story-list">
+        <div>
+          <span>01</span>
+          <p>Vos biens accessibles en quelques gestes.</p>
+        </div>
+        <div>
+          <span>02</span>
+          <p>Une interface adaptée à chaque écran.</p>
+        </div>
+        <div>
+          <span>03</span>
+          <p>Vos outils LMNP réunis progressivement.</p>
+        </div>
+      </div>
+    </div>
+  </aside>
+</main>

frontend/src/app/components/sign-in-page/sign-in-page.ts

@@ -0,0 +1,13 @@
+import { Component, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { BrandMark } from '../brand-mark';
+
+@Component({
+  selector: 'app-sign-in-page',
+  imports: [BrandMark, MatButtonModule],
+  templateUrl: './sign-in-page.html',
+  styleUrl: './sign-in-page.css',
+})
+export class SignInPage {
+  readonly loginRequested = output<void>();
+}

frontend/src/app/components/workspace-navigation/workspace-navigation.css

@@ -0,0 +1,156 @@
+:host {
+  display: block;
+}
+.app-navigation {
+  position: fixed;
+  z-index: 20;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: calc(72px + env(safe-area-inset-bottom));
+  padding: 6px 10px env(safe-area-inset-bottom);
+  border-top: 1px solid var(--border);
+  background: color-mix(in srgb, var(--surface) 94%, transparent);
+  box-shadow: 0 -10px 30px rgba(25, 40, 35, 0.06);
+  backdrop-filter: blur(18px);
+}
+.sidebar-brand,
+.sidebar-user {
+  display: none;
+}
+.navigation-items {
+  display: grid;
+  height: 100%;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 4px;
+}
+.navigation-item.mat-mdc-button {
+  --mdc-text-button-label-text-color: var(--text-muted);
+  min-width: 0;
+  height: 60px;
+  border-radius: 14px;
+  padding: 5px 4px;
+  font-weight: 650;
+  letter-spacing: 0;
+}
+.navigation-item .mat-mdc-button-touch-target {
+  height: 60px;
+}
+.navigation-item svg {
+  width: 21px;
+  height: 21px;
+  margin: 0 auto 4px;
+}
+.navigation-item span {
+  display: block;
+  overflow: hidden;
+  font-size: 0.66rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.navigation-item.active {
+  --mdc-text-button-label-text-color: var(--accent);
+  background: var(--surface-accent);
+}
+@media (min-width: 960px) {
+  .app-navigation {
+    top: 0;
+    right: auto;
+    bottom: auto;
+    width: 256px;
+    height: 100vh;
+    padding: 26px 18px;
+    border-top: 0;
+    border-right: 1px solid var(--border);
+    background: var(--surface);
+    box-shadow: none;
+    backdrop-filter: none;
+  }
+  .sidebar-brand {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 0 8px 32px;
+  }
+  .sidebar-brand > div {
+    display: flex;
+    flex-direction: column;
+    font-size: 0.86rem;
+    line-height: 1.15;
+  }
+  .sidebar-brand strong {
+    font-size: 1rem;
+  }
+  .sidebar-brand span:last-child {
+    color: var(--text-muted);
+  }
+  .navigation-items {
+    display: flex;
+    height: auto;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .navigation-item.mat-mdc-button {
+    width: 100%;
+    height: 48px;
+    justify-content: flex-start;
+    border-radius: 13px;
+    padding: 0 14px;
+  }
+  .navigation-item .mat-mdc-button-touch-target {
+    height: 48px;
+  }
+  .navigation-item .mdc-button__label {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+  .navigation-item svg {
+    width: 20px;
+    height: 20px;
+    margin: 0;
+  }
+  .navigation-item span {
+    font-size: 0.86rem;
+  }
+  .sidebar-user {
+    position: absolute;
+    right: 18px;
+    bottom: 24px;
+    left: 18px;
+    display: grid;
+    grid-template-columns: 36px minmax(0, 1fr);
+    gap: 10px;
+    padding: 14px;
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    background: var(--surface-soft);
+  }
+  .sidebar-user > div:nth-child(2) {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .sidebar-user strong,
+  .sidebar-user span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .sidebar-user strong {
+    font-size: 0.82rem;
+  }
+  .sidebar-user span {
+    color: var(--text-muted);
+    font-size: 0.69rem;
+  }
+  .logout-action.mat-mdc-button {
+    --mdc-text-button-label-text-color: var(--text-muted);
+    grid-column: 1 / -1;
+    height: 34px;
+    border-top: 1px solid var(--border);
+    border-radius: 0;
+    font-size: 0.75rem;
+  }
+}

frontend/src/app/components/workspace-navigation/workspace-navigation.html

@@ -0,0 +1,84 @@
+<aside class="app-navigation" data-testid="primary-navigation">
+  <div class="sidebar-brand">
+    <app-brand-mark class="brand-mark" />
+    <div><strong>LMNP</strong><span>Organizer</span></div>
+  </div>
+
+  <nav class="navigation-items" aria-label="Navigation principale">
+    <button
+      mat-button
+      type="button"
+      class="navigation-item"
+      [class.active]="activeTab() === 'dashboard'"
+      [attr.aria-current]="activeTab() === 'dashboard' ? 'page' : null"
+      (click)="tabSelected.emit('dashboard')"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.8"
+        aria-hidden="true"
+      >
+        <rect x="3" y="3" width="7" height="7" rx="2" />
+        <rect x="14" y="3" width="7" height="7" rx="2" />
+        <rect x="3" y="14" width="7" height="7" rx="2" />
+        <rect x="14" y="14" width="7" height="7" rx="2" />
+      </svg>
+      <span>Tableau de bord</span>
+    </button>
+    <button
+      mat-button
+      type="button"
+      class="navigation-item"
+      [class.active]="activeTab() === 'apartments'"
+      [attr.aria-current]="activeTab() === 'apartments' ? 'page' : null"
+      (click)="tabSelected.emit('apartments')"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.8"
+        aria-hidden="true"
+      >
+        <path d="M4 21V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16" />
+        <path d="M2 21h20M8 7h2M14 7h2M8 11h2M14 11h2M8 15h2M14 15h2" />
+      </svg>
+      <span>Appartements</span>
+    </button>
+    <button
+      mat-button
+      type="button"
+      class="navigation-item"
+      [class.active]="activeTab() === 'settings'"
+      [attr.aria-current]="activeTab() === 'settings' ? 'page' : null"
+      (click)="tabSelected.emit('settings')"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.8"
+        aria-hidden="true"
+      >
+        <circle cx="12" cy="12" r="3" />
+        <path
+          d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06A1.7 1.7 0 0 0 15 19.4a1.7 1.7 0 0 0-1 .6 1.7 1.7 0 0 0-.4 1.1V21h-4v-.09A1.7 1.7 0 0 0 8.6 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15a1.7 1.7 0 0 0-.6-1 1.7 1.7 0 0 0-1.1-.4H3v-4h.09A1.7 1.7 0 0 0 4.6 8.6a1.7 1.7 0 0 0-.34-1.88l-.06-.06 2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-.6 1.7 1.7 0 0 0 .4-1.1V3h4v.09A1.7 1.7 0 0 0 15.4 4.6a1.7 1.7 0 0 0 1.88-.34l.06-.06 2.83 2.83-.06.06A1.7 1.7 0 0 0 19.4 9c.16.38.37.72.6 1 .3.3.7.45 1.1.45h.09v4h-.09c-.4 0-.8.15-1.1.45-.23.28-.44.62-.6 1Z"
+        />
+      </svg>
+      <span>Réglages</span>
+    </button>
+  </nav>
+
+  <div class="sidebar-user">
+    <div class="compact-avatar">{{ userInitial() }}</div>
+    <div>
+      <strong>{{ username() }}</strong
+      ><span>{{ email() }}</span>
+    </div>
+    <button mat-button type="button" class="logout-action" (click)="logoutRequested.emit()">
+      Déconnexion
+    </button>
+  </div>
+</aside>

frontend/src/app/components/workspace-navigation/workspace-navigation.ts

@@ -0,0 +1,20 @@
+import { Component, input, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { BrandMark } from '../brand-mark';
+
+export type WorkspaceTab = 'dashboard' | 'apartments' | 'settings';
+
+@Component({
+  selector: 'app-workspace-navigation',
+  imports: [BrandMark, MatButtonModule],
+  templateUrl: './workspace-navigation.html',
+  styleUrl: './workspace-navigation.css',
+})
+export class WorkspaceNavigation {
+  readonly activeTab = input.required<WorkspaceTab>();
+  readonly username = input.required<string>();
+  readonly email = input.required<string>();
+  readonly userInitial = input.required<string>();
+  readonly tabSelected = output<WorkspaceTab>();
+  readonly logoutRequested = output<void>();
+}