init page issues

src/app/app.routes.ts

@@ -1,5 +1,6 @@
 import { Routes } from '@angular/router';
 import { Home } from './home/home';
+import { Issues } from './issues/issues';
 import { Projects } from './projects/projects';
 
 export const routes: Routes = [
@@ -7,5 +8,6 @@ export const routes: Routes = [
   { path: 'home', component: Home },
   { path: 'project', component: Projects },
   { path: 'projects', redirectTo: 'project' },
+  { path: 'issues', component: Issues },
   { path: '**', redirectTo: 'home' },
 ];

src/app/issues/issues.css

@@ -0,0 +1,72 @@
+: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/issues/issues.html

@@ -0,0 +1,32 @@
+<header class="page-header">
+  <div>
+    <h1>Issues</h1>
+    <p>Suivi des tickets et anomalies du projet.</p>
+  </div>
+  <button type="button" class="create-button" (click)="createIssue()">
+    Creer
+  </button>
+</header>
+
+<section class="table-wrapper" aria-label="Tableau des issues">
+  <table>
+    <thead>
+      <tr>
+        <th>Titre</th>
+        <th>Priorite</th>
+        <th>Statut</th>
+        <th>Assignee</th>
+      </tr>
+    </thead>
+    <tbody>
+      @for (issue of issues(); track issue.id) {
+        <tr>
+          <td>{{ issue.title }}</td>
+          <td>{{ issue.priority }}</td>
+          <td>{{ issue.status }}</td>
+          <td>{{ issue.assignee }}</td>
+        </tr>
+      }
+    </tbody>
+  </table>
+</section>

src/app/issues/issues.spec.ts

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

src/app/issues/issues.ts

@@ -0,0 +1,56 @@
+import { Component, signal } from '@angular/core';
+
+type Issue = {
+  id: number;
+  title: string;
+  priority: 'Basse' | 'Moyenne' | 'Haute';
+  status: 'Ouverte' | 'En cours' | 'Nouvelle';
+  assignee: string;
+};
+
+@Component({
+  selector: 'app-issues',
+  imports: [],
+  templateUrl: './issues.html',
+  styleUrl: './issues.css',
+})
+export class Issues {
+  protected readonly issues = signal<Issue[]>([
+    {
+      id: 1,
+      title: 'Bug affichage menu mobile',
+      priority: 'Haute',
+      status: 'Ouverte',
+      assignee: 'Marie',
+    },
+    {
+      id: 2,
+      title: 'Erreur validation formulaire projet',
+      priority: 'Moyenne',
+      status: 'En cours',
+      assignee: 'Nabil',
+    },
+    {
+      id: 3,
+      title: 'Mise a jour message de bienvenue',
+      priority: 'Basse',
+      status: 'Ouverte',
+      assignee: 'Sonia',
+    },
+  ]);
+
+  private nextId = 4;
+
+  protected createIssue(): void {
+    const newIssue: Issue = {
+      id: this.nextId,
+      title: `Nouvelle issue ${this.nextId}`,
+      priority: 'Moyenne',
+      status: 'Nouvelle',
+      assignee: 'A definir',
+    };
+
+    this.issues.update((currentIssues) => [...currentIssues, newIssue]);
+    this.nextId += 1;
+  }
+}

src/app/menu/menu.ts

@@ -11,5 +11,6 @@ export class Menu {
   protected readonly menuItems = [
     { label: 'Accueil', path: '/home' },
     { label: 'Projet', path: '/project' },
+    { label: 'Issues', path: '/issues' },
   ];
 }