feat: enhance meeting cards with participant response breakdown and improved link visibility (#27)

* feat: implement committee management for meetings

- Add committee association functionality to meetings with modal interface
- Display committee members with deduplication and enhanced table styling
- Prevent editing of committee members with informational messages
- Support multi-select committee dropdown with dynamic helper text
- Cache committee member data to optimize API calls
- Show voting columns only when committees have voting enabled

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

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

* refactor: optimize committee modal table and member display

- Fix incorrect colspan calculation using computed property
- Replace forEach with flatMap for better performance in member collection
- Implement single-pass deduplication instead of array mutation
- Add duplicate committee name prevention for members

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

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

* feat: enhance committee modal with testing support and memory leak prevention

- Add data-testid attributes to multi-select and action buttons for reliable E2E testing
- Implement takeUntilDestroyed for automatic subscription cleanup
- Follow project testing guidelines with hierarchical testid naming convention
- Prevent memory leaks in valueChanges subscription

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

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

* feat: enhance meeting cards with participant response breakdown and improved link visibility

- Add participants_accepted_count, participants_declined_count, and participants_pending_count fields to Meeting interface
- Update meeting card component to display response breakdown (e.g., "5 Guests (3 Attending, 1 Not Attending, 1 Pending Response)")
- Move important links outside expandable text for better visibility and immediate access
- Only show response breakdown when there are individual participants with response data
- Improve meeting organizer visibility into participation status and key meeting resources

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

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

---------

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

Author: asithade

apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.html

@@ -105,31 +105,31 @@ <h3 class="text-xl font-display font-semibold text-gray-900 mb-3">
 
 @if (meeting().agenda) {
   <div class="pb-3">
+    <!-- Important Links -->
+    @if (importantLinks().length > 0) {
+      <div class="mb-4">
+        <h4 class="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
+          <i class="fa-light fa-link text-blue-500"></i>
+          Important Links
+        </h4>
+        <div class="flex flex-wrap gap-2">
+          @for (link of importantLinks(); track link.url) {
+            <a
+              [href]="link.url"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors"
+              [title]="link.url">
+              <i class="fa-light fa-external-link"></i>
+              {{ link.domain }}
+            </a>
+          }
+        </div>
+      </div>
+    }
     <lfx-expandable-text [maxHeight]="100">
       <div class="flex flex-col gap-4">
         <div [innerHTML]="meeting().agenda | linkify"></div>
-        <!-- Important Links -->
-        @if (importantLinks().length > 0) {
-          <div class="mb-4">
-            <h4 class="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
-              <i class="fa-light fa-link text-blue-500"></i>
-              Important Links
-            </h4>
-            <div class="flex flex-wrap gap-2">
-              @for (link of importantLinks(); track link.url) {
-                <a
-                  [href]="link.url"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="cursor-pointer inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors"
-                  [title]="link.url">
-                  <i class="fa-light fa-external-link"></i>
-                  {{ link.domain }}
-                </a>
-              }
-            </div>
-          </div>
-        }
       </div>
     </lfx-expandable-text>
   </div>

apps/lfx-pcc/src/app/modules/project/meetings/components/meeting-card/meeting-card.component.ts

@@ -62,6 +62,7 @@ export class MeetingCardComponent {
   public readonly pastMeeting = input<boolean>(false);
   public readonly loading = input<boolean>(false);
   public readonly meetingParticipantCount: Signal<number> = this.initMeetingParticipantCount();
+  public readonly participantResponseBreakdown: Signal<string> = this.initParticipantResponseBreakdown();
   public showParticipants: WritableSignal<boolean> = signal(false);
   public meeting: WritableSignal<Meeting> = signal({} as Meeting);
   public participantsLoading: WritableSignal<boolean> = signal(true);
@@ -188,11 +189,37 @@ export class MeetingCardComponent {
         return 'Add Guests';
       }
 
-      if (this.meetingParticipantCount() === 1) {
-        return '1 Guest';
+      const totalGuests = this.meetingParticipantCount();
+      const breakdown = this.participantResponseBreakdown();
+
+      if (totalGuests === 1) {
+        return breakdown ? `1 Guest (${breakdown})` : '1 Guest';
+      }
+
+      return breakdown ? `${totalGuests} Guests (${breakdown})` : `${totalGuests} Guests`;
+    });
+  }
+
+  private initParticipantResponseBreakdown(): Signal<string> {
+    return computed(() => {
+      const meeting = this.meeting();
+      if (!meeting) return '';
+
+      const accepted = meeting.participants_accepted_count || 0;
+      const declined = meeting.participants_declined_count || 0;
+      const pending = meeting.participants_pending_count || 0;
+
+      // Only show breakdown if there are individual participants with responses
+      if (accepted === 0 && declined === 0 && pending === 0) {
+        return '';
       }
 
-      return this.meetingParticipantCount() + ' Guests';
+      const parts: string[] = [];
+      if (accepted > 0) parts.push(`${accepted} Attending`);
+      if (declined > 0) parts.push(`${declined} Not Attending`);
+      if (pending > 0) parts.push(`${pending} Pending Response`);
+
+      return parts.join(', ');
     });
   }
 

packages/shared/src/interfaces/meeting.interface.ts

@@ -61,6 +61,9 @@ export interface Meeting {
   meeting_committees: MeetingCommittee[] | null;
   individual_participants_count: number;
   committee_members_count: number;
+  participants_accepted_count: number;
+  participants_declined_count: number;
+  participants_pending_count: number;
   committees: string[];
 }