(F) Add doctos comps

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

@@ -47,6 +47,9 @@ import { ScrollToTopDirective } from './directives/scroll-to-top.directive';
 import { DoctorDashboardComponent } from './components/doctor/doctor-dashboard/doctor-dashboard.component';
 import { DoctorNotificationsService } from './services/doctorsNotifications/doctor-notifications.service';
 import { DoctorStatusComponent } from './components/doctor/doctor-status/doctor-status.component';
+import { AskForSerialNumberComponent } from './components/doctor/ask-for-serial-number/ask-for-serial-number.component';
+import { HistoryComponent } from './components/doctor/history/history.component';
+import { VisitComponent } from './components/doctor/visit/visit.component';
 
 
 @NgModule({
@@ -112,6 +115,9 @@ import { DoctorStatusComponent } from './components/doctor/doctor-status/doctor-
     ScrollToTopDirective,
     DoctorDashboardComponent,
     DoctorStatusComponent,
+    AskForSerialNumberComponent,
+    HistoryComponent,
+    VisitComponent,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/components/doctor/ask-for-serial-number/ask-for-serial-number.component.html

+<!-- To avoid first field auto focus -->
+<div class="form-group">
+    <input type="text" autofocus="autofocus" style="display:none" />
+</div>
+
+<div class="custom-child">
+    <section class="section">
+
+        <div class="custom-title mb-3">
+            <h2 *ngIf="type === 'query'">الاستعلام عن موظف</h2>
+            <h2 *ngIf="type === 'command'">تسجيل زيارة لموظف</h2>
+        </div>
+
+        <div *ngIf="isFailure" class="d-grid mb-3">
+            <button type="button" class="btn btn-danger" style="cursor: auto; font-weight:700;">خطأ: {{errorMessage}}</button>
+        </div>
+
+
+        <form #form="ngForm" (submit)="onSubmit()" autocomplete="off">
+
+            <div class="form-group">
+                <div class="custom-field-layout mb-4" style="width:60%;">
+                    <input type="text" class="form-control" placeholder="ادخل الرقم الذاتي" dir="ltr"
+
+                    [(ngModel)]="serialNumber" 
+                    name="serialNumber"
+
+                    #serialNumberField="ngModel" required maxlength="50" pattern="[0-9]+">
+
+                    <div *ngIf="(serialNumberField.touched || serialNumberField.dirty) && serialNumberField.errors" class="mt-2 custom-errors-layout">
+                        <span class="text-danger">
+                            {{
+                                serialNumberField.errors['required'] ? 'هذا الحقل مطلوب'
+                                : serialNumberField.errors['pattern'] ? 'الرقم الذاتي غير صالح'
+                                : ''
+                            }}
+                        </span>
+                    </div>
+
+                </div>
+            </div>
+
+            <div class="container">
+                <div class="custom-ok-button mb-2">
+                    <button class="btn btn-outline-primary"
+                    [disabled]="!form.dirty || form.invalid"
+                    type="submit"
+                    >تأكيد</button>
+                </div>
+    
+                <div class="custom-no-button">
+                    <button type="button" class="btn btn-outline-primary"
+                    (click)="parentModal.dismiss()">الغاء</button>
+                </div>
+    
+            </div>
+
+        </form>
+    
+
+
+
+    </section>
+</div>

Clinics.Frontend/src/app/components/doctor/ask-for-serial-number/ask-for-serial-number.component.ts

+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-ask-for-serial-number',
+  templateUrl: './ask-for-serial-number.component.html',
+  styleUrl: './ask-for-serial-number.component.css'
+})
+export class AskForSerialNumberComponent {
+
+  constructor(){}
+
+  @Input("parentModal") parentModal: any;
+  @Input("type") type: 'query' | 'command';
+
+  isFailure: boolean = false;
+  errorMessage: string = 'الموظف غير موجود';
+
+  serialNumber: string;
+
+  onSubmit(): void {
+
+  }
+
+}

Clinics.Frontend/src/app/components/doctor/history/history.component.html

+<p>history works!</p>

Clinics.Frontend/src/app/components/doctor/history/history.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-history',
+  templateUrl: './history.component.html',
+  styleUrl: './history.component.css'
+})
+export class HistoryComponent {
+
+}

Clinics.Frontend/src/app/components/doctor/visit/visit.component.html

+<p>visit works!</p>

Clinics.Frontend/src/app/components/doctor/visit/visit.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-visit',
+  templateUrl: './visit.component.html',
+  styleUrl: './visit.component.css'
+})
+export class VisitComponent {
+
+}

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

@@ -76,10 +76,15 @@
                                 (click)="showDropdown = !showDropdown">خيارات <i
                                     class="bi bi-chevron-down toggle-dropdown"></i></button>
                             <ul [ngClass]="{'show': showDropdown}">
+                                <li (click)="openPopUp(doctorAskForSerialNumberQuery);"><a>الاستعلام عن موظف</a></li>
                                 <li (click)="onLogout();"><a>تسجيل الخروج</a></li>
                             </ul>
                         </li>
 
+                        <li><a><button class="btn"
+                            [class]="{'btn-outline-primary': isSelected('AddVisit'), 'btn-outline-secondary': !isSelected('AddVisit')}"
+                            (click)="showDropdown=false; selectButton('AddVisit');openPopUp(doctorAskForSerialNumberCommand);">تسجيل زيارة</button></a></li>                        
+
                         <li><a [routerLink]="'doctor/waitinglist'" appScrollToTop><button class="btn"
                             [class]="{'btn-outline-primary': isSelected('WaitingList'), 'btn-outline-secondary': !isSelected('WaitingList')}"
                             (click)="showDropdown=false; selectButton('WaitingList')">قائمة الانتظار</button></a></li>                        
@@ -145,4 +150,16 @@
     </ng-template>
     <!-- #endregion -->
 
+    <ng-template #doctorAskForSerialNumberQuery let-modal>
+        <div *ngIf="userData?.role === DOCTOR" class="modal-body">
+            <app-ask-for-serial-number [type]="'query'" [parentModal]="modal"></app-ask-for-serial-number>
+        </div>
+    </ng-template>
+
+    <ng-template #doctorAskForSerialNumberCommand let-modal>
+        <div *ngIf="userData?.role === DOCTOR" class="modal-body">
+            <app-ask-for-serial-number [type]="'command'" [parentModal]="modal"></app-ask-for-serial-number>
+        </div>
+    </ng-template>
+
 </div>
\ No newline at end of file

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

@@ -197,4 +197,28 @@ app-footer {
     font-weight: 400;
     color: var(--heading-color);
 }
+
+
+::ng-deep .custom-field-layout{
+    text-align: center;
+    margin: auto;
+}
+
+::ng-deep .custom-field-layout input{
+    width: 100%;
+    border: 1px solid var(--heading-color);
+    color: var(--heading-color);
+    text-align: center;
+}
+
+::ng-deep .custom-field-layout input:focus{
+    box-shadow: 0 0 0 0.1em var(--heading-color);
+    border-color: var(--heading-color);
+}
+
+::ng-deep .custom-errors-layout span{
+    font-weight: 800;
+}
+
+
 /* #endregion */