feat(dashboard): implement practitioner dashboard overview with waitng and open consultations preview (#29)

practitioner/angular.json

@@ -31,8 +31,11 @@
                 "input": "public"
               }
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/styles"]
+            },
             "styles": [
-              "src/styles.scss"
+              "src/styles/styles.scss"
             ],
             "scripts": []
           },
@@ -90,13 +93,19 @@
                 "input": "public"
               }
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/styles"]
+            },
             "styles": [
-              "src/styles.scss"
+              "src/styles/styles.scss"
             ],
             "scripts": []
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

practitioner/src/app/app.component.ts

@@ -3,6 +3,7 @@ import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
+  standalone: true,
   imports: [RouterOutlet],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'

practitioner/src/app/app.routes.ts

@@ -1,3 +1,15 @@
-import { Routes } from '@angular/router';
+import type { Routes } from '@angular/router';
+import { DashboardComponent } from './dashboard/dashboard.component';
+import { AppComponent } from './app.component';
+import { RoutePaths } from './constants/route-paths.enum';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    component: AppComponent,
+    children: [
+      { path: '', redirectTo: RoutePaths.Dashboard, pathMatch: 'full' },
+      { path: RoutePaths.Dashboard, component: DashboardComponent },
+    ],
+  },
+];

practitioner/src/app/components/consultations-card/consultations-card.component.html

@@ -0,0 +1,36 @@
+<div class="card consultation-card">
+  <h2>{{ title }}</h2>
+  <p class="card-description">{{ description }}</p>
+
+  @if (consultations.length === 0) {
+  <div class="empty-state">
+    <p>No consultations</p>
+  </div>
+  }
+
+  @if (consultations.length > 0) {
+  <div class="consultation-list">
+    @for (consultation of consultations; track consultation.id) {
+    <div class="consultation-item">
+      <div class="patient-info">
+        <div class="label">Patient</div>
+        <div class="value">{{ consultation.patientName }}</div>
+      </div>
+      <div class="time-info">
+        <div class="label">Time</div>
+        <div class="value">{{ formatTime(consultation.joinTime) }}</div>
+      </div>
+      <div class="action">
+        <i class="fas fa-chevron-right"></i>
+      </div>
+    </div>
+    }
+  </div>
+  }
+
+  @if (consultations.length > 3) {
+  <app-button [variant]="ButtonVariant.Outline" [routerLink]="routerLink" [size]="ButtonSize.Medium">
+    View all
+  </app-button>
+  }
+</div>

practitioner/src/app/components/consultations-card/consultations-card.component.scss

@@ -0,0 +1,126 @@
+@use './variables' as *;
+
+.card.consultation-card {
+    background-color: $color-background-card;
+    border-radius: 8px;
+    padding: 20px;
+    flex: 1;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    h2 {
+        font-size: 20px;
+        font-weight: 700;
+        margin-bottom: 10px;
+        color: $color-heading;
+    }
+
+    .card-description {
+        color: $color-description;
+        margin-bottom: 20px;
+        font-size: 14px;
+    }
+
+    .empty-state {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 200px;
+        background-color: $color-empty-state-bg;
+        border-radius: 8px;
+        color: $color-empty-state-text;
+        font-style: italic;
+        text-align: center;
+        padding: 0 10px;
+        flex: 1;
+    }
+
+    .consultation-list {
+        display: flex;
+        flex-direction: column;
+        flex: 1; 
+
+        .consultation-item {
+            display: flex;
+            padding: 15px 0;
+            border-bottom: 1px solid $color-border-bottom;
+            gap: 10px;
+
+            &:last-child {
+                border-bottom: none;
+            }
+
+            .patient-info,
+            .time-info {
+                flex: 1;
+
+                .label {
+                    font-size: 12px;
+                    color: $color-description;
+                    margin-bottom: 5px;
+                }
+
+                .value {
+                    font-size: 14px;
+                    font-weight: 500;
+                }
+            }
+
+            .action {
+                display: flex;
+                align-items: center;
+                color: $color-action-icon;
+            }
+        }
+    }
+
+    .view-all-button {
+        margin-top: auto; 
+        align-self: center;
+        background: none;
+        border: 1px solid $color-button-border;
+        border-radius: 20px;
+        padding: 8px 20px;
+        font-size: 14px;
+        cursor: pointer;
+
+        &:hover {
+            background-color: $color-button-hover;
+        }
+    }
+
+    @media (max-width: 768px) {
+        padding: 16px;
+
+        h2 {
+            font-size: 18px;
+        }
+
+        .card-description {
+            font-size: 13px;
+        }
+
+        .consultation-item {
+            flex-direction: column;
+            align-items: flex-start;
+
+            .label,
+            .value {
+                font-size: 13px;
+            }
+
+            .action {
+                margin-top: 8px;
+                justify-content: flex-end;
+                width: 100%;
+            }
+        }
+
+        .view-all-button {
+            padding: 6px 16px;
+            font-size: 13px;
+        }
+    }
+}

practitioner/src/app/components/consultations-card/consultations-card.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ConsultationCardComponent } from './consultations-card.component';
+
+describe('ConsultationCardComponent', () => {
+  let component: ConsultationCardComponent;
+  let fixture: ComponentFixture<ConsultationCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ConsultationCardComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ConsultationCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

practitioner/src/app/components/consultations-card/consultations-card.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Consultation } from '../../models/consultations/consultation.model';
+import { RouterLink } from '@angular/router';
+import { RoutePaths } from '../../constants/route-paths.enum';
+import { ButtonComponent } from '../ui/button/button.component';
+import { ButtonSize, ButtonVariant } from '../../constants/button.enums';
+
+@Component({
+  selector: 'app-consultation-card',
+  standalone: true,
+  imports: [CommonModule, RouterLink, ButtonComponent],
+  templateUrl: './consultations-card.component.html',
+  styleUrls: ['./consultations-card.component.scss'],
+})
+export class ConsultationCardComponent {
+  @Input() title = 'CONSULTATIONS';
+  @Input() description = 'List of consultations';
+  @Input() consultations: Consultation[] = [];
+  @Input() routerLink: RoutePaths = RoutePaths.OpenConsultations;
+
+  readonly ButtonSize = ButtonSize;
+  readonly ButtonVariant = ButtonVariant;
+
+  formatTime(date: Date): string {
+    return new Date(date).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }
+}

practitioner/src/app/components/ui/button/button.component.html

@@ -0,0 +1,9 @@
+@if (!routerLink) {
+<button [type]="type" [class]="variant + ' ' + size" [disabled]="disabled">
+    <ng-content></ng-content>
+</button>
+} @else {
+<a [routerLink]="routerLink" class="button-link" [class]="variant + ' ' + size">
+    <ng-content></ng-content>
+</a>
+}

practitioner/src/app/components/ui/button/button.component.scss

@@ -0,0 +1,60 @@
+@use './variables' as *;
+
+button,
+.button-link {
+    font-family: inherit;
+    border: none;
+    border-radius: $button-border-radius;
+    padding: $button-padding-md;
+    font-size: $button-font-size-md;
+    cursor: pointer;
+    text-decoration: none;
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: $button-transition;
+}
+
+.primary {
+    background-color: $color-primary;
+    color: white;
+
+    &:hover {
+        background-color: $color-primary-hover;
+    }
+}
+
+.secondary {
+    background-color: $color-secondary-bg;
+    color: $color-text;
+
+    &:hover {
+        background-color: $color-secondary-hover;
+    }
+}
+
+.outline {
+    border: 1px solid $color-outline-border;
+    background: none;
+    color: $color-text;
+
+    &:hover {
+        background-color: $color-button-hover;
+    }
+}
+
+.sm {
+    padding: $button-padding-sm;
+    font-size: $button-font-size-sm;
+}
+
+.md {
+    padding: $button-padding-md;
+    font-size: $button-font-size-md;
+}
+
+.lg {
+    padding: $button-padding-lg;
+    font-size: $button-font-size-lg;
+}

practitioner/src/app/components/ui/button/button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});