(F) Add doctor user card and collection comps

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

@@ -6,6 +6,7 @@ import { Roles } from './authentication/classes/roles';
 import { ForbiddenComponent } from './usecases/shared/components/errors/forbidden/forbidden.component';
 import { NotFoundComponent } from './usecases/shared/components/errors/not-found/not-found.component';
 import { TestSignalRComponent } from './notifications/components/test-signal-r/test-signal-r.component';
+import { DoctorUsersComponent } from './usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component';
 
 const routes: Routes = [
   {
@@ -20,12 +21,22 @@ const routes: Routes = [
     canActivate: [RoleGuard],
     data: { role: Roles.NotRegistered }
   },
+  
   {
     path: 'errors/forbidden',
     component: ForbiddenComponent,
     canActivate: [RoleGuard],
     data: { role: Roles.NotRegistered }
   },
+
+  {
+    path: 'admin/doctors',
+    component: DoctorUsersComponent,
+    canActivate: [RoleGuard],
+    // canActivateChild: [RoleGuard],
+    data: { role: Roles.Admin },
+    
+  },
   
   // #region Testing SignalR
   {

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

@@ -20,6 +20,8 @@ import { ForbiddenComponent } from './usecases/shared/components/errors/forbidde
 import { NotFoundComponent } from './usecases/shared/components/errors/not-found/not-found.component';
 import { TestSignalRComponent } from './notifications/components/test-signal-r/test-signal-r.component';
 import { SignalRService } from './notifications/services/signal-r.service';
+import { DoctorUsersComponent } from './usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component';
+import { DoctorUserComponent } from './usecases/admin/list-doctor-users/components/doctor-user/doctor-user.component';
 
 
 @NgModule({
@@ -56,7 +58,9 @@ import { SignalRService } from './notifications/services/signal-r.service';
     LoginFormComponent,
     ForbiddenComponent,
     NotFoundComponent,
-    TestSignalRComponent
+    TestSignalRComponent,
+    DoctorUserComponent,
+    DoctorUsersComponent,
   ],
   
   // identifies the root component that Angular should

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/components/doctor-user/doctor-user.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 {
+    font-weight: 900;
+    background-color: inherit;
+    border-color: var(--heading-color);
+    color: var(--heading-color);
+}
+
+.custom-edit-button button:hover {
+    background-color: var(--heading-color);
+    color: white;
+}
+
+/* #endregion */
+
+/* #region collection item */
+.collection-item {
+    background-color: #dff7ff;
+    text-align: center;
+    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 35%);
+    border-radius: 3%;
+    padding: 80px 20px;
+    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/usecases/admin/list-doctor-users/components/doctor-user/doctor-user.component.html

+<div class="collection-item">
+
+    <!-- #region icon -->
+    <div class="icon">
+        <i class="fas fa-user-md"></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>almouhannad.hafez</span>
+    </div>
+    <!-- #endregion -->
+
+    <!-- #region buttons-->
+
+    <div class="d-grid gap-3 custom-edit-button">
+        <button class="btn btn-outline-secondary">تعديل</button>
+    </div>
+
+    <!-- #endregion -->
+
+
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/components/doctor-user/doctor-user.component.ts

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

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component.css

+/* #region custom*/
+.custom-title {
+    width: 31%;
+    padding-bottom: 0.3em;
+    border-bottom: 2px solid var(--accent-color);
+    color: var(--heading-color);
+}
+
+.custom-title h2 {
+    font-weight: 700;
+}
+
+/* #endregion */
\ No newline at end of file

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

+<div class="custom-child" dir="rtl" style="cursor: auto;">
+    <section class="section">
+
+        <!-- #region Title -->
+        <div class="container text-center mb-5 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-user></app-doctor-user>
+                </div>
+            </div>
+        </div>
+        <!-- #endregion -->
+
+    </section>
+</div>
\ No newline at end of file

Clinics.Frontend/src/app/usecases/admin/list-doctor-users/components/doctor-users/doctor-users.component.ts

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

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

@@ -54,7 +54,7 @@
                                     [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"
+                        <li><a [routerLink]="['admin/doctors']"><button class="btn"
                                     [class]="{'btn-outline-primary': isSelected('Admin-Dorctors'), 'btn-outline-secondary': !isSelected('Admin-Dorctors')}"
                                     (click)="selectButton('Admin-Dorctors')">الأطباء</button></a></li>