(F) Add doctors page for receptionists

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

@@ -14,6 +14,7 @@ import { ReceptionistUserComponent } from './components/admin/receptionist-user/
 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';
+import { DoctorsComponent } from './components/receptionist/doctors/doctors.component';
 
 const routes: Routes = [
   {
@@ -84,6 +85,10 @@ const routes: Routes = [
       {
         path: 'waitinglist',
         component: WaitingListComponent
+      },
+      {
+        path: 'doctors',
+        component: DoctorsComponent
       }
     ]
   },

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

@@ -33,6 +33,8 @@ import { ReceptionistUsersService } from './services/admin/receptionist-users.se
 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';
+import { DoctorsComponent } from './components/receptionist/doctors/doctors.component';
+import { DoctorItemComponent } from './components/receptionist/doctor-item/doctor-item.component';
 
 
 @NgModule({
@@ -84,6 +86,8 @@ import { WaitingListItemComponent } from './components/receptionist/waiting-list
     ReceptionistDashboardComponent,
     WaitingListComponent,
     WaitingListItemComponent,
+    DoctorsComponent,
+    DoctorItemComponent,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/components/receptionist/doctor-item/doctor-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;
+    width: fit-content;
+    margin: auto;
+    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 */
+
+/* #region Status*/
+
+.collection-item .online-status {
+    position: absolute;
+    top: -5px; /* Adjust the position to make it overlap the icon */
+    right: -5px; /* Adjust the position to make it overlap the icon */
+    width: 20px; /* Increase the size of the circle */
+    height: 20px;
+    border-radius: 50%;
+    background-color: #34C759; /* Green color for online status */
+    border: 3px solid #fff; /* Increase the border width to make it more visible */
+}
+.collection-item .online-status.online {
+    background-color: #34C759; /* Green color for online status */
+}
+
+.collection-item .online-status.in-work {
+    background-color: #ffd220; /* Yellow color for in-work status */
+}
+
+.collection-item .online-status.busy {
+    background-color: #FF3737; /* Red color for busy status */
+}
+
+/* #endregion */

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

+<div class="collection-item">
+
+    <!-- #region icon -->
+    <div class="icon">
+        <i class="fas fa-user-md"></i>
+        <span class="online-status busy"></span>
+    </div>
+    <!-- #endregion -->
+
+    <!-- #region Name-->
+    <div class="custom-user-full-name">
+        <h3 style="border:none;">د. تيسير عبداللطيف الأحمر</h3>
+    </div>
+    <!-- #endregion -->
+
+    <!-- #region details-->
+
+    <div class="custom-user-data mb-2">
+        <span>معلومات التواصل: </span>
+        <span></span>
+    </div>
+
+    <div class="custom-user-data mb-1">
+        <a><i style="margin-left: 0.3em;" class="bi bi-telephone"></i></a>
+        <span>هاتف العمل: </span>
+        <span>0312515011</span>
+    </div>
+
+    <div class="custom-user-data mb-1">
+        <a><i style="margin-left: 0.3em;" class="bi bi-telephone"></i></a>
+        <span>هاتف المنزل: </span>
+        <span>0312515011</span>
+    </div>   
+
+
+    <!-- #endregion -->
+
+
+</div>
\ No newline at end of file

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

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

Clinics.Frontend/src/app/components/receptionist/doctors/doctors.component.html

+<div class="custom-child" dir="rtl">
+    <section class="section">
+        
+        <!-- #region Title-->
+        <div class="custom-title">
+            <h2>الأطباء:</h2>
+        </div>
+        <!-- #endregion -->
+
+        <!-- #region container-->
+        <div class="container">
+            <div class="row gy-5 ">
+                <div class="col-lg-4 col-md-6">
+                    <app-doctor-item></app-doctor-item>
+                </div>
+            </div>
+        </div>
+        <!-- #endregion -->
+
+    </section>
+</div>
\ No newline at end of file

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

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

Clinics.Frontend/src/app/components/shared/home/home.component.css

@@ -108,6 +108,8 @@
 /* #region doctors */
 .doctors .team-member {
   background-color: var(--surface-color);
+  color: var(--heading-color);
+
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
   position: relative;
   border-radius: 5px;
@@ -202,6 +204,7 @@
 
 .doctors .team-member .social a {
   background: color-mix(in srgb, var(--default-color), transparent 94%);
+  
   transition: ease-in-out 0.3s;
   display: flex;
   align-items: center;
@@ -212,7 +215,7 @@
 }
 
 .doctors .team-member .social a i {
-  color: color-mix(in srgb, var(--default-color), transparent 20%);
+  color: var(--heading-color);
   font-size: 16px;
   margin: 0 2px;
 }

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

@@ -103,7 +103,7 @@
                             </ul>
                         </li>
 
-                        <li><a><button class="btn"
+                        <li><a [routerLink]="['receptionist/doctors']"><button class="btn"
                             [class]="{'btn-outline-primary': isSelected('RecDotctors'), 'btn-outline-secondary': !isSelected('RecDotctors')}"
                             (click)="selectButton('RecDotctors')">الأطباء</button></a></li>
 

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

@@ -108,6 +108,7 @@ app-footer {
 ::ng-deep .custom-title h2 {
     margin-bottom: 0.3em;
     font-weight: 700;
+    text-align: center;
 }
 
 ::ng-deep .custom-title p {