feat(dashboard): initial core persona developer dashboard implementation (#119)

* wip(dashboard): initial core persona developer dashboard implementation

Work in progress implementation for LFXV2-644. Adding foundational
components and structure for the Core Developer Persona dashboard.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Jordan Evans <jevans@linuxfoundation.org>

* feat(dashboard): improve core developer persona dashboard UI

Reduce section header sizes from text-xl to text-lg for better visual hierarchy.
Enhance meetings section with modern card design, calendar icons, participant
badges, and Join buttons. Fix ESLint member ordering issues for LFXV2-644.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Jordan Evans <jevans@linuxfoundation.org>

* fix(layout): prevent sidebar from floating during horizontal scroll

Change sidebar from fixed to sticky positioning within a flex container.
This ensures the sidebar stays in its designated column and doesn't cover
content during horizontal scrolling. Updates for LFXV2-644.

- Wrap sidebar in flex-shrink-0 container with fixed width
- Change sidebar positioning from fixed to sticky
- Remove margin-left from main content, use min-w-0 for proper scrolling
- Maintain sticky behavior for vertical scrolling within column

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Jordan Evans <jevans@linuxfoundation.org>

* style(dashboard): further reduce section header sizes

Change section headers from text-lg to text-base for a more compact
and modern dashboard appearance. Reduces visual hierarchy emphasis
on section titles in favor of content focus for LFXV2-644.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Jordan Evans <jevans@linuxfoundation.org>

* feat(dashboard): integrate meetings API with occurrence-based filtering

Replace hardcoded meeting data with live API integration that properly handles:
- Meeting occurrences for recurring meetings
- Time-based filtering with 40-minute buffer after meeting end
- Sorting by earliest time first
- Frontend limit to 5 meetings maximum
- Smart time formatting (Today/Tomorrow/Date)
- Total attendee count from registrants and committee members

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* feat(dashboard): implement persona-based dashboard architecture

- Replace home-new component with modular dashboard architecture
- Add persona-specific dashboard components (my-meetings, my-projects, pending-actions, recent-progress)
- Implement persona service with reactive persona selection
- Update sidebar with footer navigation support and improved styling
- Match sidebar border/shadow styling with PrimeNG card components
- Add persona selector component with dropdown interface
- Update header to integrate persona selector
- Add persona constants to shared package
- Update main layout to support dynamic persona-based routing
- Update profile layout to handle persona changes
- Server-side: Fix user profile persona field mapping

Technical improvements:
- Sidebar: Remove border, update border-radius to 12px, match card shadow
- Sidebar: Add footer items support with separate navigation section
- Sidebar: Improve accessibility with consistent text sizing (text-sm)
- Remove icon hover animations for visual consistency

LFXV2-644

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

* refactor(sidebar): replace function calls with computed signals

- Remove getTestId() function calls from template
- Add testId property to SidebarMenuItem interface
- Create computed signals (itemsWithTestIds, footerItemsWithTestIds) for test ID generation
- Use Angular signals pattern for better performance and change detection

Performance improvements:
- Computed signals only recalculate when input changes
- Eliminates repeated function calls during template rendering
- Leverages Angular 19 zoneless change detection optimization

LFXV2-644

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

* fix(dashboard): resolve pr comments

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

* fix(yarn): yarn.lock update

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

* feat(dashboard): implement dashboard meeting card component

- Create reusable DashboardMeetingCardComponent for displaying meeting information
- Update MyMeetingsComponent to use new card component with Today/Upcoming sections
- Add conditional section rendering (hide sections when empty)
- Match React component styling with white card background, gray icons, rounded-xl borders
- Implement smart date filtering for today's meetings vs upcoming meetings
- Add meeting feature icons (YouTube, Recording, Transcripts, AI, Public/Private)
- Add DashboardMeetingCardProps and DashboardMeetingFeatures interfaces to shared package
- Update RecentProgressComponent styling to match React design
- Remove PrimeNG Card dependency in favor of semantic HTML with Tailwind

LFXV2-644

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

* refactor(dashboard): update pending actions and meeting card layout

- Remove LFX card wrapper from pending actions component
- Add consistent header with "View All" button to pending actions
- Simplify pending action button styling to white background with slate-100 hover
- Update dashboard meeting card to use project_name from meeting data
- Add project_name enrichment in meeting service
- Remove projectName input from dashboard meeting card component
- Add project_name field to Meeting interface

Generated with [Claude Code](https://claude.ai/code)

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

* refactor(dashboard): update my-projects with table layout

- Replace card-based layout with lfx-table component
- Implement 4-column table structure (Project, Affiliations, Code Activities, Non-Code Activities)
- Apply React-style formatting:
  - Equal column widths (w-1/4 for each column)
  - Fixed chart container width (12.5rem)
  - Grey borders (border-gray-200) on table cells
  - Rounded table container with overflow handling
  - Blue project name links (#009aff)
  - Help icons for activity columns
- Update chart colors:
  - Code Activities: #009AFF (blue)
  - Non-Code Activities: #10b981 (green)
- Add generateLabels() helper method for dynamic chart labels
- Remove unused CardComponent import
- Maintain all existing test IDs for E2E compatibility

Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Signed-off-by: Asitha de Silva <asithade@gmail.com>

* ci(gha): disable automatic quality check workflow

Disabled automatic PR quality checks as project is moving away from old UI.
Changed trigger from pull_request to workflow_dispatch for manual runs only.

LFXV2-644

Generated with [Claude Code](https://claude.ai/code)

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

---------

Signed-off-by: Jordan Evans <jevans@linuxfoundation.org>
Signed-off-by: Asitha de Silva <asithade@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Asitha de Silva <asithade@gmail.com>

Author: 3 people

.github/workflows/quality-check.yml

@@ -3,10 +3,10 @@
 
 name: Quality Checks
 
+# DISABLED: Moving away from old UI - quality checks no longer needed
+# Changed to manual trigger only - will not run automatically on PRs
 on:
-  pull_request:
-    branches: [main]
-    types: [opened, synchronize, reopened]
+  workflow_dispatch:
 
 jobs:
   quality-checks:
@@ -23,8 +23,8 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
-          cache: 'yarn'
+          node-version: "22"
+          cache: "yarn"
 
       - name: Install dependencies
         run: yarn install --immutable
@@ -46,9 +46,9 @@ jobs:
     needs: quality-checks
     uses: ./.github/workflows/e2e-tests.yml
     with:
-      node-version: '22'
-      test-command: 'e2e'
-      browser: 'chromium'  # Use only Chromium for PR testing for faster feedback
+      node-version: "22"
+      test-command: "e2e"
+      browser: "chromium" # Use only Chromium for PR testing for faster feedback
       skip-build: false
     secrets:
       TEST_USERNAME: ${{ secrets.TEST_USERNAME }}

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

@@ -8,8 +8,24 @@ import { authGuard } from './shared/guards/auth.guard';
 export const routes: Routes = [
   {
     path: '',
-    loadComponent: () => import('./modules/pages/home/home.component').then((m) => m.HomeComponent),
     canActivate: [authGuard],
+    loadComponent: () => import('./layouts/main-layout/main-layout.component').then((m) => m.MainLayoutComponent),
+    children: [
+      {
+        path: '',
+        loadComponent: () => import('./modules/pages/dashboard/dashboard.component').then((m) => m.DashboardComponent),
+      },
+      {
+        path: 'projects',
+        loadComponent: () => import('./modules/pages/home/home.component').then((m) => m.HomeComponent),
+      },
+    ],
+  },
+  // Old UI route - shows when "Old UI" persona is selected
+  {
+    path: 'old-ui',
+    canActivate: [authGuard],
+    loadComponent: () => import('./modules/pages/home/home.component').then((m) => m.HomeComponent),
   },
   {
     path: 'meetings',

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

@@ -0,0 +1,36 @@
+<!-- Copyright The Linux Foundation and each contributor to LFX. -->
+<!-- SPDX-License-Identifier: MIT -->
+
+<div class="flex min-h-screen pt-4">
+  <!-- Sidebar - Desktop -->
+  <div class="hidden lg:block w-72 flex-shrink-0 fixed top-[6rem] left-0">
+    <lfx-sidebar [items]="sidebarItems" [footerItems]="sidebarFooterItems"></lfx-sidebar>
+  </div>
+
+  <!-- Sidebar - Mobile Overlay -->
+  @if (showMobileSidebar()) {
+    <div class="lg:hidden fixed inset-0 z-40 bg-black bg-opacity-50" data-testid="mobile-sidebar-overlay" (click)="closeMobileSidebar()">
+      <div class="absolute top-0 left-0 bottom-0 w-72 bg-white shadow-xl" (click)="$event.stopPropagation()" data-testid="mobile-sidebar">
+        <div class="flex items-center justify-between p-4 border-b border-gray-200">
+          <h2 class="text-lg font-semibold text-gray-900">Menu</h2>
+          <button
+            type="button"
+            class="hover:opacity-80 transition-opacity p-2"
+            (click)="closeMobileSidebar()"
+            aria-label="Close menu"
+            data-testid="mobile-sidebar-close">
+            <i class="fa-light fa-times text-gray-600 text-xl"></i>
+          </button>
+        </div>
+        <div class="overflow-y-auto h-[calc(100vh-4rem)]">
+          <lfx-sidebar [items]="sidebarItems" [footerItems]="sidebarFooterItems"></lfx-sidebar>
+        </div>
+      </div>
+    </div>
+  }
+
+  <!-- Main Content Area -->
+  <main class="flex-1 min-w-0 transition-all duration-300 lg:ml-72" data-testid="main-content">
+    <router-outlet />
+  </main>
+</div>

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

@@ -0,0 +1,6 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+:host {
+  display: block;
+}

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

@@ -0,0 +1,106 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT
+
+import { CommonModule } from '@angular/common';
+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';
+
+@Component({
+  selector: 'lfx-main-layout',
+  standalone: true,
+  imports: [CommonModule, RouterModule, SidebarComponent],
+  templateUrl: './main-layout.component.html',
+  styleUrl: './main-layout.component.scss',
+})
+export class MainLayoutComponent {
+  private readonly router = inject(Router);
+  private readonly appService = inject(AppService);
+
+  // Expose mobile sidebar state from service
+  protected readonly showMobileSidebar = this.appService.showMobileSidebar;
+
+  // Sidebar navigation items
+  protected readonly sidebarItems: SidebarMenuItem[] = [
+    {
+      label: 'Home',
+      icon: 'fa-light fa-house',
+      routerLink: '/',
+    },
+    {
+      label: 'My Meetings',
+      icon: 'fa-light fa-video',
+      routerLink: '/my-meetings',
+      disabled: true,
+    },
+    {
+      label: 'Project Health',
+      icon: 'fa-light fa-heart-pulse',
+      routerLink: '/project-health',
+      disabled: true,
+    },
+    {
+      label: 'Events & Community',
+      icon: 'fa-light fa-calendar',
+      routerLink: '/events-community',
+      disabled: true,
+    },
+    {
+      label: 'Training & Certification',
+      icon: 'fa-light fa-book-open',
+      routerLink: '/training-certification',
+      disabled: true,
+    },
+  ];
+
+  // Sidebar footer items
+  protected readonly sidebarFooterItems: SidebarMenuItem[] = [
+    {
+      label: 'Documentation',
+      icon: 'fa-light fa-file-lines',
+      url: 'https://docs.lfx.linuxfoundation.org',
+    },
+    {
+      label: 'Submit a Ticket',
+      icon: 'fa-light fa-circle-question',
+      url: 'https://jira.linuxfoundation.org/plugins/servlet/theme/portal/4',
+    },
+    {
+      label: 'Changelog',
+      icon: 'fa-light fa-rectangle-history',
+      routerLink: '/changelog',
+      disabled: true,
+    },
+    {
+      label: 'Settings',
+      icon: 'fa-light fa-gear',
+      routerLink: '/settings',
+      disabled: true,
+    },
+    {
+      label: 'Profile',
+      icon: 'fa-light fa-user',
+      routerLink: '/profile',
+    },
+  ];
+
+  public constructor() {
+    // Close mobile sidebar on navigation
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntilDestroyed()
+      )
+      .subscribe(() => {
+        this.appService.closeMobileSidebar();
+      });
+  }
+
+  public closeMobileSidebar(): void {
+    this.appService.closeMobileSidebar();
+  }
+}

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

@@ -145,7 +145,7 @@ export class ProfileLayoutComponent {
       const profile = this.profile();
       if (!profile?.profile) return '';
 
-      return profile.profile.job_title || '';
+      return profile.profile.title || '';
     });
   }
 

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

@@ -0,0 +1,62 @@
+<!-- Copyright The Linux Foundation and each contributor to LFX. -->
+<!-- SPDX-License-Identifier: MIT -->
+
+<section class="flex flex-col flex-1" data-testid="dashboard-my-meetings-section">
+  <!-- Header -->
+  <div class="flex items-center justify-between mb-4">
+    <h2 class="font-display font-semibold text-gray-900">My Meetings</h2>
+    <lfx-button
+      label="View All"
+      icon="fa-light fa-chevron-right"
+      iconPos="right"
+      (onClick)="handleViewAll()"
+      styleClass="!text-sm !font-normal"
+      [text]="true"
+      size="small"
+      data-testid="dashboard-my-meetings-view-all" />
+  </div>
+
+  <!-- Scrollable Content -->
+  <div class="flex flex-col flex-1">
+    <div class="flex flex-col gap-6" 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" />
+              }
+            </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" />
+              }
+            </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>
+      }
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,2 @@
+// Copyright The Linux Foundation and each contributor to LFX.
+// SPDX-License-Identifier: MIT