(F) Add welcome message, role-related buttons to hreader

Clinics.Frontend/src/app/components/template/header/header.component.css

@@ -39,6 +39,12 @@
 
 }
 
+.app-name-container {
+    text-align: center; /* or any other alignment you prefer */
+}
+
+
+
 /* #endregion */
 
 /* #region Header*/

Clinics.Frontend/src/app/components/template/header/header.component.html

@@ -8,23 +8,16 @@
                     <img src="assets/images/logo.png" alt="Logo" width="100em" height="100em">
                 </div>
 
-                <h1 class="h3 m-auto custom-app-name">المركز الطبي - برنامج الأطباء</h1>
+                <div class="app-name-container m-auto">
+                    <h1 class="h3 custom-app-name mb-4">المركز الطبي - برنامج الأطباء</h1>
+                    <h3 dir="rtl" *ngIf="userData!==null" class="h5 text-primary">أهلاً {{userData.fullName}}!</h3>
+                </div>
 
-                <nav class="navmenu custom-buttons">
+                <!-- #region unregistered buttons -->
+                <nav class="navmenu custom-buttons" *ngIf="userData === null">
 
                     <ul>
-                        <li *ngIf="userData!==null" class="dropdown">
-                            <button
-                                [ngClass]="{'btn': true, 'btn-outline-secondary': true, 'custom-selected-dropdown': showDropdown}"
-                                (click)="showDropdown = !showDropdown">خيارات <i
-                                    class="bi bi-chevron-down toggle-dropdown"></i></button>
-                            <ul [ngClass]="{'show': showDropdown}">
-                                <li (click)="onLogout();"><a>تسجيل الخروج</a></li>
-                            </ul>
-                        </li>
-
-                        <li *ngIf="userData===null"><a><button class="btn"
-                            [class]="{'btn-outline-secondary': true}"
+                        <li><a><button class="btn" [class]="{'btn-outline-secondary': true}"
                                     (click)="openLoginForm(loginModal)">تسجيل الدخول</button></a></li>
 
                         <li><a href="home#about"><button class="btn"
@@ -41,6 +34,41 @@
 
                     </ul>
                 </nav>
+                <!-- #endregion -->
+
+                <!-- #region admin buttons -->
+                <nav class="navmenu custom-buttons" *ngIf="userData?.role === ADMIN">
+
+                    <ul>
+                        <li class="dropdown">
+                            <button
+                                [ngClass]="{'btn': true, 'btn-outline-secondary': true, 'custom-selected-dropdown': showDropdown}"
+                                (click)="showDropdown = !showDropdown">خيارات <i
+                                    class="bi bi-chevron-down toggle-dropdown"></i></button>
+                            <ul [ngClass]="{'show': showDropdown}">
+                                <li (click)="onLogout();"><a>تسجيل الخروج</a></li>
+                            </ul>
+                        </li>
+
+                        <li><a><button class="btn"
+                            [class]="{'btn-outline-primary': isSelected('Admin-Receptionists'), 'btn-outline-secondary': !isSelected('Admin-Receptionists')}"
+                            (click)="selectButton('Admin-Receptionists')">موظفو الاستقبال</button></a></li>
+
+                        <li><a><button class="btn"
+                            [class]="{'btn-outline-primary': isSelected('Admin-Dorctors'), 'btn-outline-secondary': !isSelected('Admin-Dorctors')}"
+                            (click)="selectButton('Admin-Dorctors')">الأطباء</button></a></li>
+
+                        <li><a [routerLink]="'home'"><button class="btn"
+                            [class]="{'btn-outline-primary': isSelected('Home'), 'btn-outline-secondary': !isSelected('Home')}"
+                            (click)="selectButton('Home')">الصفحة الرئيسية</button></a></li>
+
+                    </ul>
+
+
+
+                </nav>
+                <!-- #endregion -->
+
             </div>
 
         </div>

Clinics.Frontend/src/app/components/template/header/header.component.ts

@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { UserData } from '../../../classes/Authentication/user-data';
 import { AuthenticationService } from '../../../services/authentication/authentication.service';
 import { Router } from '@angular/router';
-import { HomeComponent } from '../../home/home.component';
+import { Roles } from '../../../classes/Authentication/roles';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
@@ -24,6 +24,12 @@ export class HeaderComponent {
 
   //#region Variables
 
+  //#region Roles
+    readonly ADMIN: string = Roles.Admin;
+    readonly DOCTOR: string = Roles.Doctor;
+    readonly RECEPTIONIST: string = Roles.Receptionist;
+  //#endregion
+
   //#region Dropdown
   showDropdown: boolean = false;
   //#endregion
@@ -52,6 +58,7 @@ export class HeaderComponent {
   onLogout(): void {
     this.authenticationService.logout();
     this.userData = null;
+    this.showDropdown = false;
     this.router.navigate(['']);
   }
   //#endregion