feat(ui): create meeting form with updated ux

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

@@ -9,6 +9,7 @@ import { CommitteeDashboardComponent } from './modules/project/committees/commit
 import { CommitteeViewComponent } from './modules/project/committees/committee-view/committee-view.component';
 import { MailingListDashboardComponent } from './modules/project/mailing-lists/mailing-list-dashboard/mailing-list-dashboard.component';
 import { MeetingDashboardComponent } from './modules/project/meetings/meeting-dashboard/meeting-dashboard.component';
+import { MeetingCreateComponent } from './modules/project/meetings/components/meeting-create/meeting-create.component';
 import { SettingsDashboardComponent } from './modules/project/settings/settings-dashboard/settings-dashboard.component';
 import { ProjectComponent } from './modules/project/dashboard/project-dashboard/project.component';
 
@@ -29,6 +30,10 @@ export const routes: Routes = [
         path: 'meetings',
         component: MeetingDashboardComponent,
       },
+      {
+        path: 'meetings/create',
+        component: MeetingCreateComponent,
+      },
       {
         path: 'committees',
         component: CommitteeDashboardComponent,

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

@@ -0,0 +1,108 @@
+<!-- Copyright The Linux Foundation and each contributor to LFX. -->
+<!-- SPDX-License-Identifier: MIT -->
+
+<div class="max-w-4xl mx-auto p-6" id="meeting-create">
+  <div class="bg-white rounded-lg border border-slate-200 shadow-sm">
+    <!-- Header -->
+    <div class="border-b border-slate-200 p-6">
+      <div class="flex items-center justify-between">
+        <h1 class="text-xl font-semibold text-slate-900" data-testid="meeting-create-title">Create Meeting</h1>
+        <div class="text-sm text-slate-500" data-testid="meeting-create-step-indicator">Step {{ currentStep() + 1 }} of {{ totalSteps }}</div>
+      </div>
+    </div>
+
+    <!-- Stepper Content -->
+    <div class="p-8">
+      <p-stepper [value]="currentStep()" [linear]="true" data-testid="meeting-create-stepper">
+        <p-step-list>
+          <p-step [value]="0" data-testid="meeting-create-step-0"></p-step>
+          <p-step [value]="1" data-testid="meeting-create-step-1"></p-step>
+          <p-step [value]="2" data-testid="meeting-create-step-2"></p-step>
+          <p-step [value]="3" data-testid="meeting-create-step-3"></p-step>
+          <p-step [value]="4" data-testid="meeting-create-step-4"></p-step>
+        </p-step-list>
+
+        <p-step-panels>
+          <p-step-panel [value]="0" data-testid="meeting-create-panel-0">
+            <ng-template #content let-activateCallback="activateCallback">
+              <lfx-meeting-type-selection [form]="form()"></lfx-meeting-type-selection>
+            </ng-template>
+          </p-step-panel>
+
+          <p-step-panel [value]="1" data-testid="meeting-create-panel-1">
+            <ng-template #content let-activateCallback="activateCallback">
+              <lfx-meeting-details [form]="form()"></lfx-meeting-details>
+            </ng-template>
+          </p-step-panel>
+
+          <p-step-panel [value]="2" data-testid="meeting-create-panel-2">
+            <ng-template #content let-activateCallback="activateCallback">
+              <div class="min-h-96 flex items-center justify-center text-slate-500">
+                <p>Step 3: Platform & Features - To be implemented</p>
+              </div>
+            </ng-template>
+          </p-step-panel>
+
+          <p-step-panel [value]="3" data-testid="meeting-create-panel-3">
+            <ng-template #content let-activateCallback="activateCallback">
+              <div class="min-h-96 flex items-center justify-center text-slate-500">
+                <p>Step 4: Participants - To be implemented</p>
+              </div>
+            </ng-template>
+          </p-step-panel>
+
+          <p-step-panel [value]="4" data-testid="meeting-create-panel-4">
+            <ng-template #content let-activateCallback="activateCallback">
+              <div class="min-h-96 flex items-center justify-center text-slate-500">
+                <p>Step 5: Resources & Summary - To be implemented</p>
+              </div>
+            </ng-template>
+          </p-step-panel>
+        </p-step-panels>
+      </p-stepper>
+    </div>
+
+    <!-- Footer Navigation -->
+    <div class="border-t border-slate-200 p-6">
+      <div class="flex justify-between">
+        <lfx-button
+          label="Previous"
+          icon="fa-light fa-arrow-left"
+          [disabled]="!canGoPrevious()"
+          [outlined]="true"
+          (onClick)="previousStep()"
+          size="small"
+          data-testid="meeting-create-previous-btn">
+        </lfx-button>
+
+        <div class="flex gap-3">
+          <lfx-button [label]="'Cancel'" [outlined]="true" (onClick)="onCancel()" data-testid="meeting-create-cancel-btn" size="small"> </lfx-button>
+
+          @if (!isLastStep()) {
+            <lfx-button
+              label="Next"
+              icon="fa-light fa-arrow-right"
+              [iconPos]="'right'"
+              [disabled]="!canProceed()"
+              [severity]="'primary'"
+              (onClick)="nextStep()"
+              size="small"
+              data-testid="meeting-create-next-btn">
+            </lfx-button>
+          } @else {
+            <lfx-button
+              label="Create Meeting"
+              icon="fa-light fa-check"
+              size="small"
+              [loading]="submitting()"
+              [disabled]="!canProceed() || submitting()"
+              [severity]="'primary'"
+              (onClick)="onSubmit()"
+              data-testid="meeting-create-submit-btn">
+            </lfx-button>
+          }
+        </div>
+      </div>
+    </div>
+  </div>
+</div>