(F) Add receptionists pages

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

@@ -12,6 +12,8 @@ import { CreateDoctorUserFormComponent } from './components/admin/create-doctor-
 import { UpdateDoctorUserComponent } from './components/admin/update-doctor-user/update-doctor-user.component';
 import { ReceptionistUserComponent } from './components/admin/receptionist-user/receptionist-user.component';
 import { ReceptionistUsersComponent } from './components/admin/receptionist-users/receptionist-users.component';
+import { ReceptionistDashboardComponent } from './components/receptionist/receptionist-dashboard/receptionist-dashboard.component';
+import { WaitingListComponent } from './components/receptionist/waiting-list/waiting-list.component';
 
 const routes: Routes = [
   {
@@ -65,6 +67,26 @@ const routes: Routes = [
       }
     ]
   },
+
+  {
+    path: 'receptionist',
+    component: ReceptionistDashboardComponent,
+    canActivate: [RoleGuard],
+    canActivateChild: [RoleGuard],
+    
+    data: { role: Roles.Receptionist },
+    children: [
+      {
+        path: '',
+        redirectTo: '/home',
+        pathMatch: 'full'
+      },
+      {
+        path: 'waitinglist',
+        component: WaitingListComponent
+      }
+    ]
+  },
   
   // #region Testing SignalR
   {

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

@@ -30,6 +30,9 @@ import { UpdateDoctorUserDataFormComponent } from './components/admin/update-doc
 import { ReceptionistUserComponent } from './components/admin/receptionist-user/receptionist-user.component';
 import { ReceptionistUsersComponent } from './components/admin/receptionist-users/receptionist-users.component';
 import { ReceptionistUsersService } from './services/admin/receptionist-users.service';
+import { ReceptionistDashboardComponent } from './components/receptionist/receptionist-dashboard/receptionist-dashboard.component';
+import { WaitingListComponent } from './components/receptionist/waiting-list/waiting-list.component';
+import { WaitingListItemComponent } from './components/receptionist/waiting-list-item/waiting-list-item.component';
 
 
 @NgModule({
@@ -78,6 +81,9 @@ import { ReceptionistUsersService } from './services/admin/receptionist-users.se
     UpdateDoctorUserDataFormComponent,
     ReceptionistUserComponent,
     ReceptionistUsersComponent,
+    ReceptionistDashboardComponent,
+    WaitingListComponent,
+    WaitingListItemComponent,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/components/admin/admin-dashboard/admin-dashboard.component.css

-::ng-deep .custom-title {
-    width: fit-content;
-    padding-bottom: 0.3em;
-    border-bottom: 2px solid var(--accent-color);
-    color: var(--heading-color);
-}
-
-::ng-deep .custom-title h2 {
-    font-weight: 700;
-}
-

Clinics.Frontend/src/app/components/admin/doctor-users/doctor-users.component.html

@@ -22,7 +22,6 @@
                 </div>
             </div>
         </div>
-
         <!-- #endregion -->
 
     </section>

Clinics.Frontend/src/app/components/receptionist/receptionist-dashboard/receptionist-dashboard.component.html

+<div class="custom-child">
+    <router-outlet></router-outlet>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/components/receptionist/receptionist-dashboard/receptionist-dashboard.component.ts

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

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

+/* #region custom*/
+
+.custom-user-data {
+    color: var(--heading-color);
+    font-weight: 700;
+}
+
+.custom-user-full-name h3 {
+    font-weight: 700;
+    padding-bottom: 0.5em;
+
+    border-bottom: 1px solid var(--accent-color);
+}
+
+.custom-edit-button button:hover {
+    font-weight: 900;
+    background-color: inherit;
+    border-color: var(--heading-color);
+    color: var(--heading-color);
+}
+
+.custom-edit-button button {
+    font-weight: 900;
+
+    background-color: var(--heading-color);
+    color: white;
+}
+
+.custom-edit-button i {
+    font-weight: 900;
+    margin-right: 0.5em;
+}
+
+/* #endregion */
+
+/* #region collection item */
+.collection-item {
+    background-color: var(--background-color);
+    text-align: center;
+    border: 1px solid var(--accent-color);
+    border-radius: 3%;
+    padding-top: 40px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 40px;
+    transition: all ease-in-out 0.3s;
+    height: 100%;
+}
+
+.collection-item .icon {
+    margin: 0 auto;
+    width: 64px;
+    height: 64px;
+    background: var(--heading-color);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    transition: 0.3s;
+    transform-style: preserve-3d;
+}
+
+.collection-item .icon i {
+    color: var(--contrast-color);
+    font-size: 28px;
+    transition: ease-in-out 0.3s;
+}
+
+.collection-item .icon::before {
+    position: absolute;
+    content: "";
+    left: -8px;
+    top: -8px;
+    height: 100%;
+    width: 100%;
+    background: color-mix(in srgb, var(--accent-color), transparent 80%);
+    border-radius: 5px;
+    transition: all 0.3s ease-out 0s;
+    transform: translateZ(-1px);
+}
+
+.collection-item:hover {
+    box-shadow: 2px 2px 2px var(--accent-color)
+}
+
+/* #endregion */
\ No newline at end of file

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

+<div class="collection-item">
+
+    <!-- #region icon -->
+    <div class="icon">
+        <i class="bi bi-clock-history"></i>
+    </div>
+    <!-- #endregion -->
+
+    <!-- #region Name-->
+    <div class="mb-3" class="custom-user-full-name">
+        <h3>أحمد عبدالله توفيق العلي</h3>
+    </div>
+    <!-- #endregion -->
+
+    <!-- #region details-->
+
+    <div class="custom-user-data mb-4 mt-4">
+        <span>نوع الزيارة:</span>
+        <span></span>
+    </div>
+
+    <div class="custom-user-data mb-4 mt-4">
+        <span>ساعة الوصول:</span>
+        <span></span>
+    </div>
+    <!-- #endregion -->
+
+    <!-- #region buttons-->
+
+
+    <a class="d-grid gap-3 custom-edit-button">
+        <button class="btn btn-outline-secondary">
+            إرسال إلى طبيب<i class="fas fa-arrow-left"></i>
+        </button>
+    </a>
+
+
+    <!-- #endregion -->
+
+
+</div>
\ No newline at end of file

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

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

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

+<div class="custom-child" dir="rtl">
+    <section class="section">
+        
+        <!-- #region Title-->
+        <div class="custom-title">
+            <h2>قائمة الانتظار:</h2>
+            <p>مرتبة حسب ساعة الوصول</p>
+        </div>
+        <!-- #endregion -->
+
+        <!-- #region buttons-->
+        <div class="custom-bttuons-after-title custom-create-button" >
+            <a><button class="btn btn-lg btn-outline-success mb-5">إضافة +</button></a>
+        </div>
+        <!-- #endregion -->
+
+        <!-- #region container-->
+        <div class="container">
+            <div class="row gy-5 ">
+                <div class="col-lg-4 col-md-6">
+                    <app-waiting-list-item></app-waiting-list-item>
+                </div>
+            </div>
+        </div>
+        <!-- #endregion -->
+
+    </section>
+</div>
\ No newline at end of file

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

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

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

@@ -98,10 +98,19 @@
                                 (click)="showDropdown = !showDropdown">خيارات <i
                                     class="bi bi-chevron-down toggle-dropdown"></i></button>
                             <ul [ngClass]="{'show': showDropdown}">
+                                <li><a>إضافة مريض</a></li>
                                 <li (click)="onLogout();"><a>تسجيل الخروج</a></li>
                             </ul>
                         </li>
 
+                        <li><a><button class="btn"
+                            [class]="{'btn-outline-primary': isSelected('RecDotctors'), 'btn-outline-secondary': !isSelected('RecDotctors')}"
+                            (click)="selectButton('RecDotctors')">الأطباء</button></a></li>
+
+                        <li><a [routerLink]="'receptionist/waitinglist'"><button class="btn"
+                            [class]="{'btn-outline-primary': isSelected('WaitingList'), 'btn-outline-secondary': !isSelected('WaitingList')}"
+                            (click)="selectButton('WaitingList')">قائمة الانتظار</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>

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

@@ -100,14 +100,41 @@ app-footer {
 
 ::ng-deep .custom-title {
     width: fit-content;
-    padding-bottom: 0.3em;
     border-bottom: 2px solid var(--accent-color);
     color: var(--heading-color);
     margin: auto;
 }
 
 ::ng-deep .custom-title h2 {
+    margin-bottom: 0.3em;
     font-weight: 700;
 }
 
+::ng-deep .custom-title p {
+    margin-bottom: 0.3em;
+    font-weight: 700;
+    text-align: center;
+}
+
+::ng-deep .custom-bttuons-after-title {
+    margin-top: 1em;
+    text-align: center;
+}
+
+::ng-deep .custom-bttuons-after-title button{
+    width: 25%;
+}
+
+::ng-deep .custom-bttuons-after-title button:hover {
+    font-weight: 900;
+    background-color: inherit;
+    border-color: var(--heading-color);
+    color: var(--heading-color);
+}
+
+::ng-deep .custom-bttuons-after-title button {
+    font-weight: 900;
+    background-color: var(--heading-color);
+    color: white;
+}
 /* #endregion */