feat(architecture): foundation navigation and dashboard enhancements

CLAUDE.md

@@ -143,3 +143,4 @@ Before starting any work or commits:
 
 - Always use sequential thinking mcp for planning before doing any changes
 - Always run yarn build to validate that your changes are building too for validation
+- Always remember that our JIRA sprint field is customfield_10020. When we create tickets, we need to assign them to the current user and set it to the current sprint.

apps/lfx-one/src/app/app.component.html

@@ -2,9 +2,4 @@
 <!-- SPDX-License-Identifier: MIT -->
 <p-toast />
 
-<!-- Header Component -->
-<lfx-header></lfx-header>
-
-<div class="top-20">
-  <router-outlet />
-</div>
+<router-outlet />

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

@@ -7,13 +7,12 @@ import { RouterOutlet } from '@angular/router';
 import { AuthContext } from '@lfx-one/shared/interfaces';
 import { ToastModule } from 'primeng/toast';
 
-import { HeaderComponent } from './shared/components/header/header.component';
 import { SegmentService } from './shared/services/segment.service';
 import { UserService } from './shared/services/user.service';
 
 @Component({
   selector: 'lfx-root',
-  imports: [RouterOutlet, HeaderComponent, CommonModule, ToastModule],
+  imports: [RouterOutlet, CommonModule, ToastModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })

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

@@ -1,16 +1,16 @@
 <!-- Copyright The Linux Foundation and each contributor to LFX. -->
 <!-- SPDX-License-Identifier: MIT -->
 
-<div class="flex min-h-screen pt-4">
+<div class="flex min-h-screen">
   <!-- Sidebar - Desktop -->
-  <div class="hidden lg:block w-72 flex-shrink-0 fixed top-[6rem] left-0">
+  <div class="hidden lg:block w-64 flex-shrink-0 fixed top-0 left-0">
     <lfx-sidebar [items]="sidebarItems" [footerItems]="sidebarFooterItems" [showProjectSelector]="true"></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="absolute top-0 left-0 bottom-0 w-64 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
@@ -30,7 +30,7 @@ <h2 class="text-lg font-semibold text-gray-900">Menu</h2>
   }
 
   <!-- Main Content Area -->
-  <main class="flex-1 min-w-0 transition-all duration-300 lg:ml-72" data-testid="main-content">
+  <main class="flex-1 min-w-0 transition-all duration-300 lg:ml-64 px-[21px] md:px-[32px] py-[24px]" data-testid="main-content">
     <router-outlet />
     <!-- Footer Component -->
     <lfx-footer class="py-8"></lfx-footer>

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

@@ -25,39 +25,27 @@ export class MainLayoutComponent {
   // Expose mobile sidebar state from service
   protected readonly showMobileSidebar = this.appService.showMobileSidebar;
 
-  // Sidebar navigation items
+  // Sidebar navigation items - matching React NavigationSidebar design
   protected readonly sidebarItems: SidebarMenuItem[] = [
     {
-      label: 'Home',
-      icon: 'fa-light fa-house',
+      label: 'Overview',
+      icon: 'fa-light fa-grid-2',
       routerLink: '/',
     },
     {
       label: 'Meetings',
-      icon: 'fa-light fa-video',
+      icon: 'fa-light fa-calendar',
       routerLink: '/meetings',
     },
+    {
+      label: 'Projects',
+      icon: 'fa-light fa-folder-open',
+      routerLink: '/projects',
+    },
   ];
 
-  // Sidebar footer items
+  // Sidebar footer items - matching React NavigationSidebar design
   protected readonly sidebarFooterItems: SidebarMenuItem[] = [
-    {
-      label: 'Documentation',
-      icon: 'fa-light fa-file-lines',
-      url: 'https://docs.lfx.linuxfoundation.org',
-      disabled: true,
-    },
-    {
-      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',

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

@@ -1,6 +1,9 @@
 <!-- Copyright The Linux Foundation and each contributor to LFX. -->
 <!-- SPDX-License-Identifier: MIT -->
 
+<!-- Header Component -->
+<lfx-header></lfx-header>
+
 <div class="bg-white border-b border-gray-100 py-6 shadow-sm">
   <div class="container mx-auto px-8">
     <!-- Breadcrumb Navigation -->

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

@@ -9,6 +9,7 @@ import { CombinedProfile } from '@lfx-one/shared/interfaces';
 import { UserService } from '@services/user.service';
 import { AvatarComponent } from '@shared/components/avatar/avatar.component';
 import { BreadcrumbComponent } from '@shared/components/breadcrumb/breadcrumb.component';
+import { HeaderComponent } from '@shared/components/header/header.component';
 import { MenuItem } from 'primeng/api';
 import { ChipModule } from 'primeng/chip';
 import { finalize } from 'rxjs';
@@ -18,7 +19,7 @@ import { ProfileStatsComponent } from './components/profile-stats/profile-stats.
 @Component({
   selector: 'lfx-profile-layout',
   standalone: true,
-  imports: [CommonModule, RouterModule, AvatarComponent, BreadcrumbComponent, ChipModule, ProfileStatsComponent],
+  imports: [CommonModule, RouterModule, HeaderComponent, AvatarComponent, BreadcrumbComponent, ChipModule, ProfileStatsComponent],
   templateUrl: './profile-layout.component.html',
   styleUrl: './profile-layout.component.scss',
 })

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

@@ -1,6 +1,9 @@
 <!-- Copyright The Linux Foundation and each contributor to LFX. -->
 <!-- SPDX-License-Identifier: MIT -->
 
+<!-- Header Component -->
+<lfx-header></lfx-header>
+
 <div class="bg-white border-b border-gray-100 py-6 shadow-sm min-h-60">
   <div class="container mx-auto px-8">
     <!-- Breadcrumb Navigation -->

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

@@ -8,14 +8,15 @@ import { ActivatedRoute, RouterModule } from '@angular/router';
 import { BreadcrumbComponent } from '@components/breadcrumb/breadcrumb.component';
 import { FilterButton, Project } from '@lfx-one/shared/interfaces';
 import { ProjectService } from '@services/project.service';
+import { HeaderComponent } from '@shared/components/header/header.component';
 import { MenuItem } from 'primeng/api';
 import { ChipModule } from 'primeng/chip';
 import { of, switchMap } from 'rxjs';
 
 @Component({
   selector: 'lfx-project-layout',
   standalone: true,
-  imports: [CommonModule, RouterModule, BreadcrumbComponent, ChipModule],
+  imports: [CommonModule, RouterModule, HeaderComponent, BreadcrumbComponent, ChipModule],
   templateUrl: './project-layout.component.html',
   styleUrl: './project-layout.component.scss',
 })

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

@@ -3,9 +3,11 @@
 
 <div class="container mx-auto px-4 sm:px-6 lg:px-8" data-testid="dashboard-container">
   <!-- Foundation Project -->
-  <div class="mb-6 flex items-center gap-4" data-testid="foundation-project">
-    <h1 class="text-2xl font-serif font-semibold text-gray-900">{{ selectedFoundation()?.name }} Overview</h1>
-  </div>
+  @if (selectedFoundation()) {
+    <div class="mb-6 flex items-center gap-4" data-testid="foundation-project">
+      <h1 class="text-2xl font-serif font-semibold text-gray-900">{{ selectedFoundation()?.name }} Overview</h1>
+    </div>
+  }
 
   <!-- Organization Selector -->
   <div class="mb-6 flex items-center gap-4" data-testid="organization-selector">

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

@@ -58,7 +58,10 @@ <h2 class="font-['Roboto_Slab'] font-semibold text-[16px]">{{ accountName() }}'s
               class="p-4 bg-white rounded-lg border border-slate-200 hover:border-[#0094FF] transition-colors cursor-pointer flex-shrink-0 w-80"
               [attr.data-testid]="'dashboard-involvement-metric-' + metric.title">
               <div class="space-y-3">
-                <h5 class="text-sm font-medium w-full">{{ metric.title }}</h5>
+                <div class="flex items-center gap-1">
+                  <i [class]="metric.icon + ' text-gray-500'" class="w-4 h-4"></i>
+                  <h5 class="text-sm font-medium">{{ metric.title }}</h5>
+                </div>
 
                 <!-- Membership Info -->
                 <div class="space-y-2">
@@ -83,9 +86,12 @@ <h5 class="text-sm font-medium w-full">{{ metric.title }}</h5>
             <!-- Regular Card -->
             <div class="p-4 bg-white rounded-lg border border-slate-200 flex-shrink-0 w-80" [attr.data-testid]="'dashboard-involvement-metric-' + metric.title">
               <div class="space-y-3">
-                <h5 class="text-sm font-medium w-full">{{ metric.title }}</h5>
+                <div class="flex items-center gap-3">
+                  <i [class]="metric.icon + ' text-gray-500'" class="w-4 h-4"></i>
+                  <h5 class="text-sm font-medium">{{ metric.title }}</h5>
+                </div>
                 @if (metric.chartData) {
-                  <div class="w-full h-8">
+                  <div class="w-full h-16">
                     <lfx-chart
                       [type]="metric.title === 'Active Contributors' || metric.title === 'Maintainers' ? 'bar' : 'line'"
                       [data]="metric.chartData"

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

@@ -3,21 +3,16 @@
 
 <section data-testid="dashboard-recent-progress-section">
   <div class="flex items-center justify-between mb-4">
-    <div>
-      <h2 class="font-['Roboto_Slab'] font-semibold text-[16px]">Recent Progress</h2>
+    <div class="flex flex-col md:flex-row md:items-center gap-3">
+      <h2 class="font-['Roboto_Slab'] font-semibold text-[16px]">📈 <span class="ml-1">Recent Progress</span></h2>
+
+      <!-- Filter Pills - Only show for maintainers -->
+      @if (showFilterPills()) {
+        <lfx-filter-pills [options]="filterOptions" [selectedFilter]="selectedFilter()" (filterChange)="setFilter($event)" />
+      }
     </div>
 
     <div class="flex items-center gap-3">
-      <!-- View Profile Button -->
-      <button
-        type="button"
-        class="text-sm px-3 py-1 rounded hover:bg-gray-100 text-gray-700 hover:text-gray-900 flex items-center gap-1 transition-colors"
-        data-testid="dashboard-recent-progress-view-profile"
-        aria-label="View Profile">
-        View Profile
-        <i class="fa-light fa-chevron-right text-xs"></i>
-      </button>
-
       <!-- Carousel Controls -->
       <div class="flex items-center gap-2">
         <button
@@ -51,11 +46,14 @@ <h2 class="font-['Roboto_Slab'] font-semibold text-[16px]">Recent Progress</h2>
   } @else {
     <div class="overflow-hidden">
       <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) {
+        @for (item of filteredProgressItems(); track item.label) {
           <div class="p-4 bg-white rounded-lg border border-slate-200 flex-shrink-0 w-80" [attr.data-testid]="'dashboard-recent-progress-item-' + item.label">
             <div class="space-y-3">
               <div class="flex items-center gap-2">
-                <h5 class="text-sm font-medium w-full">{{ item.label }}</h5>
+                @if (item.icon) {
+                  <i [class]="item.icon + ' text-gray-500'" class="w-4 h-4 flex-shrink-0"></i>
+                }
+                <h5 class="text-sm font-medium flex-1">{{ item.label }}</h5>
                 <span
                   [class]="item.isConnected ? 'text-green-500' : 'text-gray-400'"
                   class="text-xs cursor-help"
@@ -64,7 +62,7 @@ <h5 class="text-sm font-medium w-full">{{ item.label }}</h5>
                   ●
                 </span>
               </div>
-              <div class="w-full h-8 relative">
+              <div class="w-full h-16 relative">
                 <lfx-chart [type]="item.chartType" [data]="item.chartData" [options]="item.chartOptions" height="100%"></lfx-chart>
               </div>
               <div class="space-y-1">