feat(permissions): implement role-based permission system

.github/workflows/e2e-tests.yml

@@ -95,6 +95,7 @@ jobs:
           secret-ids: |
             SUPABASE, /cloudops/managed-secrets/cloud/supabase/api_key
             AUTH0,  /cloudops/managed-secrets/auth0/LFX_V2_PCC
+            AUTH,  /cloudops/managed-secrets/auth0/LFX_V2_Meeting_Join_M2M
 
       - name: Validate required secrets for E2E testing
         id: validate-secrets

README.md

@@ -60,19 +60,43 @@ of conduct, development process, and how to submit pull requests.
 2. **Configure required environment variables:**
 
    **Auth0 Configuration:**
-   - Get the Auth0 Application values from 1Password
    - Set `PCC_AUTH0_CLIENT_ID` and `PCC_AUTH0_CLIENT_SECRET`
+     - Local Development: The default client ID is `lfx` and you can get the client secret from the k8s via `k get secrets authelia-clients -n lfx -o jsonpath='{.data.lfx}' | base64 --decode`
    - Update `PCC_AUTH0_ISSUER_BASE_URL` with your Auth0 domain
+     - Local Development: `https://auth.k8s.orb.local`
    - Configure `PCC_AUTH0_AUDIENCE` for your API
+     - Local Development: `http://lfx-api.k8s.orb.local/`
+   - Set `PCC_AUTH0_SECRET` to a sufficiently long random string (32+ characters)
+     - Generate a random 32 characters long string
+
+   **M2M (Machine-to-Machine) Authentication:**
+   - Set `M2M_AUTH_CLIENT_ID` and `M2M_AUTH_CLIENT_SECRET` for server-side API calls
+   - Configure `M2M_AUTH_ISSUER_BASE_URL` (typically same as Auth0 base URL)
+   - Set `M2M_AUTH_AUDIENCE` to match your API audience
 
    **Supabase Configuration:**
    - Create a project in [Supabase](https://supabase.com)
    - Get your project URL and anon key from Project Settings → API
    - Set `SUPABASE_URL` and `POSTGRES_API_KEY`
+   - Configure `SUPABASE_STORAGE_BUCKET` for file storage
 
    **Microservice Configuration:**
-   - Set `QUERY_SERVICE_URL` to your query service endpoint
-   - Provide a valid JWT token in `QUERY_SERVICE_TOKEN`
+   - Set `LFX_V2_SERVICE` to your query service endpoint
+     - Local Development: `http://lfx-api.k8s.orb.local`
+
+   **AI Service Configuration (Optional):**
+   - Set `AI_PROXY_URL` to your LiteLLM proxy endpoint for meeting agenda generation
+   - Provide a valid API key in `AI_API_KEY`
+
+   **NATS Configuration:**
+   - Set `NATS_URL` for internal messaging system (typically in Kubernetes environments)
+     - Local Development: `nats://lfx-platform-nats.lfx.svc.cluster.local:4222`
+
+   **Testing Configuration (Optional):**
+   - Set `TEST_USERNAME` and `TEST_PASSWORD` for automated E2E testing
+
+   **Local Development:**
+   - Set `NODE_TLS_REJECT_UNAUTHORIZED=0` when using Authelia for local authentication
 
 #### Install and Run
 

apps/lfx-pcc/.env.example

@@ -3,7 +3,7 @@ ENV=development
 PCC_BASE_URL=http://localhost:4200
 LOG_LEVEL=info
 
-# Auth0 Authentication Configuration
+# Auth0/Authelia Authentication Configuration
 # Get these values from your Auth0 dashboard
 PCC_AUTH0_CLIENT_ID=your-auth0-client-id
 PCC_AUTH0_CLIENT_SECRET=your-auth0-client-secret

apps/lfx-pcc/src/app/app.component.scss

@@ -102,4 +102,12 @@
       }
     }
   }
+
+  .p-menu {
+    .p-menu-item-link {
+      .p-menu-item-icon {
+        @apply w-5;
+      }
+    }
+  }
 }

apps/lfx-pcc/src/app/modules/meeting/meeting.component.html

@@ -129,8 +129,9 @@ <h2 class="text-xl font-display font-semibold text-gray-900 mb-1 leading-tight"
                 <i class="fa-light fa-video text-gray-400"></i>
                 <span>Platform</span>
               </div>
-              <div class="text-sm font-sans">Zoom Meeting</div>
-              <div class="text-xs text-gray-500">Link will be sent via email</div>
+              <div class="flex items-center gap-2">
+                <img src="/images/zoom-logo.svg" alt="Zoom" class="w-auto h-4 mt-2 object-contain" />
+              </div>
             </div>
 
             <!-- Duration Card -->
@@ -260,7 +261,9 @@ <h4 class="font-medium text-gray-900 font-sans">Enter your information</h4>
 
                     <div class="flex items-center justify-between pt-3">
                       <p class="text-sm text-gray-500 font-sans">Meeting invites and updates will be sent to your email</p>
-                      <lfx-button size="small" [href]="meeting().join_url" severity="primary">Join Meeting</lfx-button>
+                      <lfx-button size="small" [href]="meeting().join_url" severity="primary" label="Join Meeting" icon="fa-light fa-sign-in"
+                        >Join Meeting</lfx-button
+                      >
                     </div>
                   </form>
                 </div>

apps/lfx-pcc/src/app/modules/project/committees/committee-dashboard/committee-dashboard.component.html

@@ -20,14 +20,16 @@ <h2 class="text-[16px] font-bold text-gray-900">Committee Management</h2>
             Manage committees, their settings, and organizational structure. Sub-committees are indicated with indentation.
           </p>
         </div>
-        <lfx-button
-          label="New Committee"
-          icon="fa-light fa-plus"
-          severity="primary"
-          (onClick)="openCreateDialog()"
-          size="small"
-          data-testid="committee-new-cta">
-        </lfx-button>
+        @if (project()?.writer) {
+          <lfx-button
+            label="New Committee"
+            icon="fa-light fa-plus"
+            severity="primary"
+            (onClick)="openCreateDialog()"
+            size="small"
+            data-testid="committee-new-cta">
+          </lfx-button>
+        }
       </div>
 
       <!-- Statistics Cards -->

apps/lfx-pcc/src/app/modules/project/committees/committee-dashboard/committee-dashboard.component.ts

@@ -65,7 +65,6 @@ export class CommitteeDashboardComponent {
   public votingStatusOptions: Signal<{ label: string; value: string | null }[]>;
   public filteredCommittees: Signal<Committee[]>;
   public totalRecords: Signal<number>;
-  public menuItems: MenuItem[];
   public actionMenuItems: MenuItem[];
   public refresh: BehaviorSubject<void>;
   private searchTerm: Signal<string>;
@@ -94,7 +93,6 @@ export class CommitteeDashboardComponent {
     this.votingStatusOptions = this.initializeVotingStatusOptions();
     this.filteredCommittees = this.initializeFilteredCommittees();
     this.totalRecords = this.initializeTotalRecords();
-    this.menuItems = this.initializeMenuItems();
     this.actionMenuItems = this.initializeActionMenuItems();
   }
 
@@ -341,16 +339,6 @@ export class CommitteeDashboardComponent {
     return computed(() => this.filteredCommittees().length);
   }
 
-  private initializeMenuItems(): MenuItem[] {
-    return [
-      {
-        label: 'Create Committee',
-        icon: 'fa-light fa-users-medical text-sm',
-        command: () => this.openCreateDialog(),
-      },
-    ];
-  }
-
   private initializeActionMenuItems(): MenuItem[] {
     return [
       {

apps/lfx-pcc/src/app/modules/project/committees/components/committee-members/committee-members.component.html

@@ -7,7 +7,9 @@
     <div class="flex justify-between gap-4 mb-8">
       <h3 class="text-lg font-medium text-gray-900">Committee Members</h3>
       <!-- Add Member Button -->
-      <lfx-button label="Add Member" icon="fa-light fa-user-plus" size="small" severity="secondary" (onClick)="openAddMemberDialog()"> </lfx-button>
+      @if (committee()?.writer) {
+        <lfx-button label="Add Member" icon="fa-light fa-user-plus" size="small" severity="secondary" (onClick)="openAddMemberDialog()"> </lfx-button>
+      }
     </div>
 
     <!-- Search and Filter Controls -->
@@ -136,14 +138,27 @@ <h3 class="text-lg font-medium text-gray-900">Committee Members</h3>
             }
             <td class="text-center relative">
               <lfx-menu #memberActionMenu [model]="memberActionMenuItems" [popup]="true" appendTo="body"> </lfx-menu>
-              <lfx-button
-                icon="fa-light fa-ellipsis-vertical"
-                [text]="true"
-                [rounded]="true"
-                size="small"
-                severity="secondary"
-                (onClick)="toggleMemberActionMenu($event, member, memberActionMenu)">
-              </lfx-button>
+              @if (committee()?.writer) {
+                <lfx-button
+                  icon="fa-light fa-ellipsis-vertical"
+                  [text]="true"
+                  [rounded]="true"
+                  size="small"
+                  severity="secondary"
+                  (onClick)="toggleMemberActionMenu($event, member, memberActionMenu)">
+                </lfx-button>
+              } @else {
+                <lfx-button
+                  icon="fa-light fa-envelope"
+                  [text]="true"
+                  [rounded]="true"
+                  size="small"
+                  severity="secondary"
+                  [href]="`mailto:${member.email}`"
+                  target="_blank"
+                  pTooltip="Send Message">
+                </lfx-button>
+              }
             </td>
           </tr>
         </ng-template>

apps/lfx-pcc/src/app/modules/project/committees/components/committee-table/committee-table.component.html

@@ -113,15 +113,17 @@
         <!-- Actions column -->
         <td class="px-4 py-3">
           <div class="flex items-center justify-center gap-1">
-            <lfx-button
-              icon="fa-light fa-edit"
-              [text]="true"
-              [rounded]="true"
-              size="small"
-              severity="secondary"
-              styleClass="h-8 w-8 p-0 text-gray-500 hover:text-gray-700"
-              (onClick)="onEdit(committee)"
-              [attr.data-testid]="'committee-edit-' + committee.uid" />
+            @if (committee?.writer) {
+              <lfx-button
+                icon="fa-light fa-edit"
+                [text]="true"
+                [rounded]="true"
+                size="small"
+                severity="secondary"
+                styleClass="h-8 w-8 p-0 text-gray-500 hover:text-gray-700"
+                (onClick)="onEdit(committee)"
+                [attr.data-testid]="'committee-edit-' + committee.uid" />
+            }
             <lfx-button
               icon="fa-light fa-users"
               [text]="true"
@@ -130,22 +132,25 @@
               severity="secondary"
               styleClass="h-8 w-8 p-0 text-gray-500 hover:text-gray-700"
               (onClick)="onView(committee)"
-              [attr.data-testid]="'committee-members-' + committee.uid" />
-            <lfx-button
-              icon="fa-light fa-ellipsis"
-              [text]="true"
-              [rounded]="true"
-              size="small"
-              severity="secondary"
-              styleClass="h-8 w-8 p-0 text-gray-500 hover:text-gray-700"
-              (onClick)="toggleCommitteeActionMenu($event, committee, actionMenu)"
-              [attr.data-testid]="'committee-more-' + committee.uid" />
+              [attr.data-testid]="'committee-members-' + committee.uid"
+              pTooltip="View members" />
+            @if (committee?.writer) {
+              <lfx-button
+                icon="fa-light fa-ellipsis"
+                [text]="true"
+                [rounded]="true"
+                size="small"
+                severity="secondary"
+                styleClass="h-8 w-8 p-0 text-gray-500 hover:text-gray-700"
+                (onClick)="toggleCommitteeActionMenu($event, committee, actionMenu)"
+                [attr.data-testid]="'committee-more-' + committee.uid" />
+            }
           </div>
         </td>
       </tr>
     </ng-template>
 
-    <lfx-menu #actionMenu [model]="committeeActionMenuItems" [popup]="true" appendTo="body"></lfx-menu>
+    <lfx-menu #actionMenu [model]="committeeActionMenuItems()!" [popup]="true" appendTo="body"></lfx-menu>
 
     <!-- Empty message template -->
     <ng-template #emptymessage>

apps/lfx-pcc/src/app/modules/project/committees/components/committee-table/committee-table.component.ts

@@ -11,11 +11,12 @@ import { Committee } from '@lfx-pcc/shared/interfaces';
 import { CommitteeTypeColorPipe } from '@pipes/committee-type-colors.pipe';
 import { ProjectService } from '@services/project.service';
 import { MenuItem } from 'primeng/api';
+import { TooltipModule } from 'primeng/tooltip';
 
 @Component({
   selector: 'lfx-committee-table',
   standalone: true,
-  imports: [CommonModule, RouterLink, ButtonComponent, MenuComponent, TableComponent, CommitteeTypeColorPipe],
+  imports: [CommonModule, RouterLink, ButtonComponent, MenuComponent, TableComponent, CommitteeTypeColorPipe, TooltipModule],
   templateUrl: './committee-table.component.html',
 })
 export class CommitteeTableComponent {
@@ -32,7 +33,7 @@ export class CommitteeTableComponent {
   public selectedCommittee: WritableSignal<Committee | null> = signal(null);
 
   // Menu items for committee actions
-  public committeeActionMenuItems: MenuItem[] = this.initializeCommitteeActionMenuItems();
+  public committeeActionMenuItems: Signal<MenuItem[]> = computed(() => this.initializeCommitteeActionMenuItems());
 
   // Organize committees with hierarchy for display
   public readonly organizedCommittees: Signal<(Committee & { level?: number })[]> = computed(() => {
@@ -78,7 +79,7 @@ export class CommitteeTableComponent {
   }
 
   private initializeCommitteeActionMenuItems(): MenuItem[] {
-    return [
+    const items: MenuItem[] = [
       {
         label: 'View',
         icon: 'fa-light fa-eye',
@@ -89,20 +90,27 @@ export class CommitteeTableComponent {
           }
         },
       },
-      {
-        separator: true,
-      },
-      {
-        label: 'Delete',
-        icon: 'fa-light fa-trash',
-        styleClass: 'text-red-500',
-        command: () => {
-          const committee = this.selectedCommittee();
-          if (committee) {
-            this.onDelete(committee);
-          }
-        },
-      },
     ];
+
+    if (this.selectedCommittee()?.writer) {
+      items.push(
+        {
+          separator: true,
+        },
+        {
+          label: 'Delete',
+          icon: 'fa-light fa-trash',
+          styleClass: 'text-red-500',
+          command: () => {
+            const committee = this.selectedCommittee();
+            if (committee) {
+              this.onDelete(committee);
+            }
+          },
+        }
+      );
+    }
+
+    return items;
   }
 }

apps/lfx-pcc/src/app/modules/project/dashboard/project-dashboard/project.component.html

@@ -199,14 +199,16 @@ <h3 class="text-sm font-display text-gray-500">Upcoming Meetings</h3>
                         <i class="fa-light fa-calendar text-4xl text-gray-400 mb-4"></i>
                         <h3 class="text-lg font-medium text-gray-900 mb-2">No Upcoming Meetings</h3>
                         <p class="text-gray-600 mb-4 text-sm">There are no upcoming meetings scheduled.</p>
-                        <lfx-button
-                          label="Create Meeting"
-                          icon="fa-light fa-calendar-plus"
-                          severity="secondary"
-                          size="small"
-                          [routerLink]="['meetings/create']"
-                          [relativeTo]="activatedRoute">
-                        </lfx-button>
+                        @if (project()?.writer) {
+                          <lfx-button
+                            label="Create Meeting"
+                            icon="fa-light fa-calendar-plus"
+                            severity="secondary"
+                            size="small"
+                            [routerLink]="['meetings/create']"
+                            [relativeTo]="activatedRoute">
+                          </lfx-button>
+                        }
                       </div>
                     </div>
                   }