feat(dashboards): integrate UI with maintainer dashboard models (PR review & merge velocity, open vs closed issues) (#146)

* feat(dashboards): integrate project issues resolution metrics into recent progress component

- Add project filter to recent progress component for dynamic data fetching
- Implement new API endpoints for fetching project issues resolution data
- Enhance recent progress UI with connection status indicators and tooltips
- Update maintainer dashboard to include project selection for analytics
- Refactor analytics service and controller to support new project-related queries

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

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

Signed-off-by: Mauricio Zanetti Salomao <[email protected]>

* feat(analytics): add project pull requests weekly data integration

- Implement new API endpoint to fetch project pull requests weekly data from Snowflake
- Enhance RecentProgressComponent to display PR review and merge velocity metrics
- Add transformation logic for API response to chart format
- Update analytics service and controller to support new data retrieval
- Introduce new TypeScript interfaces for project pull requests weekly data

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

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

Signed-off-by: Mauricio Zanetti Salomao <[email protected]>

* feat(dashboards): enhance recent progress component with loading state and tooltips

- Implement loading state in the RecentProgressComponent to improve user experience during data fetching.
- Add tooltip functionality for specific metrics to provide additional context when hovering over items.
- Refactor data fetching logic to utilize signals for loading states and ensure proper handling of asynchronous data retrieval.
- Update HTML template to conditionally render loading indicators and tooltips based on data availability.

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

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

Signed-off-by: Mauricio Zanetti Salomao <[email protected]>

* fix(analytics): enforce required projectId for project issues resolution

- Update the analytics service and controller to require a projectId parameter for fetching project issues resolution data.
- Modify RecentProgressComponent to handle cases where projectId is not provided, ensuring a default response is returned.
- Refactor related documentation to reflect the change from optional to required projectId.

This change improves data integrity and user experience by preventing requests without a valid project identifier.

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

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

Signed-off-by: Mauricio Zanetti Salomao <[email protected]>

* feat(dashboards): implement project context service for project selection in maintainer dashboard

- Introduced ProjectContextService to manage the selected project state and persist it in local storage.
- Updated MaintainerDashboardComponent to utilize the new service for project selection, ensuring the projectId is set based on user selection and restoring previously selected projects.
- Enhanced form handling to automatically select the first project if no project is currently selected.

This change improves user experience by maintaining project context across sessions and simplifying project selection in the dashboard.

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

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

Signed-off-by: Mauricio Zanetti Salomao <[email protected]>

* fix(dashboards): add error handling for project data fetching in maintainer dashboard

- Implemented error handling in the MaintainerDashboardComponent to manage failures when fetching project data from the analytics service.
- Utilized RxJS's catchError to log errors and return an empty projects array, ensuring the application remains stable during data retrieval issues.

This change enhances the robustness of the dashboard by preventing crashes due to data fetching errors.

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

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

Signed-off-by: Mauricio Zanetti Salomao <[email protected]>

* refactor(dashboards): improve project selection logic in maintainer dashboard

- Updated MaintainerDashboardComponent to validate the current project selection against loaded projects.
- Removed the logic for restoring a stored project ID and streamlined the auto-selection of the first project if no valid selection exists.
- Enhanced user experience by ensuring that only valid project selections are set in the form.

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

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

Signed-off-by: Mauricio Zanetti Salomao <[email protected]>

* refactor(dashboards): ssr-safe storage and pattern updates

LFXV2-718

- Add SSR safety checks to all localStorage access points in context services
- Change ProjectContextService to store full ProjectContext objects (projectId, name, slug)
- Simplify maintainer dashboard to match board member dashboard pattern
- Centralize project context in RecentProgressComponent using service injection
- Move ProjectContext interface to shared package for reusability
- Extract chart options to shared constants for consistency
- Refactor chart transformation logic for better maintainability

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

Signed-off-by: Asitha de Silva <[email protected]>

* fix(dashboards): add ssr-safe persona persistence

LFXV2-718

- Add SSR safety checks to PersonaService localStorage access
- Implement loadStoredPersona() method to restore persisted persona
- Fix constructor to load from localStorage instead of hardcoding 'maintainer'
- Ensure persona selection persists across page refreshes

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

Signed-off-by: Asitha de Silva <[email protected]>

---------

Signed-off-by: Mauricio Zanetti Salomao <[email protected]>
Signed-off-by: Asitha de Silva <[email protected]>
Co-authored-by: Asitha de Silva <[email protected]>

Author: mauriciozanettisalomao

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

@@ -40,24 +40,49 @@ <h2 class="font-['Roboto_Slab'] font-semibold text-[16px]">Recent Progress</h2>
     </div>
   </div>
 
-  <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) {
-        <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">
-            <h5 class="text-sm font-medium w-full">{{ item.label }}</h5>
-            <div class="w-full h-8">
-              <lfx-chart [type]="item.chartType" [data]="item.chartData" [options]="item.chartOptions" height="100%"></lfx-chart>
-            </div>
-            <div class="space-y-1">
-              <div class="text-xl font-medium">{{ item.value }}</div>
-              @if (item.subtitle) {
-                <div class="text-xs text-gray-500">{{ item.subtitle }}</div>
-              }
+  @if (isLoading()) {
+    <!-- Loading State -->
+    <div class="flex items-center justify-center p-12">
+      <div class="text-center space-y-3">
+        <i class="fa-light fa-spinner-third fa-spin text-4xl text-[#0094FF]"></i>
+        <p class="text-sm text-gray-500">Loading project data...</p>
+      </div>
+    </div>
+  } @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) {
+          <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>
+                <span
+                  [class]="item.isConnected ? 'text-green-500' : 'text-gray-400'"
+                  class="text-xs cursor-help"
+                  [pTooltip]="item.isConnected ? 'Connected to live data' : 'Using placeholder data'"
+                  tooltipPosition="top">
+                  ●
+                </span>
+              </div>
+              <div class="w-full h-8 relative">
+                <lfx-chart [type]="item.chartType" [data]="item.chartData" [options]="item.chartOptions" height="100%"></lfx-chart>
+              </div>
+              <div class="space-y-1">
+                @if (item.tooltipText) {
+                  <div class="text-xl font-medium cursor-help" [pTooltip]="item.tooltipText" [escape]="false" tooltipPosition="top">
+                    {{ item.value }}
+                  </div>
+                } @else {
+                  <div class="text-xl font-medium">{{ item.value }}</div>
+                }
+                @if (item.subtitle) {
+                  <div class="text-xs text-gray-500">{{ item.subtitle }}</div>
+                }
+              </div>
             </div>
           </div>
-        </div>
-      }
+        }
+      </div>
     </div>
-  </div>
+  }
 </section>