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

Vaibhavsahu2810 · 2025-04-09T17:26:43Z

Description

Fix #29
Implements the Practitioner Dashboard overview screen as described in issue. This screen provides a quick glance at active consultations.

Features Implemented

Waiting Room card
Displays last 3–5 waiting consultations (patient joined, practitioner not yet)
Open Consultations card
Shows last 3–5 ongoing consultations
Includes patient name and join time
“View All” button

proof of work

…ng and open consultations preview (HCW-home#29)

gorg16 · 2025-04-10T06:17:37Z

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

We should have one consultation card component

Removed seperate component and created a reusable consultation card

gorg16 · 2025-04-10T06:19:37Z

practitioner/src/index.html

@@ -6,8 +6,10 @@
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">


Use local font and icon files

used local fonts

gorg16 · 2025-04-10T06:20:48Z

practitioner/src/app/app.routes.ts

+    component: AppComponent,
+    children: [
+      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+      { path: 'dashboard', component: DashboardComponent },


use router paths from Enum of RoutePaths

added enum of routePaths in constants in constants folder and used it

gorg16 · 2025-04-10T06:21:49Z

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

+        justify-content: center;
+        align-items: center;
+        height: 200px;
+        background-color: #f9f9f9;


Replace hardcoded color with variable

created variables in root style.scss and used it everywhere

gorg16 · 2025-04-10T06:22:18Z

practitioner/src/app/components/waiting-room-card/waiting-room-card.component.ts

+    this.consultationService
+      .getWaitingConsultations()
+      .subscribe((consultations) => {
+        this.waitingConsultations = consultations.slice(0, 5);


we should not slice in frontend!

removed the slice logic

gorg16 · 2025-04-10T06:22:54Z

practitioner/src/app/dashboard/dashboard/dashboard.component.scss

+    justify-content: center; 
+
+    >app-waiting-room-card,
+    >app-open-consultations-card {


This styles should be removed!

Vaibhavsahu2810 · 2025-04-10T07:49:49Z

Hey @gorg16, Done with the changes as asked !!

gorg16 · 2025-04-10T09:55:13Z

admin/src/app/app.component.html

-    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
+    font-family: Helvetica, Arial, sans-serif;


remove any style form app component

oh i see , actually i am not working in admin section , just changed the font part by mistake , but will remove style from it

gorg16 · 2025-04-10T09:56:51Z

practitioner/src/styles.scss

+    border-width: 0;
+}
+
+:root {


use variables.scss for scss variables

Created a new section of styles to keep styles organized

gorg16 · 2025-04-10T11:12:15Z

practitioner/src/app/dashboard/dashboard/dashboard.component.html

+        [consultations]="waitingConsultations" [routerLink]="'/waiting-room'"></app-consultation-card>
+
+    <app-consultation-card [title]="'OPEN CONSULTATIONS'" [description]="'Consultations in progress'"
+        [consultations]="openConsultations" [routerLink]="'/consultations'"></app-consultation-card>


you should use your RoutePaths enum for all navigations

yup used everywhere now!!

gorg16 · 2025-04-10T11:13:13Z

practitioner/src/styles/styles.scss

+body {
+    font-family: sans-serif;
+    color: #333;
+    background-color: #f9f9f9;


use your variables for colors

gorg16 · 2025-04-10T11:14:47Z

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

+  <h2>{{ title }}</h2>
+  <p class="card-description">{{ description }}</p>
+
+  <div *ngIf="consultations.length === 0" class="empty-state">


use @if instead of *ngIf same for other directives

used @if, @for, and @else according to new syntax

gorg16 · 2025-04-10T12:26:47Z

practitioner/src/app/models/consultation.model.ts

+  id: string;
+  patientName: string;
+  joinTime: Date;
+  status: 'waiting' | 'active' | 'completed';


Create enum for status and use here

created and used where ever it is needed

gorg16 · 2025-04-10T12:28:11Z

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

+  }
+
+  @if (consultations.length > 5) {
+  <button class="view-all-button" [routerLink]="routerLink">


We should have common button component which will get variant as an input and some other Inputs

yup, created a new reusable element for button and added more sections

gorg16 · 2025-04-11T06:17:53Z

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

+        }
+    }
+
+    .view-all-button {


remove unused styles

earlier i have created this button but removed later as i moved button as a seperate component ,now removed its style as well

feat(dashboard): implement practitioner dashboard overview with waiti…

2633b9f

…ng and open consultations preview (HCW-home#29)

gorg16 reviewed Apr 10, 2025

View reviewed changes

fix changes as needed

41212c0

gorg16 reviewed Apr 10, 2025

View reviewed changes

Vaibhavsahu2810 added 2 commits April 10, 2025 16:32

created variable.scss

ed18939

changes

a5d1541

gorg16 reviewed Apr 10, 2025

View reviewed changes

Vaibhavsahu2810 added 2 commits April 10, 2025 17:01

used router path everywhere

4001a97

changes made

5631f21

gorg16 reviewed Apr 10, 2025

View reviewed changes

Vaibhavsahu2810 added 5 commits April 10, 2025 22:40

added status enum ,button , date-util

707dd3d

added sections

c6145c4

styles folder

0f4ed9f

fix dashboard

a0a0677

fix styles

fcefef2

gorg16 reviewed Apr 11, 2025

View reviewed changes

Vaibhavsahu2810 added 2 commits April 11, 2025 11:54

removed style

689d056

removed unused style

1f494fd

gorg16 approved these changes Apr 11, 2025

View reviewed changes

gorg16 merged commit 0fa36b3 into HCW-home:main Apr 11, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Vaibhavsahu2810 commented Apr 9, 2025 •

edited

Loading

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025

Vaibhavsahu2810 commented Apr 10, 2025 •

edited

Loading

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025 •

edited

Loading

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025 •

edited

Loading

gorg16 Apr 10, 2025

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025

gorg16 Apr 10, 2025

Vaibhavsahu2810 Apr 10, 2025 •

edited

Loading

gorg16 Apr 11, 2025

Vaibhavsahu2810 Apr 11, 2025 •

edited

Loading

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

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

Conversation

Vaibhavsahu2810 commented Apr 9, 2025 • edited Loading

Description

Features Implemented

proof of work

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vaibhavsahu2810 commented Apr 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vaibhavsahu2810 Apr 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vaibhavsahu2810 Apr 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vaibhavsahu2810 Apr 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Vaibhavsahu2810 Apr 11, 2025 • edited Loading

Choose a reason for hiding this comment

Vaibhavsahu2810 commented Apr 9, 2025 •

edited

Loading

Vaibhavsahu2810 commented Apr 10, 2025 •

edited

Loading

Vaibhavsahu2810 Apr 10, 2025 •

edited

Loading

Vaibhavsahu2810 Apr 10, 2025 •

edited

Loading

Vaibhavsahu2810 Apr 10, 2025 •

edited

Loading

Vaibhavsahu2810 Apr 11, 2025 •

edited

Loading