feat: add qualifications management component and routes

src/app/app.routes.ts

@@ -6,6 +6,7 @@ import { QualifikatonBearbeitenViewComponent } from "./components/qualifikaton-b
 import { MitarbeiterBearbeitenViewComponent } from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component";
 import { AuthGuard } from "./service/auth.service";
 import { MitarbeiterErstellenComponent } from "./components/mitarbeiter-erstellen/mitarbeiter-erstellen.component";
+import { QualifikationsverwaltungComponent } from "./components/qualifikationsverwaltung/qualifikationsverwaltung.component";
 
 export const routes: Routes = [
   {
@@ -27,6 +28,11 @@ export const routes: Routes = [
     component: MitarbeiterBearbeitenViewComponent,
     canActivate: [AuthGuard],
   },
+  {
+    path: "qualifikationsverwaltung",
+    component: QualifikationsverwaltungComponent,
+    canActivate: [AuthGuard],
+  },
   {
     path: "mitarbeiterdetails",
     component: EmployeeDetailComponent,

src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.css

@@ -0,0 +1,90 @@
+body {
+  font-family: sans-serif;
+  margin: 0;
+  padding: 20px;
+  background-color: #f0f0f0;
+}
+
+.container {
+  width: 100%;
+  margin: 0 auto;
+  background-color: #fff;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 20px;
+}
+
+.search-bar {
+  display: flex;
+  margin-bottom: 10px;
+  align-items: center;
+}
+
+.search-bar input[type="text"] {
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.search-bar button {
+  padding: 10px 15px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.add-button {
+  background-color: #07af16;
+  color: #fff;
+  padding: 10px 15px;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  float: left;
+  margin-bottom: 10px;
+}
+
+.employee-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+.employee-table th,
+.employee-table td {
+  padding: 12px 15px;
+  border: 1px solid #ddd;
+  text-align: left;
+}
+
+.employee-table th {
+  background-color: #f0f0f0;
+  font-weight: bold;
+}
+
+.sortable {
+  cursor: pointer;
+}
+
+.logout-button {
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  float: right;
+}
+
+.logout-button img {
+  width: 20px;
+  height: 20px;
+}

src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.html

@@ -0,0 +1,47 @@
+<div class="container">
+  <div class="header">
+    <div class="dropdown position-absolute top-0 end-0 m-3">
+      <button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
+        aria-expanded="false">
+        <img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
+      </button>
+      <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
+        <li><a class="dropdown-item" href="/logout">Log out</a></li>
+      </ul>
+    </div>
+    <h1>Qualifications</h1>
+  </div>
+
+  <div class="header-actions">
+    <form [formGroup]="searchForm">
+      <div class="search-bar">
+        <input type="text" placeholder="Search employee" formControlName="search">
+        <button (click)="submit()">Search</button>
+      </div>
+      <p class="text-body-tertiary">Search for a propertiy of a Qualification. eg. First Name</p>
+    </form>
+    <button (click)="createEmployee()" class="add-button">Add qualification</button>
+  </div>
+
+  <table class="employee-table">
+    <thead>
+      <tr>
+        <th><span class="sortable">First Name</span></th>
+        <th>Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      @if (skills) {
+      @for (skill of skills; track skill) {
+      <tr>
+        <td>{{ skill.skill }}</td>
+        <td>
+          <button class="btn btn-primary me-2" (click)="editSkill(skill.id)">Edit</button>
+          <button class="btn btn-danger" (click)="deleteSkill(skill.id)">Delete</button>
+        </td>
+      </tr>
+      }
+      }
+    </tbody>
+  </table>
+</div>

src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.spec.ts

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

src/app/components/qualifikationsverwaltung/qualifikationsverwaltung.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-qualifikationsverwaltung',
+  standalone: true,
+  imports: [],
+  templateUrl: './qualifikationsverwaltung.component.html',
+  styleUrl: './qualifikationsverwaltung.component.css'
+})
+export class QualifikationsverwaltungComponent {
+
+}