src/app/employee/delete/delete.component.html

@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>Delete {{employee.firstName}} {{employee.lastName}}</h2>
 <mat-dialog-content>Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}? This cant be undone.</mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button mat-dialog-close>Cancel</button>
-  <button mat-button [mat-dialog-close]="true" (click)="deleteEmployee(employee.id ?? 0)">Delete</button>
+  <button mat-button [mat-dialog-close]="false">Cancel</button>
+  <button mat-button mat-dialog-close (click)="deleteEmployee(employee.id ?? 0)" cdkFocusInitial>Delete</button>
 </mat-dialog-actions>

src/app/employee/table/table.component.html

@@ -1,4 +1,4 @@
-<section class="!space-y-6">
+<section class="!space-y-6 mb-6">
   @defer {
     @if (employees$ | async; as employees) {
       <div class="!space-y-6">
@@ -38,7 +38,7 @@
                     <mat-icon>edit</mat-icon>
                   </button>
                   <button mat-icon-button color="warn" [matTooltip]="'Delete employee'" (click)="openDeleteDialogue(employee)">
-                    🗑️
+                    <mat-icon>delete</mat-icon>
                   </button>
                 </td>
               </ng-container>

src/app/employee/table/table.component.ts

@@ -35,9 +35,6 @@ import EmployeeApiService from "../../services/employee-api.service";
     MatSortModule
   ],
   templateUrl: './table.component.html',
-  host: {
-    class: 'block w-full p-6'
-  },
   styleUrl: './table.component.css'
 })
 export class TableComponent implements OnInit{

src/app/qualification/table/table.component.html

@@ -1,42 +1,86 @@
-<div class="flex">
-  <h1 class="text-2xl font-semibold">Qualifications</h1>
-  <button mat-flat-button class="ml-auto bg-blue-600" (click)="openCreateModal()">
-    <mat-icon class="mr-2">add</mat-icon>
-    Create qualification
-  </button>
-</div>
-
-@if (qualifications$ | async; as qualifications) {
-  @if (qualifications) {
-    <table
-      mat-table
-      [dataSource]="qualifications"
-      class="mat-elevation-z8"
-    >
-      <ng-container matColumnDef="id">
-        <th mat-header-cell *matHeaderCellDef>ID</th>
-        <td mat-cell *matCellDef="let qualification">{{ qualification.id }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="skill">
-        <th mat-header-cell *matHeaderCellDef>Skill</th>
-        <td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td>
-      </ng-container>
-
-      <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef>Actions</th>
-        <td mat-cell *matCellDef="let qualification">
-          <button mat-icon-button color="primary" (click)="openEditModal(qualification)">
-            <mat-icon>edit</mat-icon>
+<section class="!space-y-6 mb-6">
+  @defer {
+    @if (qualifications$ | async; as qualifications) {
+      <div class="!space-y-6">
+        <div class="!flex !justify-between !items-center">
+          <h2 class="!text-2xl !font-semibold !text-gray-900">Qualifications</h2>
+          <button mat-flat-button color="primary" class="!bg-blue-600 !text-white" (click)="openCreateModal()">
+            <mat-icon class="!mr-2">add</mat-icon>
+            Add Qualification
           </button>
-          <button mat-icon-button color="warn">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </td>
-      </ng-container>
+        </div>
 
-      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-    </table>
+        @if (qualifications) {
+          <div class="overflow-x-auto rounded-lg bg-gray-50 p-4">
+            <table mat-table [dataSource]="qualifications" class="mat-elevation-z8">
+              <ng-container matColumnDef="id">
+                <th mat-header-cell *matHeaderCellDef>ID</th>
+                <td mat-cell *matCellDef="let qualification">{{ qualification.id }}</td>
+              </ng-container>
+
+              <ng-container matColumnDef="skill">
+                <th mat-header-cell *matHeaderCellDef>Skill</th>
+                <td mat-cell *matCellDef="let qualification">{{ qualification.skill }}</td>
+              </ng-container>
+
+              <ng-container matColumnDef="actions">
+                <th mat-header-cell *matHeaderCellDef>Actions</th>
+                <td mat-cell *matCellDef="let qualification">
+                  <button mat-icon-button color="primary" (click)="openEditModal(qualification)">
+                    <mat-icon>edit</mat-icon>
+                  </button>
+                  <button mat-icon-button color="warn">
+                    <mat-icon>delete</mat-icon>
+                  </button>
+                </td>
+              </ng-container>
+
+              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+              <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+            </table>
+          </div>
+        } @else {
+          <mat-card class="!text-center !py-8">
+            <mat-card-content>
+              <mat-icon class="!w-12 !h-12 !text-gray-400 !mb-4">school</mat-icon>
+              <p class="!text-gray-600">No qualifications found</p>
+            </mat-card-content>
+          </mat-card>
+        }
+      </div>
+    }
+  } @placeholder {
+    <div class="!space-y-6">
+      <div class="!animate-pulse">
+        <div class="!flex !justify-between !items-center !mb-8">
+          <div class="!h-8 !bg-gray-200 !rounded !w-1/4"></div>
+          <div class="!h-10 !bg-gray-200 !rounded !w-32"></div>
+        </div>
+        <div class="!bg-gray-50 !p-4 !rounded-lg">
+          <div class="!space-y-4">
+            <div class="!h-10 !bg-gray-200 !rounded"></div>
+            @for(i of [1,2,3]; track i) {
+              <div class="!h-16 !bg-white !rounded-lg !shadow-sm"></div>
+            }
+          </div>
+        </div>
+      </div>
+    </div>
+  } @error {
+    <mat-card class="!bg-red-50 !border !border-red-100">
+      <mat-card-content class="!p-4">
+        <div class="!flex !items-center !gap-4 !text-red-800">
+          <mat-icon class="!text-red-500">error_outline</mat-icon>
+          <div>
+            <h3 class="!font-medium !mb-1">Error loading qualifications</h3>
+            <p class="!text-sm !text-red-700">Please try refreshing the page.</p>
+          </div>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  } @loading (minimum 500ms) {
+    <div class="!flex !justify-center !items-center !py-12">
+      <mat-spinner diameter="48" class="!text-blue-600"></mat-spinner>
+    </div>
   }
-}
+</section>

src/app/qualification/table/table.component.ts

@@ -1,7 +1,7 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {Observable} from "rxjs";
 import {Qualification} from "../Qualification";
-import {AsyncPipe} from "@angular/common";
+import {AsyncPipe, NgFor} from "@angular/common";
 import {
   MatCell, MatCellDef,
   MatColumnDef,
@@ -17,11 +17,14 @@ import {CreateComponent} from "../create/create.component";
 import {MatIcon} from "@angular/material/icon";
 import {MatButton, MatIconButton} from "@angular/material/button";
 import {EditComponent} from "../edit/edit.component";
+import {MatCard, MatCardContent} from "@angular/material/card";
+import {MatProgressSpinner} from "@angular/material/progress-spinner";
 
 @Component({
   selector: 'app-qualifications',
   imports: [
     AsyncPipe,
+    NgFor,
     MatTable,
     MatHeaderCell,
     MatColumnDef,
@@ -34,7 +37,10 @@ import {EditComponent} from "../edit/edit.component";
     MatRowDef,
     MatIcon,
     MatIconButton,
-    MatButton
+    MatButton,
+    MatCard,
+    MatCardContent,
+    MatProgressSpinner
   ],
   templateUrl: './table.component.html',
   styleUrl: './table.component.css'