init page projet

src/app/projects/projects.css

@@ -0,0 +1,71 @@
+:host {
+  display: block;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.page-header h1 {
+  margin: 0;
+  font-size: 2rem;
+}
+
+.page-header p {
+  margin: 0.5rem 0 1.5rem;
+  color: #4b5563;
+}
+
+.create-button {
+  border: none;
+  border-radius: 0.5rem;
+  background-color: #2563eb;
+  color: #ffffff;
+  padding: 0.65rem 1rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.create-button:hover {
+  background-color: #1d4ed8;
+}
+
+.table-wrapper {
+  background-color: #ffffff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.75rem;
+  overflow-x: auto;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th,
+td {
+  padding: 0.85rem 1rem;
+  text-align: left;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+th {
+  font-size: 0.85rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: #6b7280;
+  background-color: #f9fafb;
+}
+
+tbody tr:last-child td {
+  border-bottom: none;
+}
+
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+  }
+}

src/app/projects/projects.html

@@ -0,0 +1,32 @@
+<header class="page-header">
+  <div>
+    <h1>Projets</h1>
+    <p>Vue d'ensemble des projets actifs.</p>
+  </div>
+  <button type="button" class="create-button" (click)="createProject()">
+    Nouveau projet
+  </button>
+</header>
+
+<section class="table-wrapper" aria-label="Tableau des projets">
+  <table>
+    <thead>
+      <tr>
+        <th>Nom</th>
+        <th>Responsable</th>
+        <th>Statut</th>
+        <th>Progression</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (project of projects(); track project.id) {
+        <tr>
+          <td>{{ project.name }}</td>
+          <td>{{ project.owner }}</td>
+          <td>{{ project.status }}</td>
+          <td>{{ project.progress }}%</td>
+        </tr>
+      }
+    </tbody>
+  </table>
+</section>

src/app/projects/projects.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { Projects } from './projects';
+
+describe('Projects', () => {
+  let component: Projects;
+  let fixture: ComponentFixture<Projects>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Projects],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(Projects);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/projects/projects.ts

@@ -0,0 +1,38 @@
+import { Component, signal } from '@angular/core';
+
+type Project = {
+  id: number;
+  name: string;
+  owner: string;
+  status: 'Actif' | 'En attente' | 'Nouveau';
+  progress: number;
+};
+
+@Component({
+  selector: 'app-projects',
+  imports: [],
+  templateUrl: './projects.html',
+  styleUrl: './projects.css',
+})
+export class Projects {
+  protected readonly projects = signal<Project[]>([
+    { id: 1, name: 'Refonte Interface', owner: 'Marie', status: 'Actif', progress: 70 },
+    { id: 2, name: 'API Inventaire', owner: 'Nabil', status: 'En attente', progress: 45 },
+    { id: 3, name: 'Pipeline CI', owner: 'Sonia', status: 'Actif', progress: 90 },
+  ]);
+
+  private nextId = 4;
+
+  protected createProject(): void {
+    const newProject: Project = {
+      id: this.nextId,
+      name: `Nouveau projet ${this.nextId}`,
+      owner: 'A definir',
+      status: 'Nouveau',
+      progress: 0,
+    };
+
+    this.projects.update((currentProjects) => [...currentProjects, newProject]);
+    this.nextId += 1;
+  }
+}