fix(dashboard): resolve pr comments

Signed-off-by: Asitha de Silva <asithade@gmail.com>

Author: asithade

apps/lfx-one/src/app/layouts/main-layout/main-layout.component.ts

@@ -2,8 +2,10 @@
 // SPDX-License-Identifier: MIT
 
 import { CommonModule } from '@angular/common';
-import { Component, effect, inject, signal, WritableSignal } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { NavigationEnd, Router, RouterModule } from '@angular/router';
+import { AppService } from '@app/shared/services/app.service';
 import { SidebarComponent } from '@components/sidebar/sidebar.component';
 import { SidebarMenuItem } from '@lfx-one/shared/interfaces';
 import { filter } from 'rxjs';
@@ -17,9 +19,10 @@ import { filter } from 'rxjs';
 })
 export class MainLayoutComponent {
   private readonly router = inject(Router);
+  private readonly appService = inject(AppService);
 
-  // Mobile sidebar state
-  public showMobileSidebar: WritableSignal<boolean> = signal(false);
+  // Expose mobile sidebar state from service
+  protected readonly showMobileSidebar = this.appService.showMobileSidebar;
 
   // Sidebar navigation items
   protected readonly sidebarItems: SidebarMenuItem[] = [
@@ -87,25 +90,17 @@ export class MainLayoutComponent {
 
   public constructor() {
     // Close mobile sidebar on navigation
-    this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
-      this.closeMobileSidebar();
-    });
-
-    // Listen for custom event from header
-    effect(() => {
-      const handleToggle = () => {
-        this.showMobileSidebar.set(!this.showMobileSidebar());
-      };
-
-      window.addEventListener('toggleMobileSidebar', handleToggle);
-
-      return () => {
-        window.removeEventListener('toggleMobileSidebar', handleToggle);
-      };
-    });
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntilDestroyed()
+      )
+      .subscribe(() => {
+        this.appService.closeMobileSidebar();
+      });
   }
 
   public closeMobileSidebar(): void {
-    this.showMobileSidebar.set(false);
+    this.appService.closeMobileSidebar();
   }
 }

apps/lfx-one/src/app/modules/pages/dashboard/components/my-meetings/my-meetings.component.html

@@ -1,7 +1,7 @@
 <!-- Copyright The Linux Foundation and each contributor to LFX. -->
 <!-- SPDX-License-Identifier: MIT -->
 
-<lfx-card data-testid="section-my-meetings" styleClass="hover:shadow-lg transition-shadow h-full flex flex-col">
+<lfx-card data-testid="dashboard-my-meetings-card" styleClass="hover:shadow-lg transition-shadow h-full flex flex-col">
   <ng-template #header>
     <div class="flex items-center gap-3 p-6 border-b border-gray-100">
       <div class="w-12 h-12 rounded-lg bg-gray-50 flex items-center justify-center">
@@ -12,9 +12,11 @@ <h2 class="text-base font-display font-medium text-gray-900">My Meetings</h2>
   </ng-template>
 
   <div class="p-6 flex-1 flex flex-col">
-    <div class="space-y-4 flex-1" data-testid="my-meetings-list">
-      @for (item of meetings(); track item.title) {
-        <div class="p-4 bg-white border border-gray-200 rounded-lg hover:border-gray-300 transition-colors" [attr.data-testid]="'meeting-' + item.title">
+    <div class="space-y-4 flex-1" data-testid="dashboard-my-meetings-list">
+      @for (item of meetings(); track item.time) {
+        <div
+          class="p-4 bg-white border border-gray-200 rounded-lg hover:border-gray-300 transition-colors"
+          [attr.data-testid]="'dashboard-my-meetings-item-' + item.title">
           <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
             <div class="flex items-center gap-3">
               <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0">
@@ -26,15 +28,15 @@ <h2 class="text-base font-display font-medium text-gray-900">My Meetings</h2>
               </div>
             </div>
             <div class="flex items-center gap-2 justify-between sm:justify-start w-full sm:w-auto">
-              <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-gray-100 text-xs text-gray-600" data-testid="meeting-attendees">
+              <span class="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-gray-100 text-xs text-gray-600" data-testid="dashboard-my-meetings-attendees">
                 <i class="fa-light fa-users text-xs"></i>
                 {{ item.attendees }}
               </span>
               <button
                 type="button"
                 (click)="handleJoinMeeting(item)"
                 class="px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-md transition-colors min-h-[44px] sm:min-h-0"
-                data-testid="meeting-join-button"
+                data-testid="dashboard-my-meetings-join-button"
                 aria-label="Join meeting">
                 Join
               </button>

apps/lfx-one/src/app/modules/pages/dashboard/components/my-meetings/my-meetings.component.ts

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: MIT
 
 import { CommonModule } from '@angular/common';
-import { Component, computed, inject, output, signal } from '@angular/core';
+import { Component, computed, inject, output } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { MeetingService } from '@app/shared/services/meeting.service';
 import { CardComponent } from '@components/card/card.component';
 
@@ -17,7 +18,7 @@ import type { Meeting, MeetingItem, MeetingOccurrence } from '@lfx-one/shared/in
 })
 export class MyMeetingsComponent {
   private readonly meetingService = inject(MeetingService);
-  private readonly allMeetings = signal<Meeting[]>([]);
+  private readonly allMeetings = toSignal(this.meetingService.getMeetings(), { initialValue: [] });
 
   public readonly joinMeeting = output<MeetingItem>();
 
@@ -77,13 +78,6 @@ export class MyMeetingsComponent {
       }));
   });
 
-  public constructor() {
-    // Load meetings when component initializes
-    this.meetingService.getMeetings().subscribe((meetings) => {
-      this.allMeetings.set(meetings);
-    });
-  }
-
   public handleJoinMeeting(meeting: MeetingItem): void {
     this.joinMeeting.emit(meeting);
   }

apps/lfx-one/src/app/modules/pages/dashboard/components/my-projects/my-projects.component.html

@@ -1,7 +1,7 @@
 <!-- Copyright The Linux Foundation and each contributor to LFX. -->
 <!-- SPDX-License-Identifier: MIT -->
 
-<lfx-card data-testid="section-my-projects" styleClass="hover:shadow-lg transition-shadow">
+<lfx-card data-testid="dashboard-my-projects-card" styleClass="hover:shadow-lg transition-shadow">
   <ng-template #header>
     <div class="flex items-center gap-3 p-6 border-b border-gray-100">
       <div class="w-12 h-12 rounded-lg bg-gray-50 flex items-center justify-center">
@@ -12,15 +12,15 @@ <h2 class="text-base font-display font-medium text-gray-900">My Projects</h2>
   </ng-template>
 
   <div class="p-6">
-    <div class="flex flex-col gap-4" data-testid="my-projects-list">
+    <div class="flex flex-col gap-4" data-testid="dashboard-my-projects-list">
       @for (item of projects; track item.name) {
-        <div class="flex flex-col lg:flex-wrap lg:flex-row lg:gap-0" [attr.data-testid]="'project-' + item.name">
+        <div class="flex flex-col lg:flex-wrap lg:flex-row lg:gap-0" [attr.data-testid]="'dashboard-my-projects-item-' + item.name">
           <!-- Project Logo & Name -->
           <div
             class="p-4 bg-gray-50 rounded-t-lg lg:rounded-l-lg lg:rounded-r-none lg:rounded-t-lg border border-gray-200 border-b-0 lg:border-b lg:border-r-0 w-full lg:flex-1 lg:min-w-[200px]">
             <div class="flex items-center gap-3">
               @if (item.logo) {
-                <img [src]="item.logo" [alt]="item.name + ' logo'" class="w-12 h-12 object-contain flex-shrink-0" data-testid="project-logo" />
+                <img [src]="item.logo" [alt]="item.name + ' logo'" class="w-12 h-12 object-contain flex-shrink-0" data-testid="dashboard-my-projects-logo" />
               } @else {
                 <div class="w-12 h-12 bg-gray-300 rounded-lg flex items-center justify-center flex-shrink-0">
                   <i class="fa-light fa-folder text-gray-600 text-xl"></i>

apps/lfx-one/src/app/modules/pages/dashboard/components/pending-actions/pending-actions.component.html

@@ -1,7 +1,7 @@
 <!-- Copyright The Linux Foundation and each contributor to LFX. -->
 <!-- SPDX-License-Identifier: MIT -->
 
-<lfx-card data-testid="section-pending-actions" styleClass="hover:shadow-lg transition-shadow h-full flex flex-col">
+<lfx-card data-testid="dashboard-pending-actions-card" styleClass="hover:shadow-lg transition-shadow h-full flex flex-col">
   <ng-template #header>
     <div class="flex items-center gap-3 p-6 border-b border-gray-100">
       <div class="w-12 h-12 rounded-lg bg-gray-50 flex items-center justify-center">
@@ -12,7 +12,7 @@ <h2 class="text-base font-display font-medium text-gray-900">Pending Actions</h2
   </ng-template>
 
   <div class="p-6 flex-1 flex flex-col">
-    <div class="space-y-4 flex-1" data-testid="pending-actions-list">
+    <div class="space-y-4 flex-1" data-testid="dashboard-pending-actions-list">
       @for (item of pendingActions; track item.text) {
         <div
           class="p-4 border rounded-lg"
@@ -22,7 +22,7 @@ <h2 class="text-base font-display font-medium text-gray-900">Pending Actions</h2
             'bg-green-50 border-green-200': item.color === 'green',
             'bg-purple-50 border-purple-200': item.color === 'purple',
           }"
-          [attr.data-testid]="'pending-action-' + item.type">
+          [attr.data-testid]="'dashboard-pending-actions-item-' + item.type">
           <!-- Header with Type and Badge -->
           <div class="flex items-start justify-between mb-3">
             <div class="flex items-center gap-2">
@@ -48,7 +48,7 @@ <h2 class="text-base font-display font-medium text-gray-900">Pending Actions</h2
             </div>
             <span
               class="inline-flex items-center justify-center rounded-md px-2 py-0.5 text-xs font-medium bg-white text-gray-700 border border-gray-200"
-              data-testid="pending-action-badge">
+              data-testid="dashboard-pending-actions-badge">
               {{ item.badge }}
             </span>
           </div>
@@ -78,7 +78,7 @@ <h2 class="text-base font-display font-medium text-gray-900">Pending Actions</h2
               'border-green-300 text-green-700 hover:bg-green-100': item.color === 'green',
               'border-purple-300 text-purple-700 hover:bg-purple-100': item.color === 'purple',
             }"
-            data-testid="pending-action-button">
+            data-testid="dashboard-pending-actions-button">
             {{ item.buttonText }}
           </button>
         </div>

apps/lfx-one/src/app/modules/pages/dashboard/components/recent-progress/recent-progress.component.html

@@ -1,7 +1,7 @@
 <!-- Copyright The Linux Foundation and each contributor to LFX. -->
 <!-- SPDX-License-Identifier: MIT -->
 
-<lfx-card data-testid="section-recent-progress" styleClass="hover:shadow-lg transition-shadow">
+<lfx-card data-testid="dashboard-recent-progress-card" styleClass="hover:shadow-lg transition-shadow">
   <ng-template #header>
     <div class="flex items-center justify-between p-6 border-b border-gray-100">
       <div class="flex items-center gap-3">
@@ -15,15 +15,15 @@ <h2 class="text-base font-display font-medium text-gray-900">Recent Progress</h2
           type="button"
           (click)="scrollLeft()"
           class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-300 text-gray-600 hover:bg-gray-50 transition-colors"
-          data-testid="recent-progress-scroll-left"
+          data-testid="dashboard-recent-progress-scroll-left"
           aria-label="Scroll left">
           <i class="fa-light fa-chevron-left"></i>
         </button>
         <button
           type="button"
           (click)="scrollRight()"
           class="w-8 h-8 flex items-center justify-center rounded-full border border-gray-300 text-gray-600 hover:bg-gray-50 transition-colors"
-          data-testid="recent-progress-scroll-right"
+          data-testid="dashboard-recent-progress-scroll-right"
           aria-label="Scroll right">
           <i class="fa-light fa-chevron-right"></i>
         </button>
@@ -32,18 +32,20 @@ <h2 class="text-base font-display font-medium text-gray-900">Recent Progress</h2
   </ng-template>
 
   <div class="p-6">
-    <div #progressScroll class="flex gap-4 overflow-x-auto pb-2 hide-scrollbar scroll-smooth" data-testid="recent-progress-items">
+    <div #progressScroll class="flex gap-4 overflow-x-auto pb-2 hide-scrollbar scroll-smooth" data-testid="dashboard-recent-progress-items">
       @for (item of progressItems; track item.label) {
-        <div class="bg-white border border-gray-200 rounded-lg p-4 min-w-[280px] flex-shrink-0" [attr.data-testid]="'progress-item-' + item.label">
+        <div
+          class="bg-white border border-gray-200 rounded-lg p-4 min-w-[280px] flex-shrink-0"
+          [attr.data-testid]="'dashboard-recent-progress-item-' + item.label">
           <div class="flex items-center justify-between mb-3">
             <div>
               <div class="text-sm text-gray-600 mb-1">{{ item.label }}</div>
               <div class="text-2xl font-display font-semibold text-gray-900">{{ item.value }}</div>
             </div>
             @if (item.trend === 'up') {
-              <i class="fa-light fa-arrow-trend-up text-green-500 text-lg" data-testid="trend-up"></i>
+              <i class="fa-light fa-arrow-trend-up text-green-500 text-lg" data-testid="dashboard-recent-progress-trend-up"></i>
             } @else if (item.trend === 'down') {
-              <i class="fa-light fa-arrow-trend-down text-red-500 text-lg" data-testid="trend-down"></i>
+              <i class="fa-light fa-arrow-trend-down text-red-500 text-lg" data-testid="dashboard-recent-progress-trend-down"></i>
             }
           </div>
           <div class="h-20">

apps/lfx-one/src/app/shared/components/header/header.component.ts

@@ -9,6 +9,7 @@ import { Router, RouterModule } from '@angular/router';
 import { AvatarComponent } from '@components/avatar/avatar.component';
 import { MenubarComponent } from '@components/menubar/menubar.component';
 import { PersonaSelectorComponent } from '@components/persona-selector/persona-selector.component';
+import { AppService } from '@app/shared/services/app.service';
 import { CombinedProfile, Project } from '@lfx-one/shared/interfaces';
 import { ProjectService } from '@services/project.service';
 import { UserService } from '@services/user.service';
@@ -44,14 +45,15 @@ import { MenuComponent } from '../menu/menu.component';
 export class HeaderComponent {
   private readonly router = inject(Router);
   private readonly projectService = inject(ProjectService);
+  private readonly appService = inject(AppService);
   public readonly userService = inject(UserService);
 
   // Mobile search state
   public showMobileSearch: WritableSignal<boolean> = signal(false);
   private readonly mobileSearchInput = viewChild<ElementRef>('mobileSearchInput');
 
   public userProfile: Signal<CombinedProfile | null> = this.initializeUserProfile();
-  public initials = computed(() => this.userProfile()?.user.first_name?.slice(0));
+  public initials = computed(() => this.userProfile()?.user.first_name?.slice(0, 1));
   public fullName = computed(() => this.userProfile()?.user.first_name + ' ' + this.userProfile()?.user?.last_name);
 
   // Search form
@@ -155,8 +157,7 @@ export class HeaderComponent {
   }
 
   protected toggleMobileSidebar(): void {
-    // Dispatch custom event to toggle sidebar in main-layout
-    window.dispatchEvent(new CustomEvent('toggleMobileSidebar'));
+    this.appService.toggleMobileSidebar();
   }
 
   private initializeUserProfile(): Signal<CombinedProfile | null> {