Merge branch 'main' into feature/lfxv2-502-email-linking-from-auth-service

Jira Ticket: https://linuxfoundation.atlassian.net/browse/LFXV2-502

Signed-off-by: Mauricio Zanetti Salomao <msalomao@contractor.linuxfoundation.org>

Author: mauriciozanettisalomao

.github/workflows/config/reviewers.yml

@@ -9,11 +9,11 @@ addAssignees: author
 
 # A list of reviewers to be added to pull requests (GitHub user name)
 reviewers:
-  - audigregorie
   - asithade
   - andrest50
   - mauriciozanettisalomao
   - dealako
+  - jordane
 
 # A number of reviewers added to the pull request
 # Set 0 to add all the reviewers (default: 0)

apps/lfx-one/src/app/app.routes.ts

@@ -19,11 +19,19 @@ export const routes: Routes = [
         path: 'projects',
         loadComponent: () => import('./modules/pages/home/home.component').then((m) => m.HomeComponent),
       },
+      {
+        path: 'meetings',
+        loadChildren: () => import('./modules/meetings/meetings.routes').then((m) => m.MEETING_ROUTES),
+      },
     ],
   },
   {
-    path: 'meetings',
-    loadChildren: () => import('./modules/meeting/meeting.routes').then((m) => m.MEETING_ROUTES),
+    path: 'meetings/not-found',
+    loadComponent: () => import('./modules/meetings/meeting-not-found/meeting-not-found.component').then((m) => m.MeetingNotFoundComponent),
+  },
+  {
+    path: 'meetings/:id',
+    loadComponent: () => import('./modules/meetings/meeting-join/meeting-join.component').then((m) => m.MeetingJoinComponent),
   },
   {
     path: 'project/:slug',

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

@@ -33,10 +33,9 @@ export class MainLayoutComponent {
       routerLink: '/',
     },
     {
-      label: 'My Meetings',
+      label: 'Meetings',
       icon: 'fa-light fa-video',
-      routerLink: '/my-meetings',
-      disabled: true,
+      routerLink: '/meetings',
     },
     {
       label: 'Project Health',

apps/lfx-one/src/app/modules/dashboards/board-member/board-member-dashboard.component.html

@@ -6,7 +6,7 @@
   <div class="mb-6 flex items-center gap-4" data-testid="organization-selector">
     <label for="organization-select" class="text-sm font-semibold text-gray-700">Organization:</label>
     <lfx-select
-      [form]="accountForm"
+      [form]="form"
       control="selectedAccountId"
       [options]="availableAccounts()"
       optionLabel="accountName"
@@ -17,8 +17,7 @@
       [showClear]="false"
       styleClass="min-w-[300px]"
       inputId="organization-select"
-      data-testid="organization-select"
-      (onChange)="handleAccountChange($event)" />
+      data-testid="organization-select" />
   </div>
 
   <!-- Dashboard Sections -->

apps/lfx-one/src/app/modules/dashboards/board-member/board-member-dashboard.component.ts

@@ -2,8 +2,10 @@
 // SPDX-License-Identifier: MIT
 
 import { Component, computed, inject, Signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { Account } from '@lfx-one/shared/interfaces';
+
 import { SelectComponent } from '../../../shared/components/select/select.component';
 import { AccountContextService } from '../../../shared/services/account-context.service';
 import { FoundationHealthComponent } from '../components/foundation-health/foundation-health.component';
@@ -20,20 +22,21 @@ import { PendingActionsComponent } from '../components/pending-actions/pending-a
 export class BoardMemberDashboardComponent {
   private readonly accountContextService = inject(AccountContextService);
 
-  protected readonly accountForm = new FormGroup({
+  public readonly form = new FormGroup({
     selectedAccountId: new FormControl<string>(this.accountContextService.selectedAccount().accountId),
   });
 
-  protected readonly availableAccounts: Signal<Account[]> = computed(() => this.accountContextService.availableAccounts);
+  public readonly availableAccounts: Signal<Account[]> = computed(() => this.accountContextService.availableAccounts);
 
-  /**
-   * Handle account selection change
-   */
-  protected handleAccountChange(event: any): void {
-    const selectedAccountId = event.value as string;
-    const selectedAccount = this.accountContextService.availableAccounts.find((acc) => acc.accountId === selectedAccountId);
-    if (selectedAccount) {
-      this.accountContextService.setAccount(selectedAccount);
-    }
+  public constructor() {
+    this.form
+      .get('selectedAccountId')
+      ?.valueChanges.pipe(takeUntilDestroyed())
+      .subscribe((value) => {
+        const selectedAccount = this.accountContextService.availableAccounts.find((acc) => acc.accountId === value);
+        if (selectedAccount) {
+          this.accountContextService.setAccount(selectedAccount as Account);
+        }
+      });
   }
 }

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

@@ -9,7 +9,7 @@ <h2 class="font-display font-semibold text-gray-900">My Meetings</h2>
       label="View All"
       icon="fa-light fa-chevron-right"
       iconPos="right"
-      (onClick)="handleViewAll()"
+      [routerLink]="['/meetings']"
       styleClass="!text-sm !font-normal"
       [text]="true"
       size="small"
@@ -18,45 +18,50 @@ <h2 class="font-display font-semibold text-gray-900">My Meetings</h2>
 
   <!-- Scrollable Content -->
   <div class="flex flex-col flex-1">
-    <div class="flex flex-col gap-6 overflow-scroll max-h-[30rem]" data-testid="dashboard-my-meetings-list">
-      @if (todayMeetings().length > 0 || upcomingMeetings().length > 0) {
-        <!-- TODAY Section - only show if there are meetings today -->
-        @if (todayMeetings().length > 0) {
-          <div>
-            <h4 class="text-xs font-medium text-gray-500 mb-3 uppercase tracking-wide">Today</h4>
-            <div class="flex flex-col gap-3">
-              @for (item of todayMeetings(); track item.meeting.uid) {
-                <lfx-dashboard-meeting-card
-                  [meeting]="item.meeting"
-                  [occurrence]="item.occurrence"
-                  (onSeeMeeting)="handleSeeMeeting($event)"
-                  [attr.data-testid]="'dashboard-my-meetings-today-item-' + item.meeting.uid" />
-              }
+    @if (loading()) {
+      <div class="flex flex-col gap-3" data-testid="dashboard-my-meetings-loading">
+        <p-skeleton width="100%" height="140px"></p-skeleton>
+        <p-skeleton width="100%" height="140px"></p-skeleton>
+      </div>
+    } @else {
+      <div class="flex flex-col gap-6 overflow-scroll max-h-[30rem]" data-testid="dashboard-my-meetings-list">
+        @if (todayMeetings().length > 0 || upcomingMeetings().length > 0) {
+          <!-- TODAY Section - only show if there are meetings today -->
+          @if (todayMeetings().length > 0) {
+            <div>
+              <h4 class="text-xs font-medium text-gray-500 mb-3 uppercase tracking-wide">Today</h4>
+              <div class="flex flex-col gap-3">
+                @for (item of todayMeetings(); track item.meeting.uid) {
+                  <lfx-dashboard-meeting-card
+                    [meeting]="item.meeting"
+                    [occurrence]="item.occurrence"
+                    [attr.data-testid]="'dashboard-my-meetings-today-item-' + item.meeting.uid" />
+                }
+              </div>
             </div>
-          </div>
-        }
+          }
 
-        <!-- UPCOMING Section - only show if there are upcoming meetings -->
-        @if (upcomingMeetings().length > 0) {
-          <div>
-            <h4 class="text-xs font-medium text-gray-500 mb-3 uppercase tracking-wide">Upcoming</h4>
-            <div class="flex flex-col gap-3">
-              @for (item of upcomingMeetings(); track item.meeting.uid) {
-                <lfx-dashboard-meeting-card
-                  [meeting]="item.meeting"
-                  [occurrence]="item.occurrence"
-                  (onSeeMeeting)="handleSeeMeeting($event)"
-                  [attr.data-testid]="'dashboard-my-meetings-upcoming-item-' + item.meeting.uid" />
-              }
+          <!-- UPCOMING Section - only show if there are upcoming meetings -->
+          @if (upcomingMeetings().length > 0) {
+            <div>
+              <h4 class="text-xs font-medium text-gray-500 mb-3 uppercase tracking-wide">Upcoming</h4>
+              <div class="flex flex-col gap-3">
+                @for (item of upcomingMeetings(); track item.meeting.uid) {
+                  <lfx-dashboard-meeting-card
+                    [meeting]="item.meeting"
+                    [occurrence]="item.occurrence"
+                    [attr.data-testid]="'dashboard-my-meetings-upcoming-item-' + item.meeting.uid" />
+                }
+              </div>
             </div>
+          }
+        } @else {
+          <!-- Global empty state - only shows when no meetings at all -->
+          <div class="text-xs text-gray-500 py-8 text-center border-2 border-dashed border-gray-300 rounded-lg" data-testid="dashboard-my-meetings-empty">
+            No meetings scheduled
           </div>
         }
-      } @else {
-        <!-- Global empty state - only shows when no meetings at all -->
-        <div class="text-xs text-gray-500 py-8 text-center border-2 border-dashed border-gray-300 rounded-lg" data-testid="dashboard-my-meetings-empty">
-          No meetings scheduled
-        </div>
-      }
-    </div>
+      </div>
+    }
   </div>
 </section>

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

@@ -2,32 +2,30 @@
 // SPDX-License-Identifier: MIT
 
 import { CommonModule } from '@angular/common';
-import { Component, computed, inject } from '@angular/core';
+import { Component, computed, inject, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { Router } from '@angular/router';
 import { MeetingService } from '@app/shared/services/meeting.service';
 import { ButtonComponent } from '@components/button/button.component';
 import { DashboardMeetingCardComponent } from '@components/dashboard-meeting-card/dashboard-meeting-card.component';
+import { getActiveOccurrences } from '@lfx-one/shared';
+import { SkeletonModule } from 'primeng/skeleton';
+import { finalize } from 'rxjs';
 
-import type { Meeting, MeetingOccurrence } from '@lfx-one/shared/interfaces';
-
-interface MeetingWithOccurrence {
-  meeting: Meeting;
-  occurrence: MeetingOccurrence;
-  sortTime: number;
-}
+import type { MeetingWithOccurrence } from '@lfx-one/shared/interfaces';
 
 @Component({
   selector: 'lfx-my-meetings',
   standalone: true,
-  imports: [CommonModule, DashboardMeetingCardComponent, ButtonComponent],
+  imports: [CommonModule, DashboardMeetingCardComponent, ButtonComponent, SkeletonModule],
   templateUrl: './my-meetings.component.html',
   styleUrl: './my-meetings.component.scss',
 })
 export class MyMeetingsComponent {
   private readonly meetingService = inject(MeetingService);
   private readonly router = inject(Router);
-  private readonly allMeetings = toSignal(this.meetingService.getMeetings(), { initialValue: [] });
+  protected readonly loading = signal(true);
+  private readonly allMeetings = toSignal(this.meetingService.getMeetings().pipe(finalize(() => this.loading.set(false))), { initialValue: [] });
 
   protected readonly todayMeetings = computed<MeetingWithOccurrence[]>(() => {
     const now = new Date();
@@ -41,7 +39,10 @@ export class MyMeetingsComponent {
     for (const meeting of this.allMeetings()) {
       // Process occurrences if they exist
       if (meeting.occurrences && meeting.occurrences.length > 0) {
-        for (const occurrence of meeting.occurrences) {
+        // Get only active (non-cancelled) occurrences
+        const activeOccurrences = getActiveOccurrences(meeting.occurrences);
+
+        for (const occurrence of activeOccurrences) {
           const startTime = new Date(occurrence.start_time);
           const startTimeMs = startTime.getTime();
           const endTime = startTimeMs + occurrence.duration * 60 * 1000 + buffer;
@@ -92,7 +93,10 @@ export class MyMeetingsComponent {
     for (const meeting of this.allMeetings()) {
       // Process occurrences if they exist
       if (meeting.occurrences && meeting.occurrences.length > 0) {
-        for (const occurrence of meeting.occurrences) {
+        // Get only active (non-cancelled) occurrences
+        const activeOccurrences = getActiveOccurrences(meeting.occurrences);
+
+        for (const occurrence of activeOccurrences) {
           const startTime = new Date(occurrence.start_time);
           const startTimeMs = startTime.getTime();
 
@@ -130,12 +134,4 @@ export class MyMeetingsComponent {
     // Sort by earliest time first and limit to 5
     return meetings.sort((a, b) => a.sortTime - b.sortTime).slice(0, 5);
   });
-
-  public handleSeeMeeting(meetingId: string): void {
-    this.router.navigate(['/meetings', meetingId]);
-  }
-
-  public handleViewAll(): void {
-    this.router.navigate(['/meetings']);
-  }
 }

apps/lfx-one/src/app/modules/dashboards/components/organization-involvement/organization-involvement.component.html

@@ -40,19 +40,16 @@ <h3 class="text-sm font-medium">{{ metric.title }}</h3>
                 <div class="space-y-2 pt-1">
                   <div class="flex items-center justify-between">
                     <span class="text-sm text-gray-500">Tier</span>
-                    <div class="flex items-center gap-2">
-                      <span class="px-2 py-0.5 text-xs font-medium rounded bg-gradient-to-r from-gray-400 to-gray-300 text-white border border-gray-300">
-                        {{ metric.tier }}
-                      </span>
-                      <span class="text-xs text-gray-500">since {{ metric.tierSince }}</span>
-                    </div>
+                    <span class="px-2 py-0.5 text-xs font-medium rounded bg-gradient-to-r from-gray-400 to-gray-300 text-white border border-gray-300">
+                      {{ metric.tier }}
+                    </span>
                   </div>
                   <div class="flex items-center justify-between">
-                    <span class="text-sm text-gray-500">Annual Fee</span>
-                    <span class="text-sm font-medium">{{ metric.annualFee }}</span>
+                    <span class="text-sm text-gray-500">Member Since</span>
+                    <span class="text-sm font-medium">{{ metric.tierSince }}</span>
                   </div>
                   <div class="flex items-center justify-between">
-                    <span class="text-sm text-gray-500">Next Due</span>
+                    <span class="text-sm text-gray-500">Renewal Date</span>
                     <span class="text-sm font-medium">{{ metric.nextDue }}</span>
                   </div>
                 </div>
@@ -87,7 +84,7 @@ <h3 class="text-sm font-medium">{{ metric.title }}</h3>
                   }
                 }
                 <div class="space-y-0.5">
-                  <div class="text-xl font-medium">{{ metric.value | number }}</div>
+                  <div class="text-xl font-medium">{{ metric.value }}</div>
                   @if (metric.subtitle) {
                     <div class="text-xs text-gray-500">{{ metric.subtitle }}</div>
                   }