Enhance employee and qualification forms with hints and improved layouts

- Added hints to input fields in create and edit employee forms for better user guidance.
- Updated the layout of dialog actions in employee and qualification forms for improved usability.
- Enhanced delete confirmation dialogs for qualifications and employees with better styling and error handling.
- Improved the display of employee details and qualifications with better formatting and structure.

These changes aim to improve user experience and accessibility across the application.

src/app/employee/create/create.component.html

@@ -6,12 +6,14 @@
         <mat-form-field class="!w-full">
           <mat-label>First Name</mat-label>
           <input matInput formControlName="firstName" required>
+          <mat-hint>Enter the first name</mat-hint>
           <mat-error *ngIf="errors['firstName']">{{errors['firstName']}}</mat-error>
         </mat-form-field>
 
         <mat-form-field class="!w-full">
           <mat-label>Last Name</mat-label>
           <input matInput formControlName="lastName" required>
+          <mat-hint>Enter the last name</mat-hint>
           <mat-error *ngIf="errors['lastName']">{{errors['lastName']}}</mat-error>
         </mat-form-field>
       </div>
@@ -19,6 +21,7 @@
       <mat-form-field class="!w-full">
         <mat-label>Street</mat-label>
         <input matInput formControlName="street" required>
+        <mat-hint>Enter the street address</mat-hint>
         <mat-error *ngIf="errors['street']">{{errors['street']}}</mat-error>
       </mat-form-field>
 
@@ -26,12 +29,14 @@
         <mat-form-field class="!w-full">
           <mat-label>City</mat-label>
           <input matInput formControlName="city" required>
+          <mat-hint>Enter the city</mat-hint>
           <mat-error *ngIf="errors['city']">{{errors['city']}}</mat-error>
         </mat-form-field>
 
         <mat-form-field class="!w-1/2">
           <mat-label>Postcode</mat-label>
           <input matInput formControlName="postcode" minlength="5" maxlength="5" type="number" required>
+          <mat-hint>Enter postcode</mat-hint>
           <mat-error *ngIf="errors['postcode']">{{errors['postcode']}}</mat-error>
         </mat-form-field>
       </div>
@@ -39,11 +44,13 @@
       <mat-form-field class="!w-full">
         <mat-label>Phone</mat-label>
         <input matInput formControlName="phone" required>
+        <mat-hint>Enter the phone number</mat-hint>
         <mat-error *ngIf="errors['phone']">{{errors['phone']}}</mat-error>
       </mat-form-field>
 
       <mat-form-field class="!w-full">
         <mat-label>Qualifications</mat-label>
+        <mat-hint>Select the qualifications</mat-hint>
         <mat-select formControlName="qualifications" multiple>
           <mat-option *ngFor="let qualification of qualifications" [value]="qualification.id">
             {{qualification.skill}}
@@ -52,9 +59,18 @@
         <mat-error *ngIf="errors['qualifications']">{{errors['qualifications']}}</mat-error>
       </mat-form-field>
 
-      <mat-dialog-actions align="end">
-        <button mat-button mat-dialog-close>Cancel</button>
-        <button mat-flat-button color="primary" type="submit">Submit</button>
+      <mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3">
+        <button mat-button 
+                mat-dialog-close
+                class="text-sm md:text-base hover:bg-gray-100 py-2 px-6 rounded-md w-full sm:flex-1">
+          Cancel
+        </button>
+        <button mat-flat-button 
+                color="primary" 
+                type="submit"
+                class="!ml-0 text-sm md:text-base py-2 px-6 rounded-md w-full sm:flex-1">
+          Submit
+        </button>
       </mat-dialog-actions>
     </div>
   </form>

src/app/employee/create/create.component.ts

@@ -1,6 +1,6 @@
 import {Component, inject, OnInit} from '@angular/core';
 import {AbstractControl, FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatFormField, MatHint, MatLabel} from "@angular/material/form-field";
 import {MatError, MatInput} from "@angular/material/input";
 import {MatButton} from "@angular/material/button";
 import {
@@ -36,6 +36,7 @@ import {debounceTime} from "rxjs";
     MatSelect,
     NgForOf,
     MatError,
+    MatHint
   ],
   templateUrl: './create.component.html',
   standalone: true,

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

@@ -1,6 +1,33 @@
-<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]="false">Cancel</button>
-  <button mat-button mat-dialog-close (click)="deleteEmployee(employee.id ?? 0)" cdkFocusInitial>Delete</button>
-</mat-dialog-actions>
+<h2 mat-dialog-title class="text-xl md:text-2xl font-semibold text-gray-800 mb-3 md:mb-4">Delete Employee</h2>
+
+<mat-dialog-content class="!px-3 md:!px-6">
+  <div class="w-full min-w-[280px] md:min-w-[400px] space-y-4 md:space-y-6">
+    <div class="bg-amber-50 p-3 md:p-4 rounded-lg border border-amber-200">
+      <div class="flex items-start space-x-2 md:space-x-3">
+        <mat-icon class="text-amber-600 text-xl md:text-2xl">warning</mat-icon>
+        <div>
+          <p class="text-gray-800 font-medium text-sm md:text-base">
+            Are you sure you want to delete {{employee.firstName}} {{employee.lastName}}?
+          </p>
+          <p class="text-gray-600 mt-1 text-xs md:text-sm">This action cannot be undone.</p>
+        </div>
+      </div>
+    </div>
+
+    <mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3">
+      <button mat-button 
+              [mat-dialog-close]="false"
+              class="text-sm md:text-base hover:bg-gray-100 py-2 px-6 rounded-md w-full sm:flex-1">
+        Cancel
+      </button>
+      <button mat-flat-button 
+              color="warn"
+              (click)="deleteEmployee(employee.id ?? 0)"
+              mat-dialog-close
+              class="!ml-0 text-sm md:text-base py-2 px-6 rounded-md w-full sm:flex-1"
+              cdkFocusInitial>
+        Delete
+      </button>
+    </mat-dialog-actions>
+  </div>
+</mat-dialog-content>

src/app/employee/delete/delete.component.ts

@@ -8,6 +8,7 @@ import {
   MatDialogTitle
 } from "@angular/material/dialog";
 import {MatButton} from "@angular/material/button";
+import {MatIcon} from "@angular/material/icon";
 import EmployeeApiService from "../../services/employee-api.service";
 
 @Component({
@@ -17,7 +18,8 @@ import EmployeeApiService from "../../services/employee-api.service";
     MatDialogTitle,
     MatDialogActions,
     MatButton,
-    MatDialogClose
+    MatDialogClose,
+    MatIcon
   ],
   templateUrl: './delete.component.html',
   standalone: true,

src/app/employee/details/details.component.html

@@ -1,27 +1,68 @@
-<h2 mat-dialog-title>{{ employee.firstName }} {{ employee.lastName }}</h2>
+<h2 mat-dialog-title class="text-2xl font-semibold text-gray-800 mb-4">Employee Details</h2>
 
-<mat-dialog-content>
-  <div class="flex">
-    <div class="flex-1">
-      <p><strong>ID:</strong> {{ employee.id }}</p>
-      <p><strong>First Name:</strong> {{ employee.firstName }}</p>
-      <p><strong>Last Name:</strong> {{ employee.lastName }}</p>
-      <p><strong>Phone:</strong> {{ employee.phone }}</p>
-      <p><strong>Postcode:</strong> {{ employee.postcode }}</p>
-      <p><strong>Street:</strong> {{ employee.street }}</p>
-      <p><strong>City:</strong> {{ employee.city }}</p>
-      <p><strong>Skills:</strong></p>
-      <ul>
-        @for (skill of employee.skillSet; track null) {
-          <li> <strong>•</strong> {{skill.skill}}</li>
+<mat-dialog-content class="!px-4 sm:!px-6">
+  <div class="w-full min-w-[280px] sm:min-w-[500px] space-y-6 sm:space-y-8">
+    <div class="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left space-y-4 sm:space-y-0 sm:space-x-4">
+      <div class="h-20 w-20 sm:h-16 sm:w-16 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+        <span class="text-blue-600 text-2xl sm:text-xl font-medium">
+          {{ employee.firstName?.charAt(0) ?? '' }}{{ employee.lastName?.charAt(0) ?? '' }}
+        </span>
+      </div>
+      <div>
+        <h3 class="text-xl font-medium text-gray-900">{{ employee.firstName }} {{ employee.lastName }}</h3>
+        <p class="text-gray-500">ID: {{ employee.id }}</p>
+      </div>
+    </div>
+
+    <div class="space-y-3 sm:space-y-4">
+      <h4 class="text-lg font-medium text-gray-900 mb-2 sm:mb-3">Contact Information</h4>
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div class="space-y-1">
+          <p class="text-sm text-gray-500">Phone</p>
+          <p class="text-gray-900 break-all">{{ employee.phone }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="space-y-3 sm:space-y-4">
+      <h4 class="text-lg font-medium text-gray-900 mb-2 sm:mb-3">Address</h4>
+      <div class="bg-gray-50 p-3 sm:p-4 rounded-lg space-y-3">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
+          <div class="space-y-1">
+            <p class="text-sm text-gray-500">Street</p>
+            <p class="text-gray-900 break-words">{{ employee.street }}</p>
+          </div>
+          <div class="space-y-1">
+            <p class="text-sm text-gray-500">City</p>
+            <p class="text-gray-900">{{ employee.city }}</p>
+          </div>
+        </div>
+        <div class="space-y-1">
+          <p class="text-sm text-gray-500">Postcode</p>
+          <p class="text-gray-900">{{ employee.postcode }}</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="space-y-3 sm:space-y-4">
+      <h4 class="text-lg font-medium text-gray-900 mb-2 sm:mb-3">Qualifications</h4>
+      <div class="flex flex-wrap gap-2">
+        @for (skill of employee.skillSet; track skill.id) {
+          <div class="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">
+            {{skill.skill}}
+          </div>
         } @empty {
-          <li><strong>-</strong></li>
+          <p class="text-gray-500 italic">No qualifications added</p>
         }
-      </ul>
+      </div>
     </div>
   </div>
 </mat-dialog-content>
 
-<mat-dialog-actions align="end" class="mt-4">
-  <button mat-button (click)="closeModal()">Close</button>
+<mat-dialog-actions align="end" class="!px-4 sm:!px-6 !py-4 !mt-4 border-t">
+  <button mat-button 
+          (click)="closeModal()"
+          class="text-sm md:text-base hover:bg-gray-100 py-2 px-6 rounded-md w-full">
+    Close
+  </button>
 </mat-dialog-actions>

src/app/employee/edit/edit.component.html

@@ -6,34 +6,40 @@
         <mat-form-field class="!w-full">
           <mat-label>First Name</mat-label>
           <input matInput formControlName="firstName" required>
+          <mat-hint>Enter the first name</mat-hint>
         </mat-form-field>
 
         <mat-form-field class="!w-full">
           <mat-label>Last Name</mat-label>
           <input matInput formControlName="lastName" required>
+          <mat-hint>Enter the last name</mat-hint>
         </mat-form-field>
       </div>
 
       <mat-form-field class="!w-full">
         <mat-label>Street</mat-label>
         <input matInput formControlName="street" required>
+        <mat-hint>Enter the street address</mat-hint>
       </mat-form-field>
 
       <div class="flex gap-x-4">
         <mat-form-field class="!w-full">
           <mat-label>City</mat-label>
           <input matInput formControlName="city" required>
+          <mat-hint>Enter the city</mat-hint>
         </mat-form-field>
 
         <mat-form-field class="!w-1/2">
           <mat-label>Postcode</mat-label>
           <input matInput formControlName="postcode" minlength="5" maxlength="5" type="number" required>
+          <mat-hint>Enter postcode</mat-hint>
         </mat-form-field>
       </div>
 
       <mat-form-field class="!w-full">
         <mat-label>Phone</mat-label>
         <input matInput formControlName="phone" required>
+        <mat-hint>Enter phone number</mat-hint>
       </mat-form-field>
 
       <mat-form-field class="!w-full">
@@ -43,11 +49,21 @@
             {{qualification.skill}}
           </mat-option>
         </mat-select>
+        <mat-hint>Select qualifications</mat-hint>
       </mat-form-field>
 
-      <mat-dialog-actions align="end">
-        <button mat-button mat-dialog-close>Cancel</button>
-        <button mat-flat-button color="primary" type="submit">Submit</button>
+      <mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3">
+        <button mat-button 
+                mat-dialog-close
+                class="text-sm md:text-base hover:bg-gray-100 py-2 px-6 rounded-md w-full sm:flex-1">
+          Cancel
+        </button>
+        <button mat-flat-button 
+                color="primary" 
+                type="submit"
+                class="!ml-0 text-sm md:text-base py-2 px-6 rounded-md w-full sm:flex-1">
+          Submit
+        </button>
       </mat-dialog-actions>
     </div>
   </form>

src/app/employee/edit/edit.component.ts

@@ -9,7 +9,7 @@ import {
   MatDialogTitle
 } from "@angular/material/dialog";
 import {NgForOf, NgIf} from "@angular/common";
-import {MatFormField} from "@angular/material/form-field";
+import {MatFormField, MatHint} from "@angular/material/form-field";
 import {MatInput, MatLabel} from "@angular/material/input";
 import {MatButton} from "@angular/material/button";
 import {Employee} from "../Employee";
@@ -33,7 +33,8 @@ import {MatOption, MatSelect} from "@angular/material/select";
     MatLabel,
     MatSelect,
     MatOption,
-    NgForOf
+    NgForOf,
+    MatHint
   ],
   templateUrl: './edit.component.html',
   standalone: true,

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

@@ -14,7 +14,7 @@
           <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
             <table mat-table [dataSource]="employees" matSort class="!w-full">
               <ng-container matColumnDef="name">
-                <th mat-header-cell *matHeaderCellDef class="!text-left"> Name</th>
+                <th mat-header-cell *matHeaderCellDef class="!text-left !w-full"> Name</th>
                 <td mat-cell *matCellDef="let employee" class="!py-4">
                   <div class="!flex !items-center">
                     <div class="!h-10 !w-10 !rounded-full !bg-blue-100 !flex !items-center !justify-center !mr-3">
@@ -35,16 +35,22 @@
               </ng-container>
 
               <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef class="!text-right"> Actions</th>
-                <td mat-cell *matCellDef="let employee" class="!text-right !py-4">
-                  <button mat-icon-button color="primary" [matTooltip]="'Edit employee'" class="!mr-2"
-                          (click)="showEditEmployeeModal(employee)">
-                    <mat-icon>edit</mat-icon>
-                  </button>
-                  <button mat-icon-button color="warn" [matTooltip]="'Delete employee'"
-                          (click)="openDeleteDialogue(employee)">
-                    <mat-icon>delete</mat-icon>
-                  </button>
+                <th mat-header-cell *matHeaderCellDef class="!text-right !w-[120px]"> Actions</th>
+                <td mat-cell *matCellDef="let employee" class="!text-right !py-4 !whitespace-nowrap">
+                  <div class="!flex !justify-end !items-center !gap-1">
+                    <button mat-icon-button 
+                            color="primary" 
+                            [matTooltip]="'Edit employee'"
+                            (click)="showEditEmployeeModal(employee)">
+                      <mat-icon>edit</mat-icon>
+                    </button>
+                    <button mat-icon-button 
+                            color="warn" 
+                            [matTooltip]="'Delete employee'"
+                            (click)="openDeleteDialogue(employee)">
+                      <mat-icon>delete</mat-icon>
+                    </button>
+                  </div>
                 </td>
               </ng-container>
 

src/app/qualification/create/create.component.html

@@ -1,24 +1,43 @@
-<h2 mat-dialog-title>Create Qualification</h2>
-<mat-dialog-content>
-  <form [formGroup]="qualificationForm" (ngSubmit)="create()">
-    <div class="!space-y-4">
+<h2 mat-dialog-title class="text-xl md:text-2xl font-semibold text-gray-800 mb-3 md:mb-4">Create Qualification</h2>
+
+<mat-dialog-content class="!px-3 md:!px-6">
+  <form [formGroup]="qualificationForm" (ngSubmit)="create()" class="w-full min-w-[280px] md:min-w-[400px]">
+    <div class="space-y-4 md:space-y-6">
       @if (apiErrorMessage) {
-        <mat-error>{{ apiErrorMessage }}</mat-error>
+        <div class="bg-red-50 p-3 md:p-4 rounded-lg">
+          <div class="flex items-start space-x-2 md:space-x-3">
+            <mat-icon class="text-red-600 text-xl md:text-2xl">error_outline</mat-icon>
+            <mat-error class="text-sm md:text-base text-red-700">{{ apiErrorMessage }}</mat-error>
+          </div>
+        </div>
       }
 
-      <mat-form-field class="!w-full">
-        <mat-label>Skill</mat-label>
-        <input matInput
-               formControlName="skill"
-               required>
-        <mat-error *ngIf="isFieldInvalid('skill')">
-          {{ getErrorMessage('skill') }}
-        </mat-error>
-      </mat-form-field>
+      <div class="bg-gray-50 p-3 md:p-4 rounded-lg space-y-3">
+        <mat-form-field class="w-full">
+          <mat-label>Skill</mat-label>
+          <input matInput
+                formControlName="skill"
+                placeholder="Enter skill name"
+                required>
+          <mat-hint class="text-sm">Enter the skill name</mat-hint>
+          <mat-error *ngIf="isFieldInvalid('skill')" class="text-sm">
+            {{ getErrorMessage('skill') }}
+          </mat-error>
+        </mat-form-field>
+      </div>
 
-      <mat-dialog-actions align="end">
-        <button mat-button mat-dialog-close>Cancel</button>
-        <button mat-flat-button color="primary" type="submit">Create</button>
+      <mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3">
+        <button mat-button 
+                mat-dialog-close
+                class="text-sm md:text-base hover:bg-gray-100 py-2 px-4 md:px-6 rounded-md w-full sm:flex-1">
+          Cancel
+        </button>
+        <button mat-flat-button 
+                color="primary" 
+                type="submit"
+                class="!ml-0 text-sm md:text-base py-2 px-4 md:px-6 rounded-md w-full sm:flex-1">
+          Create
+        </button>
       </mat-dialog-actions>
     </div>
   </form>

src/app/qualification/create/create.component.ts

@@ -9,9 +9,10 @@ import {
     MatDialogTitle
 } from "@angular/material/dialog";
 import {NgIf} from "@angular/common";
-import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatError, MatFormField, MatHint, MatLabel} from "@angular/material/form-field";
 import {MatButton} from "@angular/material/button";
 import {MatInput} from "@angular/material/input";
+import {MatIcon} from "@angular/material/icon";
 import {filter} from "rxjs";
 
 @Component({
@@ -27,7 +28,9 @@ import {filter} from "rxjs";
         MatDialogActions,
         MatButton,
         MatInput,
-        MatDialogClose
+        MatDialogClose,
+        MatHint,
+        MatIcon
     ],
     templateUrl: './create.component.html',
     styleUrl: './create.component.css'

src/app/qualification/delete/delete.component.html

@@ -1,15 +1,39 @@
-<h2 mat-dialog-title>Delete Qualification</h2>
+<h2 mat-dialog-title class="text-xl md:text-2xl font-semibold text-gray-800 mb-3 md:mb-4">Delete Qualification</h2>
 
-<mat-dialog-content>
-  @if (apiError) {
-    <div class="!text-red-600 !mb-4 !p-3 !bg-red-50 !rounded">
-      <p>{{ apiError }}</p>
+<mat-dialog-content class="!px-3 md:!px-6">
+  <div class="w-full min-w-[280px] md:min-w-[400px] space-y-4 md:space-y-6">
+    @if (apiError) {
+      <div class="bg-red-50 p-3 md:p-4 rounded-lg">
+        <div class="flex items-start space-x-2 md:space-x-3">
+          <mat-icon class="text-red-600 text-xl md:text-2xl">error_outline</mat-icon>
+          <mat-error class="text-sm md:text-base text-red-700">{{ apiError }}</mat-error>
+        </div>
+      </div>
+    }
+    
+    <div class="bg-amber-50 p-3 md:p-4 rounded-lg border border-amber-200">
+      <div class="flex items-start space-x-2 md:space-x-3">
+        <mat-icon class="text-amber-600 text-xl md:text-2xl">warning</mat-icon>
+        <div>
+          <p class="text-gray-800 font-medium text-sm md:text-base">Are you sure you want to delete this qualification?</p>
+          <p class="text-gray-600 mt-1 text-xs md:text-sm">This action cannot be undone.</p>
+        </div>
+      </div>
     </div>
-  }
-  Are you sure you want to delete this qualification? This can't be undone.
-</mat-dialog-content>
 
-<mat-dialog-actions>
-  <button mat-button (click)="closeModal()">Cancel</button>
-  <button mat-button (click)="delete()" cdkFocusInitial>Delete</button>
-</mat-dialog-actions>
+    <mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3">
+      <button mat-button 
+              (click)="closeModal()"
+              class="text-sm md:text-base hover:bg-gray-100 py-2 px-4 md:px-6 rounded-md w-full sm:flex-1">
+        Cancel
+      </button>
+      <button mat-flat-button 
+              color="warn" 
+              (click)="delete()"
+              class="!ml-0 text-sm md:text-base py-2 px-4 md:px-6 rounded-md w-full sm:flex-1"
+              cdkFocusInitial>
+        Delete
+      </button>
+    </mat-dialog-actions>
+  </div>
+</mat-dialog-content>

src/app/qualification/delete/delete.component.ts

@@ -10,6 +10,8 @@ import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import QualificationService from "../../services/qualification.service";
 import {MatButton} from "@angular/material/button";
 import {HttpErrorResponse} from "@angular/common/http";
+import { MatError } from '@angular/material/form-field'
+import {MatIcon} from "@angular/material/icon";
 
 @Component({
   selector: 'app-delete-qualification',
@@ -19,7 +21,9 @@ import {HttpErrorResponse} from "@angular/common/http";
     MatDialogTitle,
     ReactiveFormsModule,
     MatDialogActions,
-    MatButton
+    MatButton,
+    MatError,
+    MatIcon
   ],
   templateUrl: './delete.component.html',
   standalone: true,

src/app/qualification/details/details.component.html

@@ -1,26 +1,42 @@
-<h2 mat-dialog-title class="text-xl font-semibold mb-4">
+<h2 mat-dialog-title class="text-xl md:text-2xl font-semibold text-gray-800 mb-3 md:mb-4">
   {{ qualification.skill }} Developers
 </h2>
 
-<mat-dialog-content class="px-1">
-  @if (employees$ | async; as employees) {
-    @if (employees.length === 0) {
-      <p class="text-gray-500 italic">No employees found with this qualification.</p>
-    } @else {
-      <div class="space-y-1">
-        @for (employee of employees; track employee.id) {
-          <a
-            class="block w-full px-4 py-2 text-blue-600 rounded-lg hover:bg-blue-50 transition-colors cursor-pointer"
-            (click)="openEmployeeDetailsModal(employee.id)"
-          >
-            <span class="font-medium">{{ employee.firstName }} {{ employee.lastName }}</span>
-          </a>
-        }
-      </div>
+<mat-dialog-content class="!px-3 md:!px-6">
+  <div class="w-full min-w-[280px] md:min-w-[400px] space-y-4 md:space-y-6">
+    @if (employees$ | async; as employees) {
+      @if (employees.length === 0) {
+        <div class="bg-gray-50 p-3 md:p-4 rounded-lg text-center">
+          <mat-icon class="text-gray-400 text-xl md:text-2xl mb-2">person_off</mat-icon>
+          <p class="text-gray-600 text-sm md:text-base">No employees found with this qualification.</p>
+        </div>
+      } @else {
+        <div class="bg-gray-50 p-3 md:p-4 rounded-lg space-y-2">
+          @for (employee of employees; track employee.id) {
+            <a class="block w-full p-3 bg-white rounded-lg hover:bg-blue-50 transition-colors cursor-pointer border border-gray-100 hover:border-blue-100"
+               (click)="openEmployeeDetailsModal(employee.id)">
+              <div class="flex items-center space-x-3">
+                <div class="h-8 w-8 md:h-10 md:w-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
+                  <span class="text-blue-600 font-medium text-sm md:text-base">
+                    {{ employee.firstName?.charAt(0) }}{{ employee.lastName?.charAt(0) }}
+                  </span>
+                </div>
+                <div>
+                  <span class="font-medium text-gray-900 text-sm md:text-base">{{ employee.firstName }} {{ employee.lastName }}</span>
+                </div>
+              </div>
+            </a>
+          }
+        </div>
+      }
     }
-  }
+  </div>
 </mat-dialog-content>
 
-<mat-dialog-actions align="end" class="mt-4">
-  <button mat-button (click)="closeModal()">Close</button>
+<mat-dialog-actions align="end" class="!px-3 md:!px-6 !py-4 !mt-4 border-t">
+  <button mat-button 
+          (click)="closeModal()"
+          class="text-sm md:text-base hover:bg-gray-100 py-2 px-4 md:px-6 rounded-md w-full">
+    Close
+  </button>
 </mat-dialog-actions>

src/app/qualification/details/details.component.ts

@@ -13,6 +13,7 @@ import {AsyncPipe} from "@angular/common";
 import {MatButton} from "@angular/material/button";
 import {DetailsComponent as EmployeeDetailsComponent} from "../../employee/details/details.component";
 import EmployeeApiService from "../../services/employee-api.service";
+import {MatIcon} from "@angular/material/icon";
 
 @Component({
   selector: 'app-details',
@@ -21,7 +22,8 @@ import EmployeeApiService from "../../services/employee-api.service";
     MatDialogContent,
     MatDialogTitle,
     MatDialogActions,
-    MatButton
+    MatButton,
+    MatIcon
   ],
   templateUrl: './details.component.html',
   styleUrl: './details.component.css'

src/app/qualification/edit/edit.component.html

@@ -1,24 +1,43 @@
-<h2 mat-dialog-title>Edit Qualification</h2>
-<mat-dialog-content>
-  <form [formGroup]="qualificationForm" (ngSubmit)="edit()">
-    <div class="!space-y-4">
+<h2 mat-dialog-title class="text-xl md:text-2xl font-semibold text-gray-800 mb-3 md:mb-4">Edit Qualification</h2>
+
+<mat-dialog-content class="!px-3 md:!px-6">
+  <form [formGroup]="qualificationForm" (ngSubmit)="edit()" class="w-full min-w-[280px] md:min-w-[400px]">
+    <div class="space-y-4 md:space-y-6">
       @if (apiErrorMessage) {
-        <mat-error>{{ apiErrorMessage }}</mat-error>
+        <div class="bg-red-50 p-3 md:p-4 rounded-lg">
+          <div class="flex items-start space-x-2 md:space-x-3">
+            <mat-icon class="text-red-600 text-xl md:text-2xl">error_outline</mat-icon>
+            <mat-error class="text-sm md:text-base text-red-700">{{ apiErrorMessage }}</mat-error>
+          </div>
+        </div>
       }
 
-      <mat-form-field class="!w-full">
-        <mat-label>Skill</mat-label>
-        <input matInput
-               formControlName="skill"
-               required>
-        <mat-error *ngIf="isFieldInvalid('skill')">
-          {{ getErrorMessage('skill') }}
-        </mat-error>
-      </mat-form-field>
+      <div class="bg-gray-50 p-3 md:p-4 rounded-lg space-y-3">
+        <mat-form-field class="w-full">
+          <mat-label>Skill</mat-label>
+          <input matInput
+            formControlName="skill" 
+            placeholder="Enter skill name"
+            required>
+          <mat-hint class="text-sm">Enter the skill name</mat-hint>
+          <mat-error *ngIf="isFieldInvalid('skill')" class="text-sm">
+            {{ getErrorMessage('skill') }}
+          </mat-error>
+        </mat-form-field>
+      </div>
 
-      <mat-dialog-actions align="end">
-        <button mat-button mat-dialog-close>Cancel</button>
-        <button mat-flat-button color="primary" type="submit">Edit</button>
+      <mat-dialog-actions align="end" class="!px-0 !mb-0 flex flex-col sm:flex-row w-full gap-3">
+        <button mat-button 
+                mat-dialog-close
+                class="text-sm md:text-base hover:bg-gray-100 py-2 px-4 md:px-6 rounded-md w-full sm:flex-1">
+          Cancel
+        </button>
+        <button mat-flat-button 
+                color="primary" 
+                type="submit"
+                class="!ml-0 text-sm md:text-base py-2 px-4 md:px-6 rounded-md w-full sm:flex-1">
+          Save Changes
+        </button>
       </mat-dialog-actions>
     </div>
   </form>

src/app/qualification/edit/edit.component.ts

@@ -9,10 +9,11 @@ import {
     MatDialogTitle
 } from "@angular/material/dialog";
 import {MatButton} from "@angular/material/button";
-import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
+import {MatError, MatFormField, MatHint, MatLabel} from "@angular/material/form-field";
 import {MatInput} from "@angular/material/input";
 import {NgIf} from "@angular/common";
 import {Qualification} from "../Qualification";
+import {MatIcon} from "@angular/material/icon";
 
 @Component({
   selector: 'app-edit-qualification',
@@ -28,7 +29,9 @@ import {Qualification} from "../Qualification";
         MatLabel,
         NgIf,
         ReactiveFormsModule,
-        MatDialogClose
+        MatDialogClose,
+        MatHint,
+        MatIcon
     ],
   templateUrl: './edit.component.html',
   styleUrl: './edit.component.css'

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

@@ -7,42 +7,50 @@
                     <button mat-flat-button color="primary" class="!bg-blue-600 !text-white"
                             (click)="openCreateModal()">
                         <mat-icon class="!mr-2">add</mat-icon>
-                        Create Qualification
+                        Add Qualification
                     </button>
                 </div>
 
                 @if (qualifications) {
                     <div class="!overflow-x-auto !rounded-lg !bg-gray-50 !p-4">
-                        <table mat-table [dataSource]="qualifications" class="!w-full">
-                            <ng-container matColumnDef="id">
-                                <th mat-header-cell *matHeaderCellDef class="!text-left">ID</th>
-                                <td mat-cell *matCellDef="let qualification" class="!py-4">{{ qualification.id }}</td>
-                            </ng-container>
-
+                        <table mat-table [dataSource]="qualifications" matSort class="!w-full">
                             <ng-container matColumnDef="skill">
-                                <th mat-header-cell *matHeaderCellDef class="!text-left">Skill</th>
+                                <th mat-header-cell *matHeaderCellDef class="!text-left !w-full">Skill</th>
                                 <td mat-cell *matCellDef="let qualification" class="!py-4">
-                                    <a
-                                            class="!text-blue-600 hover:!underline cursor-pointer"
-                                            [matTooltip]="'Click to view qualification details'"
-                                            (click)="openDetailsModal(qualification)"
-                                    >
-                                        {{ qualification.skill }}
-                                    </a>
+                                    <div class="!flex !items-center">
+                                        <div class="!h-10 !w-10 !rounded-full !bg-blue-100 !flex !items-center !justify-center !mr-3">
+                                            <span class="!text-blue-600 !font-medium">
+                                                {{ qualification.skill[0]?.toUpperCase() }}
+                                            </span>
+                                        </div>
+                                        <div>
+                                            <a class="!text-blue-600 hover:!underline cursor-pointer"
+                                               [matTooltip]="'Click to view qualification details'"
+                                               (click)="openDetailsModal(qualification)">
+                                                {{ qualification.skill }}
+                                            </a>
+                                        </div>
+                                    </div>
                                 </td>
                             </ng-container>
 
                             <ng-container matColumnDef="actions">
-                                <th mat-header-cell *matHeaderCellDef>Actions</th>
-                                <td mat-cell *matCellDef="let qualification" class="!py-4">
-                                    <button mat-icon-button color="primary" [matTooltip]="'Edit qualification'"
-                                            class="!mr-2" (click)="openEditModal(qualification)">
-                                        <mat-icon>edit</mat-icon>
-                                    </button>
-                                    <button mat-icon-button color="warn" [matTooltip]="'Delete qualification'"
-                                            (click)="openDeleteModal(qualification.id)">
-                                        <mat-icon>delete</mat-icon>
-                                    </button>
+                                <th mat-header-cell *matHeaderCellDef class="!text-right !w-[120px]">Actions</th>
+                                <td mat-cell *matCellDef="let qualification" class="!text-right !py-4 !whitespace-nowrap">
+                                    <div class="!flex !justify-end !items-center !gap-1">
+                                        <button mat-icon-button 
+                                                color="primary" 
+                                                [matTooltip]="'Edit qualification'"
+                                                (click)="openEditModal(qualification)">
+                                            <mat-icon>edit</mat-icon>
+                                        </button>
+                                        <button mat-icon-button 
+                                                color="warn" 
+                                                [matTooltip]="'Delete qualification'"
+                                                (click)="openDeleteModal(qualification.id)">
+                                            <mat-icon>delete</mat-icon>
+                                        </button>
+                                    </div>
                                 </td>
                             </ng-container>
 

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

@@ -22,6 +22,7 @@ import {MatCard, MatCardContent} from "@angular/material/card";
 import {MatTooltip} from "@angular/material/tooltip";
 import {MatProgressSpinner} from "@angular/material/progress-spinner";
 import {DetailsComponent} from "../details/details.component";
+import {MatSort} from "@angular/material/sort";
 
 @Component({
     selector: 'app-qualifications',
@@ -43,14 +44,15 @@ import {DetailsComponent} from "../details/details.component";
         MatCard,
         MatCardContent,
         MatTooltip,
-        MatProgressSpinner
+        MatProgressSpinner,
+        MatSort
     ],
     templateUrl: './table.component.html',
     styleUrl: './table.component.css'
 })
 export class QualificationsComponent implements OnInit {
     public qualifications$!: Observable<Qualification[]>;
-    public readonly displayedColumns: string[] = ['id', 'skill', 'actions'];
+    public readonly displayedColumns: string[] = ['skill', 'actions'];
 
     private readonly dialog: MatDialog = inject(MatDialog);
     private readonly qualificationService: QualificationService = inject(QualificationService);