(F) Add receptionist use cases pages

Clinics.Frontend/src/app/app-routing.module.ts

@@ -15,6 +15,9 @@ import { ReceptionistUsersComponent } from './components/admin/receptionist-user
 import { ReceptionistDashboardComponent } from './components/receptionist/receptionist-dashboard/receptionist-dashboard.component';
 import { WaitingListComponent } from './components/receptionist/waiting-list/waiting-list.component';
 import { DoctorsComponent } from './components/receptionist/doctors/doctors.component';
+import { CreateWitingListItemAccordionComponent } from './components/receptionist/create-witing-list-item-accordion/create-witing-list-item-accordion.component';
+import { CreateEmployeeFormComponent } from './components/receptionist/create-employee-form/create-employee-form.component';
+import { EmployeeComponent } from './components/receptionist/employee/employee.component';
 
 const routes: Routes = [
   {
@@ -86,6 +89,18 @@ const routes: Routes = [
         path: 'waitinglist',
         component: WaitingListComponent
       },
+      {
+        path: 'waitinglist/create',
+        component: CreateWitingListItemAccordionComponent
+      },
+      {
+        path: 'employees/create',
+        component: CreateEmployeeFormComponent
+      },
+      {
+        path: 'employees/:id',
+        component: EmployeeComponent
+      },
       {
         path: 'doctors',
         component: DoctorsComponent

Clinics.Frontend/src/app/app.module.ts

@@ -35,6 +35,12 @@ import { WaitingListComponent } from './components/receptionist/waiting-list/wai
 import { WaitingListItemComponent } from './components/receptionist/waiting-list-item/waiting-list-item.component';
 import { DoctorsComponent } from './components/receptionist/doctors/doctors.component';
 import { DoctorItemComponent } from './components/receptionist/doctor-item/doctor-item.component';
+import { CreateWitingListItemAccordionComponent } from './components/receptionist/create-witing-list-item-accordion/create-witing-list-item-accordion.component';
+import { CreateWitingListItemForEmployeeComponent } from './components/receptionist/create-witing-list-item-for-employee/create-witing-list-item-for-employee.component';
+import { CreateWitingListItemForFamilyMemberComponent } from './components/receptionist/create-witing-list-item-for-family-member/create-witing-list-item-for-family-member.component';
+import { CreateEmployeeFormComponent } from './components/receptionist/create-employee-form/create-employee-form.component';
+import { EmployeeSerialNumberPopUpComponent } from './components/receptionist/employee-serial-number-pop-up/employee-serial-number-pop-up.component';
+import { EmployeeComponent } from './components/receptionist/employee/employee.component';
 
 
 @NgModule({
@@ -88,6 +94,12 @@ import { DoctorItemComponent } from './components/receptionist/doctor-item/docto
     WaitingListItemComponent,
     DoctorsComponent,
     DoctorItemComponent,
+    CreateWitingListItemAccordionComponent,
+    CreateWitingListItemForEmployeeComponent,
+    CreateWitingListItemForFamilyMemberComponent,
+    CreateEmployeeFormComponent,
+    EmployeeSerialNumberPopUpComponent,
+    EmployeeComponent,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/components/authentication/login-form/login-form.component.css

@@ -9,17 +9,42 @@
 
 .custom-input {
     background-color: var(--background-color);
+    border: 1px solid var(--heading-color);
+    color: var(--heading-color);
+    margin-bottom: 0.3em;
 }
 
+.custom-input:focus {
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+  }
+
 .custom-label {
     color: var(--heading-color);   
     font-weight: 700;
 }
 
+.btn {
+    font-weight: 700;
+}
+
 .custom-cancel-button {
-    color: var(--heading-color);   
+    color: white;
+    background-color: var(--heading-color);
+    border-color: var(--heading-color);
 }
 .custom-cancel-button:hover {
-    color: white;   
-    background-color: var(--heading-color);
+    color: var(--heading-color);
+    background-color: white;
+}
+
+.custom-confirm-button {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+    color: white;
+}
+
+.custom-confirm-button:hover {
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+    background-color: white;
 }
\ No newline at end of file

Clinics.Frontend/src/app/components/authentication/login-form/login-form.component.html

 <div class="custom-child" dir="rtl">
     <div>
 
-        <div class="text-center">
-            <h3 style="font-weight: 800;">تسجيل الدخول</h3>
+        <div class="custom-title mb-3">
+            <h2>تسجيل الدخول</h2>
         </div>
 
-        <hr>
-
         <div *ngIf="isFailure" class="d-grid mb-2">
-            <button type="button" class="btn btn-danger" style="cursor: auto;">خطأ: {{errorMessage}}</button>
+            <button type="button" class="btn btn-danger" style="cursor: auto; font-weight:700;">خطأ: {{errorMessage}}</button>
         </div>
 
         <form #loginForm="ngForm" (ngSubmit)="onSubmit()" class="text-center" autocomplete="off">
@@ -54,7 +52,7 @@
             </div>
 
             <div class="d-grid gap-3">
-                <button type="submit" class="btn btn-outline-primary"
+                <button type="submit" class="btn btn-outline-primary custom-confirm-button"
                     [disabled]="!loginForm.dirty || loginForm.invalid">دخول</button>
 
                 <button type="button" class="btn btn-outline-secondary custom-cancel-button"

Clinics.Frontend/src/app/components/receptionist/create-employee-form/create-employee-form.component.css

+/* #region Accordion*/
+.accordion {
+    margin-bottom: 1em;
+}
+
+.accordion-header {
+    border: none;
+
+}
+
+.accordion-header .accordion-button {
+    border: none;
+
+}
+
+.accordion-item {
+    border: none;
+}
+
+.custom-accordion-header .btn-primary {
+    width: 100%;
+    background-color: var(--heading-color);
+    border-color: var(--heading-color);
+    font-weight: 700;
+}
+
+/* #endregion */
+
+/* #region Form card*/
+.custom-form {
+    width: 60%;
+    margin: auto;
+    padding: 1em;
+    border: 1px solid var(--accent-color);
+    border-radius: 3%;
+}
+
+/* #endregion */
+
+/* #region Title*/
+.custom-form .custom-form-title h3 {
+    width: 50%;
+    margin: auto;
+    padding: 0.5em;
+    border: 1px solid var(--accent-color);
+    border-radius: 10em;
+}
+
+/* #endregion */
+
+/* #region Server error message*/
+.custom-form .custom-server-error-message .btn {
+    width: 100%;
+    font-size: 1.2em;
+    font-weight: 700;
+    cursor: auto;
+}
+
+/* #endregion */
+
+/* #region Buttons*/
+.custom-buttons .btn {
+    font-weight: 700;
+    width: 50%;
+    margin: auto;
+    font-size: 1.2em;
+}
+
+.custom-buttons .btn i {
+    font-weight: 900;
+    font-size: 1.2em;
+    margin-right: 0.5em;
+}
+
+.custom-buttons .btn-outline-primary {
+    color: white;
+    background-color: var(--heading-color);
+    border-color: var(--heading-color);
+}
+
+.custom-buttons .btn-outline-primary:hover {
+    background-color: white;
+    color: var(--heading-color);
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+}
+
+/* #endregion */
+
+/* #region Back-button*/
+.custom-back-button {
+    margin-bottom: 1em;
+}
+
+.custom-back-button a {
+    width: 50%;
+}
+
+.custom-back-button a .btn {
+    width: 50%;
+    background-color: var(--accent-color);
+    color: white;
+    border-color: var(--accent-color);
+    font-weight: 700;
+}
+
+.custom-back-button a button:hover {
+    background-color: white;
+    border-color: var(--accent-color);
+
+    color: var(--accent-color);
+}
+
+.custom-back-button a .btn i {
+    margin-right: 0.5em;
+}
+
+/* #endregion */
+
+/* #region Field*/
+
+.custom-field {
+    width: 50%;
+    margin: auto;
+    color: var(--heading-color);
+}
+
+
+.custom-field .custom-label {
+    font-weight: 800;
+    margin-bottom: 0.3em;
+}
+
+.custom-field .custom-label span {
+    margin-right: 0.1em;
+}
+
+.custom-field .custom-input {
+    border: 1px solid var(--heading-color);
+    color: var(--heading-color);
+    margin-bottom: 0.3em;
+}
+
+.custom-field .custom-input:focus {
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+}
+
+.custom-field .custom-error-message {
+    font-weight: 700;
+}
+
+.custom-form-buttons {
+    margin-top: 2em;
+}
+
+.custom-select select {
+    border: 1px solid var(--heading-color);
+    color: var(--heading-color);
+    margin-bottom: 0.3em;
+
+    /* For arrow */
+    appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, var(--heading-color) 50%), linear-gradient(135deg, var(--heading-color) 50%, transparent 50%);
+    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
+    background-size: 5px 5px, 5px 5px, 1px 1.5em;
+    background-repeat: no-repeat;
+}
+.custom-select select:focus {
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+}
+.custom-select option {
+    color: var(--heading-color);
+    background-color: white;
+}
+
+/* #endregion */
\ No newline at end of file

Clinics.Frontend/src/app/components/receptionist/create-employee-form/create-employee-form.component.ts

+import { ViewportScroller } from '@angular/common';
+import { Component, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-create-employee-form',
+  templateUrl: './create-employee-form.component.html',
+  styleUrl: './create-employee-form.component.css'
+})
+export class CreateEmployeeFormComponent {
+  //#region CTOR DI
+  constructor(private toastrService: ToastrService,
+    private router: Router,
+    private scroller: ViewportScroller
+  ) { }
+  //#endregion
+
+  //#region Variables
+  @ViewChild("form") form: NgForm;
+  formModel: any = {
+    "firstName": "المهند",
+    "middleName": "ياسر",
+    "lastName": "حافظ",
+    "dateOfBirth": "2002-06-09",
+    "gender": "ذكر",
+    "serialNumber": "992022",
+    "centerStatus": "مباشر عمله",
+  }
+
+  isFailure: boolean = false;
+  isInvalid: boolean = false;
+  errorMessage: string = '';
+
+  isPersonal: boolean = true;
+  isAdditional: boolean = false;
+  isWork: boolean = false;
+  isOptions: boolean = false;
+  //#endregion
+
+
+  // #region on submit
+  onSubmit(): void {
+    if (this.form.valid) {
+      this.isInvalid = false;
+      this.isFailure = false;
+      this.errorMessage = '';
+    }
+
+    else {
+      this.isInvalid = true;
+      // this.isPersonal = true;
+      // this.isAdditional = true;
+      // this.isWork = true;
+      // this.isOptions = true;
+      this.form.form.markAsPristine();
+      this.scroller.scrollToPosition([0,0]);
+    }
+  }
+  // #endregion
+}

Clinics.Frontend/src/app/components/receptionist/create-witing-list-item-accordion/create-witing-list-item-accordion.component.css

+/* #region Custom*/
+.custom-back-button {
+    margin-bottom: 1em;
+}
+.custom-back-button a{
+    width: 100%;
+}
+
+.custom-back-button a .btn{
+    width: 100%;
+    background-color: var(--accent-color);
+    color: white;
+    border-color: var(--accent-color);
+    font-weight: 700;
+}
+
+.custom-back-button a button:hover{
+    background-color: white;
+    border-color: var(--accent-color);
+
+    color:var(--accent-color);
+}
+
+.custom-back-button a .btn i{
+    margin-right: 0.5em;
+}
+/* #endregion */
+
+/* #region Accordion*/
+.accordion {
+    margin-bottom: 1em;
+    width: 75%;
+    margin: auto;
+}
+.accordion-header{
+    border: none;
+    
+}
+.accordion-header .accordion-button{
+    border: none;
+    
+}
+
+.accordion-item {
+    border: none;
+}
+
+.custom-accordion-header .btn-primary{
+    width: 100%;
+    background-color: var(--heading-color);
+    border-color: var(--heading-color);
+    font-weight: 700;
+}
+
+/* #endregion */

Clinics.Frontend/src/app/components/receptionist/create-witing-list-item-accordion/create-witing-list-item-accordion.component.html

+<div class="custom-child" dir="rtl">
+    <section class="section">
+
+        <div class="custom-title">
+            <h2>إضافة مريض إلى قائمة الانتظار</h2>
+        </div>
+
+    <!-- #region Employee-->
+    <div class="container text-center mt-4" dir="rtl">
+        <div class="accordion">
+          <div class="accordion-item">
+  
+            <div class="custom-accordion-header">
+              <button class="btn btn-primary" type="button"
+  
+                data-bs-toggle="collapse" data-bs-target="#collapseOne"
+                aria-expanded="true" aria-controls="collapseOne"
+                (click)="isEmployeeSelected = !isEmployeeSelected"
+                >
+  
+                إضافة موظف
+                <i *ngIf="!isEmployeeSelected" class="fas fa-chevron-down"></i>
+                <i *ngIf="isEmployeeSelected" class="fas fa-chevron-up"></i>
+  
+              </button>
+            </div>
+  
+            <div id="collapseOne"
+              class="accordion-collapse collapse"
+              >
+  
+              <div class="accordion-body custom-child">
+                <app-create-witing-list-item-for-employee>
+
+                </app-create-witing-list-item-for-employee>
+              </div>
+  
+            </div>
+          </div>
+        </div>
+      </div>
+  
+  
+      <!-- #endregion -->
+
+    <!-- #region Family member-->
+    <div class="container text-center mt-4" dir="rtl">
+        <div class="accordion">
+          <div class="accordion-item">
+  
+            <div class="custom-accordion-header">
+              <button class="btn btn-primary" type="button"
+  
+                data-bs-toggle="collapse" data-bs-target="#collapseTwo"
+                aria-expanded="true" aria-controls="collapseTwo"
+                (click)="isFamilyMemberSelected = !isFamilyMemberSelected"
+                >
+  
+                إضافة فرد عائلة
+                <i *ngIf="!isFamilyMemberSelected" class="fas fa-chevron-down"></i>
+                <i *ngIf="isFamilyMemberSelected" class="fas fa-chevron-up"></i>
+  
+              </button>
+            </div>
+  
+            <div id="collapseTwo"
+              class="accordion-collapse collapse"
+              >
+  
+              <div class="accordion-body custom-child">
+                <app-create-witing-list-item-for-family-member>
+
+                </app-create-witing-list-item-for-family-member>
+              </div>
+  
+            </div>
+          </div>
+        </div>
+      </div>
+  
+  
+      <!-- #endregion -->      
+
+    </section>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/receptionist/create-witing-list-item-accordion/create-witing-list-item-accordion.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-witing-list-item-accordion',
+  templateUrl: './create-witing-list-item-accordion.component.html',
+  styleUrl: './create-witing-list-item-accordion.component.css'
+})
+export class CreateWitingListItemAccordionComponent {
+
+  isEmployeeSelected: boolean = false;
+  isFamilyMemberSelected: boolean = false;
+
+}

Clinics.Frontend/src/app/components/receptionist/create-witing-list-item-for-employee/create-witing-list-item-for-employee.component.css

+/* #region Form card*/
+.custom-form {
+    width: 60%;
+    margin: auto;
+    padding: 1em;
+    border: 1px solid var(--accent-color);
+    border-radius: 3%;
+}
+/* #endregion */
+
+
+/* #region Server error message*/
+.custom-form .custom-server-error-message .btn{
+    width: 100%;
+    font-size: 1.2em;
+    font-weight: 700;
+    cursor: auto;
+}
+/* #endregion */
+
+/* #region Buttons*/
+.custom-submit-form-button .btn{
+    font-weight: 700;
+    width: 50%;
+    margin: auto;
+    font-size: 1.2em;
+    border: none;
+}
+
+.custom-submit-form-button .btn i {
+    font-weight: 900;
+    font-size: 1.2em;
+    margin-right: 0.5em;
+}
+
+.custom-submit-form-button .btn-outline-primary {
+    color: white;
+    background-color: var(--heading-color);
+}
+
+.custom-submit-form-button .btn-outline-primary:hover {
+    background-color: white;
+    color: var(--heading-color);
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+}
+/* #endregion */
+
+/* #region Field*/
+
+.custom-field {
+    width: 50%;
+    margin: auto;
+    color: var(--heading-color);
+}
+
+
+.custom-field .custom-label {
+    font-weight: 800;
+    margin-bottom: 0.3em;
+}
+
+.custom-field .custom-label span{
+    margin-right: 0.1em;
+}
+
+.custom-field .custom-input {
+    border: 1px solid var(--heading-color);
+    color: var(--heading-color);
+    margin-bottom: 0.3em;
+}
+
+.custom-field .custom-input:focus {
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+  }
+
+.custom-field .custom-error-message {
+    font-weight: 700;
+}
+
+.custom-form-buttons {
+    margin-top: 2em;
+}
+
+/* #endregion */
\ No newline at end of file

Clinics.Frontend/src/app/components/receptionist/create-witing-list-item-for-employee/create-witing-list-item-for-employee.component.html

+<div class="cutom-child" dir="rtl">
+    <div class="custom-form">
+
+        <!-- #region Server-side errors -->
+        <div *ngIf="isFailure" class="mb-3 d-grid gap-3 custom-server-error-message">
+            <button type="button" class="btn btn-danger">خطأ: {{errorMessage}}</button>
+        </div>
+        <!-- #endregion -->
+
+        <form #form="ngForm" (ngSubmit)="onSubmit()"
+            class="text-center custom-form-container" autocomplete="off">
+            
+            <!-- #region Serial number-->
+            <div class="form-group mb-3 custom-field">
+
+                <!-- #region Field label-->
+                <label for="serialNumber" class="col-form-label custom-label">
+                    الرقم الذاتي
+                    <span class="text-danger">*</span>
+                </label>
+                <!-- #endregion -->
+
+                <!-- #region Field input-->
+                <input type="number" class="form-control text-center custom-input" placeholder="ادخل الرقم الذاتي" dir="ltr"
+
+                    [(ngModel)]="formModel.serialNumber" name="serialNumber"
+                    #serialNumber="ngModel" required maxlength="50">
+                    <!-- #endregion -->
+
+                <!-- #region Field errors-->
+                <div *ngIf="(serialNumber.touched || serialNumber.dirty) && (serialNumber.errors)" class="custom-error-message">
+
+                    <p class="text-danger">
+                        {{
+                        serialNumber.errors['required'] ? 'هذا الحقل مطلوب'
+                        : ''
+                        }}
+                    </p>
+                </div>
+                <!-- #endregion -->
+                
+            </div>
+             
+            
+            <!-- #endregion -->
+
+            <!-- #region Buttons-->
+            <div class="d-grid gap-3 mb-5">
+
+                <div class="custom-submit-form-button">
+                    <button type="submit" class="btn btn-outline-primary"
+                    [disabled]="!form.dirty || form.invalid">
+                        حفظ
+                        <i class="bi bi-save"></i>
+                    </button>
+                </div>
+                
+            </div>
+            <!-- #endregion -->
+            
+        </form>
+    </div>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/receptionist/create-witing-list-item-for-employee/create-witing-list-item-for-employee.component.ts

+import { Component, Input, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-create-witing-list-item-for-employee',
+  templateUrl: './create-witing-list-item-for-employee.component.html',
+  styleUrl: './create-witing-list-item-for-employee.component.css'
+})
+export class CreateWitingListItemForEmployeeComponent {
+
+  // #region CTOR DI
+  constructor(private toastrService: ToastrService,
+    private router: Router
+  ) { }
+
+  // #endregion
+
+  @ViewChild('form') form: NgForm;
+
+  isFailure: boolean = false;
+  errorMessage: string;
+
+  @Input("formModel") formModel: any = { serialNumber: 5 };
+
+  onSubmit(): void {
+    if (this.form.valid) {
+      
+    }
+  }
+
+
+}

Clinics.Frontend/src/app/components/receptionist/create-witing-list-item-for-family-member/create-witing-list-item-for-family-member.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-create-witing-list-item-for-family-member',
+  templateUrl: './create-witing-list-item-for-family-member.component.html',
+  styleUrl: './create-witing-list-item-for-family-member.component.css'
+})
+export class CreateWitingListItemForFamilyMemberComponent {
+
+}

Clinics.Frontend/src/app/components/receptionist/employee-serial-number-pop-up/employee-serial-number-pop-up.component.css

+.custom-input,
+.custom-input::placeholder {
+    color: var(--heading-color);   
+}
+
+.custom-input::placeholder {
+    opacity: 40%;
+}
+
+.custom-input {
+    background-color: var(--background-color);
+    border: 1px solid var(--heading-color);
+    color: var(--heading-color);
+    margin-bottom: 0.3em;
+}
+
+.custom-input:focus {
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+  }
+
+.custom-label {
+    color: var(--heading-color);   
+    font-weight: 700;
+}
+
+.btn {
+    font-weight: 700;
+}
+
+.custom-cancel-button {
+    color: white;
+    background-color: var(--heading-color);
+    border-color: var(--heading-color);
+}
+.custom-cancel-button:hover {
+    color: var(--heading-color);
+    background-color: white;
+}
+
+.custom-confirm-button {
+    background-color: var(--accent-color);
+    border-color: var(--accent-color);
+    color: white;
+}
+
+.custom-confirm-button:hover {
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+    background-color: white;
+}
\ No newline at end of file

Clinics.Frontend/src/app/components/receptionist/employee-serial-number-pop-up/employee-serial-number-pop-up.component.html

+<div class="custom-child" dir="rtl">
+    <div>
+
+        <div class="custom-title mb-3">
+            <h2>الاستعلام عن موظف</h2>
+        </div>
+
+        <div *ngIf="isFailure" class="d-grid mb-2">
+            <button type="button" class="btn btn-danger" style="cursor: auto; font-weight:700;">خطأ: {{errorMessage}}</button>
+        </div>
+
+        <form #form="ngForm" (ngSubmit)="onSubmit()" class="text-center" autocomplete="off">
+
+            <!-- To avoid first field auto focus -->
+            <div class="form-group">
+                <input type="text" autofocus="autofocus" style="display:none" />
+            </div>
+
+            <div class="form-group mb-4">
+                <label for="serialNumber" class="col-form-label custom-label mb-2">الرقم الذاتي <span
+                        class="text-danger">*</span></label>
+                <input type="number" class="form-control text-center custom-input" placeholder="ادخل الرقم الذاتي"
+                    dir="ltr" [(ngModel)]="formModel.serialNumber" name="serialNumber" #serialNumber="ngModel" required
+                    maxlength="50">
+
+                <div *ngIf="(serialNumber.touched || serialNumber.dirty) && serialNumber.errors" class="mt-2">
+                    <span class="text-danger">
+                        {{
+                        serialNumber.errors['required'] ? 'هذا الحقل مطلوب'
+                        : ''
+                        }}
+                    </span>
+                </div>
+            </div>
+
+
+            <div class="d-grid gap-3">
+                <button type="submit" class="btn btn-outline-primary custom-confirm-button"
+                    [disabled]="!form.dirty || form.invalid">تأكيد</button>
+
+                <button type="button" class="btn btn-outline-secondary custom-cancel-button"
+                    (click)="parentModal.dismiss()">الغاء</button>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/receptionist/employee-serial-number-pop-up/employee-serial-number-pop-up.component.ts

+import { Component, Input, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-employee-serial-number-pop-up',
+  templateUrl: './employee-serial-number-pop-up.component.html',
+  styleUrl: './employee-serial-number-pop-up.component.css'
+})
+export class EmployeeSerialNumberPopUpComponent {
+
+
+  //#region CTOR DI
+  constructor(private toastrService: ToastrService,
+    private router: Router
+  ) {}
+  //#endregion
+
+  //#region Inputs
+  @Input("parentModal") parentModal : any;
+  //#endregion  
+
+  //#region Variables
+  @ViewChild("form") form: NgForm;
+  formModel: any = {serialNumber: 4};
+
+  isFailure: boolean = false;
+  errorMessage: string = '';
+  //#endregion  
+
+    // #region On submit
+    onSubmit(): void {
+      if (this.form.form.valid) {
+        let id: number=5;
+        this.router.navigateByUrl(`receptionist/employees/${id}`)
+        this.parentModal.dismiss();
+      }
+      this.form.form.markAsPristine();
+    }
+    
+    // #endregion
+
+
+}

Clinics.Frontend/src/app/components/receptionist/employee/employee.component.css

+/* #region Accordion*/
+.accordion {
+    margin-bottom: 1em;
+}
+
+.accordion-header {
+    border: none;
+
+}
+
+.accordion-header .accordion-button {
+    border: none;
+
+}
+
+.accordion-item {
+    border: none;
+}
+
+.custom-accordion-header .btn-primary {
+    width: 100%;
+    background-color: var(--heading-color);
+    border-color: var(--heading-color);
+    font-weight: 700;
+}
+
+/* #endregion */
+
+/* #region Form card*/
+.custom-form {
+    width: 60%;
+    margin: auto;
+    padding: 1em;
+    border: 1px solid var(--accent-color);
+    border-radius: 3%;
+}
+
+/* #endregion */
+
+/* #region Title*/
+.custom-form .custom-form-title h3 {
+    width: 50%;
+    margin: auto;
+    padding: 0.5em;
+    border: 1px solid var(--accent-color);
+    border-radius: 10em;
+}
+
+/* #endregion */
+
+/* #region Server error message*/
+.custom-form .custom-server-error-message .btn {
+    width: 100%;
+    font-size: 1.2em;
+    font-weight: 700;
+    cursor: auto;
+}
+
+/* #endregion */
+
+/* #region Buttons*/
+.custom-buttons .btn {
+    font-weight: 700;
+    width: 50%;
+    margin: auto;
+    font-size: 1.2em;
+}
+
+.custom-buttons .btn i {
+    font-weight: 900;
+    font-size: 1.2em;
+    margin-right: 0.5em;
+}
+
+.custom-buttons .btn-outline-primary {
+    color: white;
+    background-color: var(--heading-color);
+    border-color: var(--heading-color);
+}
+
+.custom-buttons .btn-outline-primary:hover {
+    background-color: white;
+    color: var(--heading-color);
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+}
+
+/* #endregion */
+
+/* #region Back-button*/
+.custom-back-button {
+    margin-bottom: 1em;
+}
+
+.custom-back-button a {
+    width: 50%;
+}
+
+.custom-back-button a .btn {
+    width: 50%;
+    background-color: var(--accent-color);
+    color: white;
+    border-color: var(--accent-color);
+    font-weight: 700;
+}
+
+.custom-back-button a button:hover {
+    background-color: white;
+    border-color: var(--accent-color);
+
+    color: var(--accent-color);
+}
+
+.custom-back-button a .btn i {
+    margin-right: 0.5em;
+}
+
+/* #endregion */
+
+/* #region Field*/
+
+.custom-field {
+    width: 50%;
+    margin: auto;
+    color: var(--heading-color);
+}
+
+
+.custom-field .custom-label {
+    font-weight: 800;
+    margin-bottom: 0.3em;
+}
+
+.custom-field .custom-label span {
+    margin-right: 0.1em;
+}
+
+.custom-field .custom-input {
+    border: 1px solid var(--heading-color);
+    color: var(--heading-color);
+    margin-bottom: 0.3em;
+}
+
+.custom-field .custom-input:focus {
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+}
+
+.custom-field .custom-error-message {
+    font-weight: 700;
+}
+
+.custom-form-buttons {
+    margin-top: 2em;
+}
+
+.custom-select select {
+    border: 1px solid var(--heading-color);
+    color: var(--heading-color);
+    margin-bottom: 0.3em;
+
+    /* For arrow */
+    appearance: none;
+    background-image: linear-gradient(45deg, transparent 50%, var(--heading-color) 50%), linear-gradient(135deg, var(--heading-color) 50%, transparent 50%);
+    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
+    background-size: 5px 5px, 5px 5px, 1px 1.5em;
+    background-repeat: no-repeat;
+}
+.custom-select select:focus {
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+}
+.custom-select option {
+    color: var(--heading-color);
+    background-color: white;
+}
+
+/* #endregion */
\ No newline at end of file

Clinics.Frontend/src/app/components/receptionist/employee/employee.component.ts

+import { ViewportScroller } from '@angular/common';
+import { Component, numberAttribute, ViewChild } from '@angular/core';
+import { NgForm } from '@angular/forms';
+import { Router } from '@angular/router';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-employee',
+  templateUrl: './employee.component.html',
+  styleUrl: './employee.component.css'
+})
+export class EmployeeComponent {
+
+  //#region CTOR DI
+  constructor(private toastrService: ToastrService,
+    private router: Router,
+    private scroller: ViewportScroller
+  ) { }
+  //#endregion
+
+  //#region Variables
+  @ViewChild("form") form: NgForm;
+  formModel: any = {
+    "firstName": "المهند",
+    "middleName": "ياسر",
+    "lastName": "حافظ",
+    "dateOfBirth": "2002-06-09",
+    "gender": "ذكر",
+    "serialNumber": "992022",
+    "centerStatus": "مباشر عمله",
+  }
+
+  isFailure: boolean = false;
+  isInvalid: boolean = false;
+  errorMessage: string = '';
+
+  isEditing: boolean = false;
+  firstOpen: boolean = true;
+
+  isPersonal: boolean = false;
+  isAdditional: boolean = true;
+  isWork: boolean = false;
+  isOptions: boolean = false;
+  //#endregion  
+
+
+  // #region on submit
+  onSubmit(): void {
+    if (this.form.valid) {
+      
+      this.isInvalid = false;
+      this.isFailure = false;
+      this.errorMessage = '';
+    }
+
+    else {
+      this.isInvalid = true;
+      // this.isPersonal = true;
+      // this.isAdditional = true;
+      // this.isWork = true;
+      // this.isOptions = true;
+      this.form.form.markAsPristine();
+      this.scroller.scrollToPosition([0,0]);
+    }
+  }
+  // #endregion
+
+  getFullName(): string {
+    return `${this.formModel.firstName} ${this.formModel.middleName} ${this.formModel.lastName}`
+  }
+
+
+  handleEdit(): void {
+    this.isEditing = true;
+    this.scroller.scrollToPosition([0,0]);
+  }
+  
+}

Clinics.Frontend/src/app/components/receptionist/waiting-list/waiting-list.component.html

@@ -10,7 +10,7 @@
 
         <!-- #region buttons-->
         <div class="custom-bttuons-after-title custom-create-button" >
-            <a><button class="btn btn-lg btn-outline-success mb-5">إضافة +</button></a>
+            <a [routerLink]="['create']"><button class="btn btn-lg btn-outline-success mb-5">إضافة +</button></a>
         </div>
         <!-- #endregion -->
 

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

@@ -18,7 +18,7 @@
 
                     <ul>
                         <li><a><button class="btn" [class]="{'btn-outline-secondary': true}"
-                                    (click)="openLoginForm(loginModal)">تسجيل الدخول</button></a></li>
+                                    (click)="openPopUp(loginModal)">تسجيل الدخول</button></a></li>
 
                         <li><a href="home#about"><button class="btn"
                                     [class]="{'btn-outline-primary': isSelected('About'), 'btn-outline-secondary': !isSelected('About')}"
@@ -98,7 +98,8 @@
                                 (click)="showDropdown = !showDropdown">خيارات <i
                                     class="bi bi-chevron-down toggle-dropdown"></i></button>
                             <ul [ngClass]="{'show': showDropdown}">
-                                <li><a>إضافة مريض</a></li>
+                                <li><a (click)="openPopUp(employeeSerialNumber) ;showDropdown = false;">الاستعلام عن موظف</a></li>
+                                <li><a (click)="showDropdown = false;" [routerLink]="['receptionist/employees/create']">إضافة موظف</a></li>
                                 <li (click)="onLogout();"><a>تسجيل الخروج</a></li>
                             </ul>
                         </li>
@@ -132,4 +133,12 @@
     </ng-template>
     <!-- #endregion -->
 
+    <!-- #region employee serial number pop-up -->
+    <ng-template #employeeSerialNumber let-modal>
+        <div *ngIf="userData?.role === RECEPTIONIST" class="modal-body">
+            <app-employee-serial-number-pop-up [parentModal]="modal"></app-employee-serial-number-pop-up>
+        </div>
+    </ng-template>
+    <!-- #endregion -->
+
 </div>
\ No newline at end of file

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

@@ -43,8 +43,8 @@ export class HeaderComponent {
 
   //#region Login
 
-  //#region Login form pop-up
-  openLoginForm(content: any): void {
+  //#region Open pop-up
+  openPopUp(content: any): void {
     this.modalService.open(content);
   }
 

Clinics.Frontend/src/app/components/shared/template/layout/layout.component.css

@@ -136,6 +136,7 @@ app-footer {
 ::ng-deep .custom-bttuons-after-title .btn {
     font-weight: 900;
     background-color: var(--heading-color);
+    border-color: var(--heading-color);
     color: white;
 }
 /* #endregion */