invitation-code-lib 1.0.0

package/fesm2022/invitation-code-lib.mjs

@@ -0,0 +1,2532 @@
+import * as i0 from '@angular/core';
+import { Component, Injectable, Inject, EventEmitter, Output, Input, InjectionToken, forwardRef, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$2 from '@angular/forms';
+import { Validators, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1 from '@angular/common/http';
+import { HttpParams, HttpClientModule } from '@angular/common/http';
+import { RouterModule } from '@angular/router';
+import * as i1$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i4$1 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableModule } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatSortModule } from '@angular/material/sort';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatCardModule } from '@angular/material/card';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i4 from '@naniteninja/ionic-lib';
+import { GridModule } from '@naniteninja/ionic-lib';
+import { BehaviorSubject, Subject, Observable } from 'rxjs';
+import { map, tap, takeUntil } from 'rxjs/operators';
+
+function CodeManagementComponent_div_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "app-invitation-codes");
+    i0.ɵɵelementEnd();
+} }
+function CodeManagementComponent_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div");
+    i0.ɵɵelement(1, "app-waitlist");
+    i0.ɵɵelementEnd();
+} }
+class CodeManagementComponent {
+    activeTab = 'codes';
+    onTabChanged(tab) {
+        this.activeTab = tab;
+    }
+    static ɵfac = function CodeManagementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CodeManagementComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CodeManagementComponent, selectors: [["app-code-management"]], standalone: false, decls: 5, vars: 2, consts: [[1, "invitation-codes-page", "min-h-screen", "p-10"], [3, "tabChanged"], [4, "ngIf"]], template: function CodeManagementComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "app-stats-overview");
+            i0.ɵɵelementStart(2, "app-code-management-header", 1);
+            i0.ɵɵlistener("tabChanged", function CodeManagementComponent_Template_app_code_management_header_tabChanged_2_listener($event) { return ctx.onTabChanged($event); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(3, CodeManagementComponent_div_3_Template, 2, 0, "div", 2)(4, CodeManagementComponent_div_4_Template, 2, 0, "div", 2);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.activeTab === "codes");
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.activeTab === "waitlist");
+        } }, encapsulation: 2 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CodeManagementComponent, [{
+        type: Component,
+        args: [{ selector: 'app-code-management', standalone: false, template: "<div class=\"invitation-codes-page min-h-screen p-10\">\r\n\r\n  <app-stats-overview></app-stats-overview>\r\n\r\n  <!-- Tab Navigation -->\r\n  <app-code-management-header\r\n    (tabChanged)=\"onTabChanged($event)\">\r\n  </app-code-management-header>\r\n\r\n  <!-- Tab Content -->\r\n  <div *ngIf=\"activeTab === 'codes'\">\r\n    <app-invitation-codes></app-invitation-codes>\r\n  </div>\r\n\r\n  <div *ngIf=\"activeTab === 'waitlist'\">\r\n    <app-waitlist></app-waitlist>\r\n  </div>\r\n</div>\r\n" }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CodeManagementComponent, { className: "CodeManagementComponent", filePath: "lib/pages/code-management/code-management.component.ts", lineNumber: 9 }); })();
+
+const invitationStatuses = [
+    { Key: 'account_created', Value: 'Account Created' },
+    { Key: 'registration_started', Value: 'Registration Started' },
+    { Key: 'pending', Value: 'Pending' },
+    { Key: 'revoked', Value: 'Revoked' },
+    { Key: 'expired', Value: 'Expired' },
+    { Key: 'completed', Value: 'Completed' }
+];
+const userTypes = [
+    { Key: 'premium', Value: 'Premium Member' },
+    { Key: 'standard', Value: 'Standard Member' },
+    { Key: 'vip', Value: 'VIP Member' }
+];
+const invitationGridColumns = [
+    {
+        name: 'code',
+        label: 'Code',
+        visible: true,
+        sortable: true,
+        width: 180,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'userType',
+        label: 'User Type',
+        visible: true,
+        sortable: true,
+        width: 150,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'status',
+        label: 'Status',
+        visible: true,
+        sortable: true,
+        width: 160,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'created',
+        label: 'Created',
+        visible: true,
+        sortable: true,
+        width: 180,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'expires',
+        label: 'Expires',
+        visible: true,
+        sortable: true,
+        width: 180,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'invitee',
+        label: 'Invitee',
+        visible: true,
+        sortable: true,
+        width: 200,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'progress',
+        label: 'Progress',
+        visible: true,
+        sortable: false,
+        width: 150,
+        controlType: 'Text',
+        editable: false
+    }
+];
+
+class ApiUrlBuilder {
+    config;
+    constructor(config) {
+        this.config = config;
+    }
+    buildUrl(endpoint) {
+        const baseUrl = this.config.apiUrl.endsWith('/')
+            ? this.config.apiUrl.slice(0, -1)
+            : this.config.apiUrl;
+        const apiPrefix = this.config.apiSuffix
+            ? `/${this.config.apiSuffix}`
+            : '';
+        return `${baseUrl}${apiPrefix}/${endpoint}`;
+    }
+    static ɵfac = function ApiUrlBuilder_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ApiUrlBuilder)(i0.ɵɵinject(INVITATION_CODE_CONFIG)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ApiUrlBuilder, factory: ApiUrlBuilder.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApiUrlBuilder, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], () => [{ type: undefined, decorators: [{
+                type: Inject,
+                args: [INVITATION_CODE_CONFIG]
+            }] }], null); })();
+
+class InvitationCodeService {
+    http;
+    config;
+    apiUrlBuilder;
+    refreshGrid$ = new BehaviorSubject(undefined);
+    constructor(http, config) {
+        this.http = http;
+        this.config = config;
+        this.apiUrlBuilder = new ApiUrlBuilder(config);
+    }
+    get refreshTrigger$() {
+        return this.refreshGrid$.asObservable();
+    }
+    triggerRefresh() {
+        this.refreshGrid$.next();
+    }
+    getInvitationCodes(page = 1, limit = 10, filters, sortField, sortOrder, search) {
+        let params = new HttpParams()
+            .set('page', page.toString())
+            .set('limit', limit.toString());
+        if (filters && filters.length > 0) {
+            params = params.set('filters', JSON.stringify(filters));
+        }
+        if (sortField) {
+            params = params.set('sortField', sortField);
+        }
+        if (sortOrder) {
+            params = params.set('sortOrder', sortOrder);
+        }
+        if (search) {
+            params = params.set('search', search);
+        }
+        return this.http.get(this.apiUrlBuilder.buildUrl('invitation-codes'), { params });
+    }
+    getWaitlistMembers(page = 1, limit = 10, filters, sortField, sortOrder, search) {
+        let params = new HttpParams()
+            .set('page', page.toString())
+            .set('limit', limit.toString());
+        // Add search parameter
+        if (search) {
+            params = params.set('search', search);
+        }
+        // Handle user type filter
+        if (filters && filters.length > 0) {
+            const userTypeFilter = this.extractUserTypeFilter(filters);
+            if (userTypeFilter) {
+                params = params.set('userType', userTypeFilter);
+            }
+        }
+        // Handle status filter
+        if (filters && filters.length > 0) {
+            const statusFilter = this.extractStatusFilter(filters);
+            if (statusFilter) {
+                params = params.set('status', statusFilter);
+            }
+        }
+        return this.http.get(this.apiUrlBuilder.buildUrl('waitlisted-users'), { params }).pipe(map(response => {
+            if (!response.success) {
+                return { data: [], count: 0 };
+            }
+            // Transform response to match expected format
+            const mappedData = response.data.map((user) => ({
+                id: user.id,
+                name: user.name,
+                email: user.email,
+                userType: this.mapUserType(user.userType),
+                priority: 'normal',
+                joined: new Date(user.waitlistJoinedAt || user.createdAt),
+                waitTime: this.calculateWaitTime(user.waitlistJoinedAt),
+                notes: '',
+                status: user.status === 'waitlist_invited' ? 'invited' : user.status,
+                convertedAt: user.convertedAt,
+                convertedToCodeId: user.convertedToCodeId
+            }));
+            return {
+                data: mappedData,
+                count: response.meta?.total || response.data.length
+            };
+        }));
+    }
+    extractUserTypeFilter(filters) {
+        for (const filter of filters) {
+            if (filter.publicFieldName === 'userType') {
+                if (filter.operatorType === 'Equals' || filter.operatorType === 'AnyOf') {
+                    const value = filter.values[0];
+                    const typeMap = {
+                        'premium': 'matcher',
+                        'standard': 'unmatched',
+                        'vip': 'vip'
+                    };
+                    return typeMap[value] || value;
+                }
+            }
+        }
+        return null;
+    }
+    extractStatusFilter(filters) {
+        for (const filter of filters) {
+            if (filter.publicFieldName === 'status') {
+                if (filter.operatorType === 'Equals' || filter.operatorType === 'AnyOf') {
+                    const value = filter.values[0];
+                    if (value === 'invited') {
+                        return 'waitlist_invited';
+                    }
+                    return value;
+                }
+            }
+        }
+        return null;
+    }
+    mapUserType(userType) {
+        const typeLower = userType.toLowerCase();
+        if (typeLower.includes('matcher') || typeLower.includes('premium')) {
+            return 'premium';
+        }
+        else if (typeLower.includes('vip')) {
+            return 'vip';
+        }
+        else {
+            return 'standard';
+        }
+    }
+    calculateWaitTime(joinedDate) {
+        if (!joinedDate)
+            return 0;
+        const joined = new Date(joinedDate);
+        const now = new Date();
+        const diffTime = Math.abs(now.getTime() - joined.getTime());
+        return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    }
+    getStats() {
+        return this.http.get(this.apiUrlBuilder.buildUrl('invitation-codes/stats')).pipe(map(stats => [
+            {
+                title: 'Total Codes',
+                value: stats.total || 0,
+                icon: 'qr_code',
+                color: 'bg-blue-500'
+            },
+            {
+                title: 'Pending',
+                value: stats.pending || 0,
+                icon: 'schedule',
+                color: 'bg-yellow-500'
+            },
+            {
+                title: 'Completed',
+                value: stats.completed || 0,
+                icon: 'check_circle',
+                color: 'bg-green-500'
+            },
+            {
+                title: 'Revoked',
+                value: stats.revoked || 0,
+                icon: 'cancel',
+                color: 'bg-red-500'
+            },
+            {
+                title: 'Active',
+                value: stats.active || 0,
+                icon: 'play_arrow',
+                color: 'bg-purple-500'
+            }
+        ]));
+    }
+    createInvitationCode(data) {
+        return this.http.post(this.apiUrlBuilder.buildUrl('invitation-codes'), data).pipe(tap(() => this.triggerRefresh()));
+    }
+    generateCode(data) {
+        const requestData = {
+            name: data.name,
+            maxUses: data.maxUses,
+            expiryDate: data.expiryDate || data.expires,
+            accessLevel: data.accessLevel,
+            userType: data.userType,
+            email: data.email
+        };
+        return this.http.post(this.apiUrlBuilder.buildUrl('invitation-codes/generate'), requestData).pipe(tap(() => this.triggerRefresh()));
+    }
+    revokeInvitationCode(codeId) {
+        return this.http.put(this.apiUrlBuilder.buildUrl(`invitation-codes/${codeId}/revoke`), {}).pipe(tap(() => this.triggerRefresh()));
+    }
+    deleteInvitationCode(codeId) {
+        return this.http.delete(this.apiUrlBuilder.buildUrl(`invitation-codes/${codeId}`)).pipe(tap(() => this.triggerRefresh()));
+    }
+    bulkGenerateFromWaitlist(data) {
+        return this.http.post(this.apiUrlBuilder.buildUrl('waitlisted-users/bulk-invite'), {
+            userIds: data.waitlistMemberIds,
+            expiryDays: data.expiryDays,
+            accessLevel: data.accessLevel
+        }).pipe(map(response => {
+            if (!response.success) {
+                throw new Error(response.error || 'Failed to create invitations');
+            }
+            const successfulResults = response.data?.results?.filter((r) => r.success) || [];
+            return successfulResults.map((r) => r.data?.invitation || {});
+        }), tap(() => this.triggerRefresh()));
+    }
+    static ɵfac = function InvitationCodeService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InvitationCodeService)(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(INVITATION_CODE_CONFIG)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: InvitationCodeService, factory: InvitationCodeService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InvitationCodeService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                type: Inject,
+                args: [INVITATION_CODE_CONFIG]
+            }] }], null); })();
+
+class InvitationGridService {
+    invitationCodeService;
+    destroy$ = new Subject();
+    constructor(invitationCodeService) {
+        this.invitationCodeService = invitationCodeService;
+    }
+    getInvitationCodes(event) {
+        const page = Math.floor(event.from / event.size) + 1;
+        const limit = event.size;
+        return this.invitationCodeService.getInvitationCodes(page, limit, event.userFilters, event.sortField, event.sortDirection === 'Ascending' ? 'asc' : 'desc', event.searchString).pipe(map(response => {
+            const gridRows = response.data.map(item => {
+                const gridItem = {
+                    id: item.id,
+                    code: item.code,
+                    userType: item.userType,
+                    status: item.status,
+                    created: item.createdAt,
+                    expires: item.expires || new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
+                    invitee: item.email || 'Anyone',
+                    progress: this.getProgressText(item),
+                    name: item.name,
+                    createdAt: item.createdAt,
+                    updatedAt: item.updatedAt,
+                    email: item.email,
+                    usedBy: item.usedBy,
+                    usedAt: item.usedAt,
+                    revokedAt: item.revokedAt,
+                    maxUses: item.maxUses,
+                    currentUses: item.currentUses,
+                    accessLevel: item.accessLevel,
+                    notes: item.notes,
+                    waitlistMemberId: item.waitlistMemberId
+                };
+                return {
+                    id: item.id,
+                    data: gridItem,
+                    rowMenuItems: this.createActionMenu(gridItem),
+                    hasEditPermissions: true,
+                    hasDeletePermissions: true,
+                    displayValues: this.createDisplayValues(gridItem)
+                };
+            });
+            return { data: gridRows, count: response.count };
+        }));
+    }
+    createDisplayValues(item) {
+        return {
+            code: item.code,
+            userType: this.getUserTypeDisplay(item.userType),
+            status: this.getStatusDisplay(item.status),
+            created: this.formatDate(item.created),
+            expires: item.expires ? this.formatDate(item.expires) : 'Never',
+            invitee: item.email || 'Anyone',
+            progress: item.progress
+        };
+    }
+    formatDate(date) {
+        if (!date)
+            return 'N/A';
+        const d = new Date(date);
+        return isNaN(d.getTime()) ? 'Invalid Date' : d.toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+    getUserTypeDisplay(userType) {
+        const userTypeMap = {
+            'premium': 'Premium Member',
+            'standard': 'Standard Member',
+            'vip': 'VIP Member'
+        };
+        return userTypeMap[userType] || userType;
+    }
+    getStatusDisplay(status) {
+        const statusMap = {
+            'account_created': 'Account Created',
+            'registration_started': 'Registration Started',
+            'pending': 'Pending',
+            'revoked': 'Revoked',
+            'expired': 'Expired',
+            'completed': 'Completed',
+            'deleted': 'Deleted'
+        };
+        return statusMap[status] || status;
+    }
+    getProgressText(item) {
+        if (item.status === 'account_created' || item.status === 'completed') {
+            return 'Account created\nSuccessfully onboarded';
+        }
+        else if (item.status === 'registration_started') {
+            return 'In progress...';
+        }
+        else if ('usedAt' in item && item.usedAt) {
+            return `Used on ${this.formatDate(item.usedAt)}`;
+        }
+        return '';
+    }
+    createActionMenu(item) {
+        const menuItems = [
+            {
+                label: 'Copy Code',
+                icon: 'pi pi-copy',
+                command: () => this.copyCode(item)
+            }
+        ];
+        if (item.status !== 'revoked' && item.status !== 'expired' && item.status !== 'completed') {
+            menuItems.push({
+                label: 'Revoke Code',
+                icon: 'pi pi-times',
+                command: () => this.revokeCode(item)
+            });
+        }
+        if (item.status !== 'deleted') {
+            menuItems.push({
+                label: 'Delete',
+                icon: 'pi pi-trash',
+                command: () => this.deleteCode(item)
+            });
+        }
+        else {
+            menuItems.push({
+                label: 'Restore',
+                icon: 'pi pi-refresh',
+                command: () => this.restoreCode(item)
+            });
+        }
+        return menuItems;
+    }
+    copyCode(item) {
+        navigator.clipboard.writeText(item.code).then(() => {
+            alert(`Code "${item.code}" copied to clipboard!`);
+        }).catch(err => {
+            const textArea = document.createElement('textarea');
+            textArea.value = item.code;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            alert(`Code "${item.code}" copied to clipboard!`);
+        });
+    }
+    revokeCode(item) {
+        if (confirm(`Are you sure you want to revoke code "${item.code}"?`)) {
+            this.invitationCodeService.revokeInvitationCode(item.id).subscribe({
+                next: () => {
+                    alert(`Code "${item.code}" has been revoked!`);
+                },
+                error: (error) => {
+                    alert(`Failed to revoke code: ${error.message}`);
+                }
+            });
+        }
+    }
+    deleteCode(item) {
+        if (confirm(`Are you sure you want to delete code "${item.code}"? This will soft delete it (mark as deleted).`)) {
+            this.invitationCodeService.deleteInvitationCode(item.id).subscribe({
+                next: () => {
+                    alert(`Code "${item.code}" has been deleted!`);
+                },
+                error: (error) => {
+                    alert(`Failed to delete code: ${error.message}`);
+                }
+            });
+        }
+    }
+    restoreCode(item) {
+        if (confirm(`Are you sure you want to restore code "${item.code}"?`)) {
+            alert('Restore functionality to be implemented');
+        }
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static ɵfac = function InvitationGridService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InvitationGridService)(i0.ɵɵinject(InvitationCodeService)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: InvitationGridService, factory: InvitationGridService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InvitationGridService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], () => [{ type: InvitationCodeService }], null); })();
+
+function InvitationCodesComponent_button_11_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 12);
+    i0.ɵɵlistener("click", function InvitationCodesComponent_button_11_Template_button_click_0_listener() { const filter_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setFilter(filter_r2)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const filter_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r2.activeFilter === filter_r2 ? "selected-filter px-4 py-2 text-sm font-medium transition-colors" : "unselected-filter px-4 py-2 text-sm font-medium transition-colors");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getFilterDisplayName(filter_r2), " ");
+} }
+class InvitationCodesComponent {
+    invitationGridService;
+    invitationCodeService;
+    gridData = [];
+    isLoading = false;
+    totalRecords = 0;
+    rowsPerPage = 10;
+    rowsPerPageOptions = [5, 10, 25, 50];
+    sortField = 'created';
+    sortOrder = 'Descending';
+    columns = invitationGridColumns;
+    activeFilter = 'all';
+    filters = ['all', 'pending', 'active', 'inactive', 'deleted'];
+    destroy$ = new Subject();
+    constructor(invitationGridService, invitationCodeService) {
+        this.invitationGridService = invitationGridService;
+        this.invitationCodeService = invitationCodeService;
+    }
+    ngOnInit() {
+        this.loadGridData();
+        this.subscribeToAutoRefresh();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    subscribeToAutoRefresh() {
+        this.invitationCodeService.refreshTrigger$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.loadGridData();
+        });
+    }
+    loadGridData() {
+        const request = {
+            from: 0,
+            size: this.rowsPerPage,
+            sortField: this.sortField,
+            sortDirection: this.sortOrder,
+            searchString: '',
+            userFilters: this.getUserFiltersForActiveFilter()
+        };
+        this.isLoading = true;
+        this.invitationGridService.getInvitationCodes(request).subscribe({
+            next: (response) => {
+                this.gridData = response.data;
+                this.totalRecords = response.count;
+                this.isLoading = false;
+            },
+            error: (error) => {
+                this.isLoading = false;
+            }
+        });
+    }
+    onLazyLoad(event) {
+        this.isLoading = true;
+        this.invitationGridService.getInvitationCodes(event).subscribe({
+            next: (response) => {
+                this.gridData = response.data;
+                this.totalRecords = response.count;
+                this.isLoading = false;
+            },
+            error: (error) => {
+                this.isLoading = false;
+            }
+        });
+    }
+    setFilter(filter) {
+        this.activeFilter = filter;
+        this.applyFilter();
+    }
+    applyFilter() {
+        const request = {
+            from: 0,
+            size: this.rowsPerPage,
+            sortField: this.sortField,
+            sortDirection: this.sortOrder,
+            searchString: '',
+            userFilters: this.getUserFiltersForActiveFilter()
+        };
+        this.isLoading = true;
+        this.invitationGridService.getInvitationCodes(request).subscribe({
+            next: (response) => {
+                this.gridData = response.data;
+                this.totalRecords = response.count;
+                this.isLoading = false;
+            },
+            error: (error) => {
+                this.isLoading = false;
+            }
+        });
+    }
+    getUserFiltersForActiveFilter() {
+        switch (this.activeFilter) {
+            case 'pending':
+                return [{
+                        publicFieldName: 'status',
+                        operatorType: 'Equals',
+                        values: ['pending']
+                    }];
+            case 'active':
+                return [{
+                        publicFieldName: 'status',
+                        operatorType: 'AnyOf',
+                        values: ['account_created', 'registration_started']
+                    }];
+            case 'inactive':
+                return [{
+                        publicFieldName: 'status',
+                        operatorType: 'AnyOf',
+                        values: ['revoked', 'expired']
+                    }];
+            case 'deleted':
+                return [{
+                        publicFieldName: 'status',
+                        operatorType: 'Equals',
+                        values: ['deleted']
+                    }];
+            default:
+                return [];
+        }
+    }
+    getFilterDisplayName(filter) {
+        const displayNames = {
+            'all': 'All Codes',
+            'pending': 'Pending',
+            'active': 'Active',
+            'inactive': 'Inactive',
+            'deleted': 'Deleted'
+        };
+        return displayNames[filter];
+    }
+    onActionButtonClicked(event) {
+    }
+    onCellClicked(event) {
+    }
+    static ɵfac = function InvitationCodesComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InvitationCodesComponent)(i0.ɵɵdirectiveInject(InvitationGridService), i0.ɵɵdirectiveInject(InvitationCodeService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: InvitationCodesComponent, selectors: [["app-invitation-codes"]], standalone: false, decls: 14, vars: 17, consts: [[1, "main-grid-section", "p-6"], [1, "code-management-header", "mb-6", "p-3"], [1, "flex", "flex-col", "lg:flex-row", "lg:items-center", "lg:justify-between"], [1, "mb-4", "lg:mb-0"], [1, "text-xl", "font-semibold", "text-white", "mb-2"], [1, "text-gray-400", "text-sm"], [1, "filter-tabs", "mb-6"], [1, "filter-container", "p-1.5", "bg-gray-800", "border", "border-gray-700", "rounded-xl", "w-fit"], [1, "flex", "space-x-0.5"], [3, "class", "click", 4, "ngFor", "ngForOf"], [1, "grid-placeholder", "bg-gray-800", "rounded-lg", "border", "border-gray-700"], [1, "dark-theme-grid", "w-full", 3, "lazyLoad", "cellClicked", "data", "columns", "isLoading", "totalRecords", "rowsPerPage", "rowsPerPageOptions", "sortField", "sortOrder", "enableSelection", "enableCreate", "enableRefresh", "enableTrash", "enableGridFilters", "hideToolbar", "hideSettings", "hideRowMenu"], [3, "click"]], template: function InvitationCodesComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "div", 3)(4, "h3", 4);
+            i0.ɵɵtext(5, "Invitation Codes");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "p", 5);
+            i0.ɵɵtext(7, " View and manage all invitation codes. Codes are one-time use and bypass user type limits. ");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(8, "div", 6)(9, "div", 7)(10, "div", 8);
+            i0.ɵɵtemplate(11, InvitationCodesComponent_button_11_Template, 2, 3, "button", 9);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(12, "div", 10)(13, "lib-grid", 11);
+            i0.ɵɵlistener("lazyLoad", function InvitationCodesComponent_Template_lib_grid_lazyLoad_13_listener($event) { return ctx.onLazyLoad($event); })("cellClicked", function InvitationCodesComponent_Template_lib_grid_cellClicked_13_listener($event) { return ctx.onCellClicked($event); });
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(11);
+            i0.ɵɵproperty("ngForOf", ctx.filters);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("data", ctx.gridData)("columns", ctx.columns)("isLoading", ctx.isLoading)("totalRecords", ctx.totalRecords)("rowsPerPage", ctx.rowsPerPage)("rowsPerPageOptions", ctx.rowsPerPageOptions)("sortField", ctx.sortField)("sortOrder", ctx.sortOrder)("enableSelection", false)("enableCreate", false)("enableRefresh", false)("enableTrash", false)("enableGridFilters", false)("hideToolbar", true)("hideSettings", true)("hideRowMenu", false);
+        } }, dependencies: [i2.NgForOf, i4.GridComponent], styles: [".main-grid-section[_ngcontent-%COMP%]{border:2px solid #423D48;border-radius:10px;margin-top:35px;background:#29252d}[_nghost-%COMP%]     .grid-cell-text{position:relative!important;min-height:48px!important;display:flex!important;align-items:center!important;transition:all .2s ease!important}[_nghost-%COMP%]     th.grid-cell:nth-of-type(2) .grid-cell-text:before{content:\"Code\"!important}[_nghost-%COMP%]     th.grid-cell:nth-of-type(3) .grid-cell-text:before{content:\"User Type\"!important}[_nghost-%COMP%]     th.grid-cell:nth-of-type(4) .grid-cell-text:before{content:\"Status\"!important}[_nghost-%COMP%]     th.grid-cell:nth-of-type(5) .grid-cell-text:before{content:\"Created At\"!important}[_nghost-%COMP%]     th.grid-cell:nth-of-type(6) .grid-cell-text:before{content:\"Expire\"!important}[_nghost-%COMP%]     th.grid-cell:nth-of-type(7) .grid-cell-text:before{content:\"Invitee\"!important}[_nghost-%COMP%]     th.grid-cell:nth-of-type(8) .grid-cell-text:before{content:\"Progress\"!important}[_nghost-%COMP%]     .grid-cell-text:before{color:#fff!important;font-weight:400!important;font-size:14px!important;font-family:Roboto,sans-serif!important;z-index:10!important;transition:color .2s ease!important}[_nghost-%COMP%]     th.grid-cell:hover .grid-cell-text:before{color:#000!important}[_nghost-%COMP%]     th.grid-cell .p-datatable-column-sorted .grid-cell-text:before, [_nghost-%COMP%]     th.grid-cell .grid-cell-text.p-datatable-column-sorted:before, [_nghost-%COMP%]     th.grid-cell[aria-sort] .grid-cell-text:before{color:#000!important}[_nghost-%COMP%]     th.grid-cell:hover{transition:background-color .2s ease!important}[_nghost-%COMP%]     .grid-cell-text .ng-star-inserted{margin-left:auto!important;margin-right:8px!important;transition:filter .2s ease!important}[_nghost-%COMP%]     .p-button-icon{display:none!important}[_nghost-%COMP%]     .filter-toolbar-top-container{display:none!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:none!important;visibility:hidden!important;opacity:0!important}[_nghost-%COMP%]     .grid-row-menu-button, [_nghost-%COMP%]     [alignfrozen=left]{padding:0 40px 0 0!important;text-align:center!important;vertical-align:middle!important}[_nghost-%COMP%]     .grid-row-menu-button button, [_nghost-%COMP%]     [alignfrozen=left] button{all:initial!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;display:inline-block!important;position:relative!important;cursor:pointer!important;margin:0 auto!important;border:none!important;background:none!important;padding:0!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDQgMTYiIGZpbGw9IiM5Y2EzYWYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiLz48Y2lyY2xlIGN4PSIyIiBjeT0iOCIgcj0iMiIvPjxjaXJjbGUgY3g9IjIiIGN5PSIxNCIgcj0iMiIvPjwvc3ZnPg==)!important;background-repeat:no-repeat!important;background-position:center!important;background-size:4px 16px!important;border-radius:6px!important}[_nghost-%COMP%]     .grid-row-menu-button button:hover, [_nghost-%COMP%]     [alignfrozen=left] button:hover{background-color:#4b5563!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDQgMTYiIGZpbGw9IiM5Y2EzYWYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiLz48Y2lyY2xlIGN4PSIyIiBjeT0iOCIgcj0iMiIvPjxjaXJjbGUgY3g9IjIiIGN5PSIxNCIgcj0iMiIvPjwvc3ZnPg==)!important}[_nghost-%COMP%]     .grid-row-menu-button button i, [_nghost-%COMP%]     [alignfrozen=left] button i, [_nghost-%COMP%]     .pi-ellipsis-v{display:none!important;width:0!important;height:0!important;font-size:0!important;visibility:hidden!important;opacity:0!important}.dark-theme-grid[_ngcontent-%COMP%]   .p-datatable[_ngcontent-%COMP%]{justify-content:center;align-items:center}.dark-theme-grid[_ngcontent-%COMP%]   .p-menu-list[_ngcontent-%COMP%]{background:#fff!important}.filter-container[_ngcontent-%COMP%]{position:relative;display:inline-block;border:2px solid #423D48;padding:3px;border-radius:20px}.filter-container[_ngcontent-%COMP%]:before{content:\"\";position:absolute;inset:1.5px;background:transparent;border-radius:20px;z-index:0;transition:all .2s ease}.filter-container[_ngcontent-%COMP%]   .flex[_ngcontent-%COMP%]{position:relative;z-index:1}.filter-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{position:relative;z-index:2;min-width:80px;all:unset;cursor:pointer;text-align:center;padding:.5rem 1rem;border-radius:16px;font-size:.875rem;font-weight:500;transition:all .2s ease}.filter-container[_ngcontent-%COMP%]   button.selected-filter[_ngcontent-%COMP%]{background-color:#374151;color:#fff;border:1px solid #4b5563;box-shadow:0 1px 2px #0000001a}.filter-container[_ngcontent-%COMP%]   button.unselected-filter[_ngcontent-%COMP%]{background-color:transparent;color:#d1d5db;border:1px solid transparent}.filter-container[_ngcontent-%COMP%]   button.unselected-filter[_ngcontent-%COMP%]:hover{background-color:#4b556333;color:#fff}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InvitationCodesComponent, [{
+        type: Component,
+        args: [{ selector: 'app-invitation-codes', standalone: false, template: "\r\n  <div class=\"main-grid-section p-6\">\r\n    <!-- Header Section -->\r\n    <div class=\"code-management-header mb-6 p-3\">\r\n      <div class=\"flex flex-col lg:flex-row lg:items-center lg:justify-between\">\r\n        <div class=\"mb-4 lg:mb-0\">\r\n          <h3 class=\"text-xl font-semibold text-white mb-2\">Invitation Codes</h3>\r\n          <p class=\"text-gray-400 text-sm\">\r\n            View and manage all invitation codes. Codes are one-time use and bypass user type limits.\r\n          </p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Filter Tabs -->\r\n    <!-- Filter Tabs -->\r\n<div class=\"filter-tabs mb-6\">\r\n  <div class=\"filter-container p-1.5 bg-gray-800 border border-gray-700 rounded-xl w-fit\">\r\n    <div class=\"flex space-x-0.5\">\r\n      <button\r\n        *ngFor=\"let filter of filters\"\r\n        (click)=\"setFilter(filter)\"\r\n        [class]=\"activeFilter === filter\r\n          ? 'selected-filter px-4 py-2 text-sm font-medium transition-colors'\r\n          : 'unselected-filter px-4 py-2 text-sm font-medium transition-colors'\">\r\n        {{ getFilterDisplayName(filter) }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n    <!-- Grid Section -->\r\n    <div class=\"grid-placeholder bg-gray-800 rounded-lg border border-gray-700\">\r\n      <lib-grid\r\n      [data]=\"gridData\"\r\n      [columns]=\"columns\"\r\n      [isLoading]=\"isLoading\"\r\n      [totalRecords]=\"totalRecords\"\r\n      [rowsPerPage]=\"rowsPerPage\"\r\n      [rowsPerPageOptions]=\"rowsPerPageOptions\"\r\n      [sortField]=\"sortField\"\r\n      [sortOrder]=\"sortOrder\"\r\n      [enableSelection]=\"false\"\r\n      [enableCreate]=\"false\"\r\n      [enableRefresh]=\"false\"\r\n      [enableTrash]=\"false\"\r\n      [enableGridFilters]=\"false\"\r\n      [hideToolbar]=\"true\"\r\n      [hideSettings]=\"true\"\r\n      [hideRowMenu]=\"false\"\r\n      (lazyLoad)=\"onLazyLoad($event)\"\r\n      (cellClicked)=\"onCellClicked($event)\"\r\n      class=\"dark-theme-grid w-full\">\r\n    </lib-grid>\r\n    </div>\r\n  </div>\r\n\r\n", styles: [".main-grid-section{border:2px solid #423D48;border-radius:10px;margin-top:35px;background:#29252d}:host ::ng-deep .grid-cell-text{position:relative!important;min-height:48px!important;display:flex!important;align-items:center!important;transition:all .2s ease!important}:host ::ng-deep th.grid-cell:nth-of-type(2) .grid-cell-text:before{content:\"Code\"!important}:host ::ng-deep th.grid-cell:nth-of-type(3) .grid-cell-text:before{content:\"User Type\"!important}:host ::ng-deep th.grid-cell:nth-of-type(4) .grid-cell-text:before{content:\"Status\"!important}:host ::ng-deep th.grid-cell:nth-of-type(5) .grid-cell-text:before{content:\"Created At\"!important}:host ::ng-deep th.grid-cell:nth-of-type(6) .grid-cell-text:before{content:\"Expire\"!important}:host ::ng-deep th.grid-cell:nth-of-type(7) .grid-cell-text:before{content:\"Invitee\"!important}:host ::ng-deep th.grid-cell:nth-of-type(8) .grid-cell-text:before{content:\"Progress\"!important}:host ::ng-deep .grid-cell-text:before{color:#fff!important;font-weight:400!important;font-size:14px!important;font-family:Roboto,sans-serif!important;z-index:10!important;transition:color .2s ease!important}:host ::ng-deep th.grid-cell:hover .grid-cell-text:before{color:#000!important}:host ::ng-deep th.grid-cell .p-datatable-column-sorted .grid-cell-text:before,:host ::ng-deep th.grid-cell .grid-cell-text.p-datatable-column-sorted:before,:host ::ng-deep th.grid-cell[aria-sort] .grid-cell-text:before{color:#000!important}:host ::ng-deep th.grid-cell:hover{transition:background-color .2s ease!important}:host ::ng-deep .grid-cell-text .ng-star-inserted{margin-left:auto!important;margin-right:8px!important;transition:filter .2s ease!important}:host ::ng-deep .p-button-icon{display:none!important}:host ::ng-deep .filter-toolbar-top-container{display:none!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:none!important;visibility:hidden!important;opacity:0!important}:host ::ng-deep .grid-row-menu-button,:host ::ng-deep [alignfrozen=left]{padding:0 40px 0 0!important;text-align:center!important;vertical-align:middle!important}:host ::ng-deep .grid-row-menu-button button,:host ::ng-deep [alignfrozen=left] button{all:initial!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;display:inline-block!important;position:relative!important;cursor:pointer!important;margin:0 auto!important;border:none!important;background:none!important;padding:0!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDQgMTYiIGZpbGw9IiM5Y2EzYWYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiLz48Y2lyY2xlIGN4PSIyIiBjeT0iOCIgcj0iMiIvPjxjaXJjbGUgY3g9IjIiIGN5PSIxNCIgcj0iMiIvPjwvc3ZnPg==)!important;background-repeat:no-repeat!important;background-position:center!important;background-size:4px 16px!important;border-radius:6px!important}:host ::ng-deep .grid-row-menu-button button:hover,:host ::ng-deep [alignfrozen=left] button:hover{background-color:#4b5563!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDQgMTYiIGZpbGw9IiM5Y2EzYWYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiLz48Y2lyY2xlIGN4PSIyIiBjeT0iOCIgcj0iMiIvPjxjaXJjbGUgY3g9IjIiIGN5PSIxNCIgcj0iMiIvPjwvc3ZnPg==)!important}:host ::ng-deep .grid-row-menu-button button i,:host ::ng-deep [alignfrozen=left] button i,:host ::ng-deep .pi-ellipsis-v{display:none!important;width:0!important;height:0!important;font-size:0!important;visibility:hidden!important;opacity:0!important}.dark-theme-grid .p-datatable{justify-content:center;align-items:center}.dark-theme-grid .p-menu-list{background:#fff!important}.filter-container{position:relative;display:inline-block;border:2px solid #423D48;padding:3px;border-radius:20px}.filter-container:before{content:\"\";position:absolute;inset:1.5px;background:transparent;border-radius:20px;z-index:0;transition:all .2s ease}.filter-container .flex{position:relative;z-index:1}.filter-container button{position:relative;z-index:2;min-width:80px;all:unset;cursor:pointer;text-align:center;padding:.5rem 1rem;border-radius:16px;font-size:.875rem;font-weight:500;transition:all .2s ease}.filter-container button.selected-filter{background-color:#374151;color:#fff;border:1px solid #4b5563;box-shadow:0 1px 2px #0000001a}.filter-container button.unselected-filter{background-color:transparent;color:#d1d5db;border:1px solid transparent}.filter-container button.unselected-filter:hover{background-color:#4b556333;color:#fff}\n"] }]
+    }], () => [{ type: InvitationGridService }, { type: InvitationCodeService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(InvitationCodesComponent, { className: "InvitationCodesComponent", filePath: "lib/pages/invitation-codes/invitation-codes.component.ts", lineNumber: 17 }); })();
+
+const waitlistGridColumns = [
+    {
+        name: 'name',
+        label: 'Name',
+        visible: true,
+        sortable: true,
+        width: 200,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'email',
+        label: 'Email',
+        visible: true,
+        sortable: true,
+        width: 250,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'userType',
+        label: 'User Type',
+        visible: true,
+        sortable: true,
+        width: 150,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'priority',
+        label: 'Priority',
+        visible: true,
+        sortable: true,
+        width: 120,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'joined',
+        label: 'Joined',
+        visible: true,
+        sortable: true,
+        width: 120,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'waitTime',
+        label: 'Wait Time',
+        visible: true,
+        sortable: true,
+        width: 100,
+        controlType: 'Text',
+        editable: false
+    },
+    {
+        name: 'notes',
+        label: 'Notes',
+        visible: true,
+        sortable: false,
+        width: 200,
+        controlType: 'Text',
+        editable: false
+    }
+];
+
+function ConvertToInvitationDialogComponent_option_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 29);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const days_r1 = ctx.$implicit;
+    i0.ɵɵproperty("value", days_r1)("selected", days_r1 === 30);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" ", days_r1, " day", days_r1 > 1 ? "s" : "", " ");
+} }
+function ConvertToInvitationDialogComponent_span_65_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30)(1, "mat-icon", 31);
+    i0.ɵɵtext(2, "refresh");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Generating...");
+    i0.ɵɵelementEnd()();
+} }
+function ConvertToInvitationDialogComponent_span_66_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 30)(1, "mat-icon");
+    i0.ɵɵtext(2, "send");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate2("Generate ", ctx_r1.data.selectedCount, " Invitation", ctx_r1.data.selectedCount > 1 ? "s" : "");
+} }
+class ConvertToInvitationDialogComponent {
+    dialogRef;
+    data;
+    expiryDays = 30;
+    isConverting = false;
+    expiryOptions = [7, 14, 30, 60, 90];
+    accessLevel = 'basic';
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    onCancel() {
+        this.dialogRef.close(false);
+    }
+    onConvert() {
+        this.isConverting = true;
+        const result = {
+            expiryDays: this.expiryDays,
+            accessLevel: this.accessLevel,
+            selectedMemberIds: this.data.selectedMembers.map(m => m.id),
+            selectedMembers: this.data.selectedMembers,
+            totalInvitations: this.data.selectedCount
+        };
+        this.dialogRef.close(result);
+        this.isConverting = false;
+    }
+    static ɵfac = function ConvertToInvitationDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ConvertToInvitationDialogComponent)(i0.ɵɵdirectiveInject(i1$1.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ConvertToInvitationDialogComponent, selectors: [["app-convert-to-invitation-dialog"]], standalone: false, decls: 67, vars: 11, consts: [["mat-dialog-title", "", 1, "text-white", "!pb-2", "!text-xl", "font-semibold"], [1, "!pb-0", "!min-w-[500px]"], [1, "space-y-6"], [1, "text-md", "text-gray-300"], [1, "font-semibold", "text-white"], [1, "border-t", "border-gray-700"], [1, "mat-dialog-instructions"], [1, "text-md", "font-medium", "text-white", "mb-6"], [1, "bg-gray-800/30", "border", "border-gray-700", "rounded-lg", "p-4", "space-y-3"], [1, "dialog-instruction", "flex", "items-start"], [1, "bullet-point", "mr-3", "mt-2"], [1, "text-gray-300"], [1, "text-md", "font-medium", "text-white", "mb-2"], [1, "space-y-4"], [1, "w-full", "px-4", "py-3", "bg-gray-800", "border", "border-gray-700", "rounded-lg", "text-white", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-blue-500", "cursor-pointer", 3, "ngModelChange", "ngModel"], [3, "value", "selected", 4, "ngFor", "ngForOf"], [1, "flex", "items-start"], [1, "mat-dialog-message", "text-gray-300"], [1, "mb-6"], [1, "space-y-2"], [1, "flex", "items-center", "space-x-2", "cursor-pointer"], ["type", "radio", "value", "basic", 1, "text-blue-500", 3, "ngModelChange", "ngModel"], ["type", "radio", "value", "premium", 1, "text-blue-500", 3, "ngModelChange", "ngModel"], ["type", "radio", "value", "admin", 1, "text-blue-500", 3, "ngModelChange", "ngModel"], ["type", "radio", "value", "vip", 1, "text-blue-500", 3, "ngModelChange", "ngModel"], ["align", "end", 1, "!p-6", "!pt-4", "!border-t", "!border-gray-700"], ["mat-stroked-button", "", 1, "!border-gray-600", "!text-gray-300", "hover:!bg-gray-700", "hover:!border-gray-500", 3, "click"], ["mat-raised-button", "", "color", "primary", 1, "!bg-blue-600", "hover:!bg-blue-700", "disabled:!opacity-50", "disabled:!cursor-not-allowed", 3, "click", "disabled"], ["class", "flex items-center space-x-2", 4, "ngIf"], [3, "value", "selected"], [1, "flex", "items-center", "space-x-2"], [1, "animate-spin", "!text-lg"]], template: function ConvertToInvitationDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "h2", 0);
+            i0.ɵɵtext(1, "Convert to Invitation Code");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(2, "mat-dialog-content", 1)(3, "div", 2)(4, "div", 3);
+            i0.ɵɵtext(5, " Generate invitation codes for ");
+            i0.ɵɵelementStart(6, "span", 4);
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(8);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(9, "div", 5);
+            i0.ɵɵelementStart(10, "div", 6)(11, "h3", 7);
+            i0.ɵɵtext(12, "What happens next?");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(13, "div", 8)(14, "div", 9);
+            i0.ɵɵelement(15, "div", 10);
+            i0.ɵɵelementStart(16, "span", 11);
+            i0.ɵɵtext(17, "Invitation codes will be generated for each selected member");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(18, "div", 9);
+            i0.ɵɵelement(19, "div", 10);
+            i0.ɵɵelementStart(20, "span", 11);
+            i0.ɵɵtext(21, "Codes will be tied to their email addresses");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(22, "div", 9);
+            i0.ɵɵelement(23, "div", 10);
+            i0.ɵɵelementStart(24, "span", 11);
+            i0.ɵɵtext(25, "Members will be removed from the waitlist");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(26, "div", 9);
+            i0.ɵɵelement(27, "div", 10);
+            i0.ɵɵelementStart(28, "span", 11);
+            i0.ɵɵtext(29, "Codes bypass user type limits");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelement(30, "div", 5);
+            i0.ɵɵelementStart(31, "div")(32, "h3", 12);
+            i0.ɵɵtext(33, "Invitation Expiry Period");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(34, "div", 13)(35, "div")(36, "select", 14);
+            i0.ɵɵtwoWayListener("ngModelChange", function ConvertToInvitationDialogComponent_Template_select_ngModelChange_36_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.expiryDays, $event) || (ctx.expiryDays = $event); return $event; });
+            i0.ɵɵtemplate(37, ConvertToInvitationDialogComponent_option_37_Template, 2, 4, "option", 15);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(38, "div", 16)(39, "span", 17);
+            i0.ɵɵtext(40, "Code will expire if account is not created within this period");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(41, "div", 18)(42, "h3", 12);
+            i0.ɵɵtext(43, "Access Level");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(44, "div", 19)(45, "label", 20)(46, "input", 21);
+            i0.ɵɵtwoWayListener("ngModelChange", function ConvertToInvitationDialogComponent_Template_input_ngModelChange_46_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.accessLevel, $event) || (ctx.accessLevel = $event); return $event; });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(47, "span", 11);
+            i0.ɵɵtext(48, "Basic Access");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(49, "label", 20)(50, "input", 22);
+            i0.ɵɵtwoWayListener("ngModelChange", function ConvertToInvitationDialogComponent_Template_input_ngModelChange_50_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.accessLevel, $event) || (ctx.accessLevel = $event); return $event; });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(51, "span", 11);
+            i0.ɵɵtext(52, "Premium Access");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(53, "label", 20)(54, "input", 23);
+            i0.ɵɵtwoWayListener("ngModelChange", function ConvertToInvitationDialogComponent_Template_input_ngModelChange_54_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.accessLevel, $event) || (ctx.accessLevel = $event); return $event; });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(55, "span", 11);
+            i0.ɵɵtext(56, "Admin Access");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(57, "label", 20)(58, "input", 24);
+            i0.ɵɵtwoWayListener("ngModelChange", function ConvertToInvitationDialogComponent_Template_input_ngModelChange_58_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.accessLevel, $event) || (ctx.accessLevel = $event); return $event; });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(59, "span", 11);
+            i0.ɵɵtext(60, "VIP Access");
+            i0.ɵɵelementEnd()()()()()();
+            i0.ɵɵelementStart(61, "mat-dialog-actions", 25)(62, "button", 26);
+            i0.ɵɵlistener("click", function ConvertToInvitationDialogComponent_Template_button_click_62_listener() { return ctx.onCancel(); });
+            i0.ɵɵtext(63, " Cancel ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(64, "button", 27);
+            i0.ɵɵlistener("click", function ConvertToInvitationDialogComponent_Template_button_click_64_listener() { return ctx.onConvert(); });
+            i0.ɵɵtemplate(65, ConvertToInvitationDialogComponent_span_65_Template, 5, 0, "span", 28)(66, ConvertToInvitationDialogComponent_span_66_Template, 5, 2, "span", 28);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(7);
+            i0.ɵɵtextInterpolate(ctx.data.selectedCount);
+            i0.ɵɵadvance();
+            i0.ɵɵtextInterpolate1(" selected waitlist member", ctx.data.selectedCount > 1 ? "s" : "", " ");
+            i0.ɵɵadvance(28);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.expiryDays);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngForOf", ctx.expiryOptions);
+            i0.ɵɵadvance(9);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.accessLevel);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.accessLevel);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.accessLevel);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.accessLevel);
+            i0.ɵɵadvance(6);
+            i0.ɵɵproperty("disabled", ctx.isConverting);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isConverting);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isConverting);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i1$2.NgSelectOption, i1$2.ɵNgSelectMultipleOption, i1$2.DefaultValueAccessor, i1$2.SelectControlValueAccessor, i1$2.RadioControlValueAccessor, i1$2.NgControlStatus, i1$2.NgModel, i1$1.MatDialogTitle, i1$1.MatDialogActions, i1$1.MatDialogContent, i4$1.MatButton, i5.MatIcon], styles: ["[_nghost-%COMP%]   .mat-dialog-instructions[_ngcontent-%COMP%]{border:1px solid #423D48;padding:30px 20px;border-radius:10px;margin:22px 0}[_nghost-%COMP%]   .mat-mdc-dialog-container[_ngcontent-%COMP%]{background-color:#1f2937!important;border:1px solid #374151}[_nghost-%COMP%]   .mat-mdc-dialog-title[_ngcontent-%COMP%]{color:#fff!important;font-size:1.25rem!important;padding-bottom:.5rem!important}[_nghost-%COMP%]   .mat-mdc-dialog-content[_ngcontent-%COMP%]{color:#d1d5db!important}[_nghost-%COMP%]   .bullet-point[_ngcontent-%COMP%]{width:8px;height:8px;background-color:#fff;border-radius:50%;flex-shrink:0;margin-right:10px;position:relative;bottom:2px}[_nghost-%COMP%]   .dialog-instruction[_ngcontent-%COMP%]{margin-top:5px}[_nghost-%COMP%]   mat-icon.text-green-400[_ngcontent-%COMP%]{color:#34d399!important;font-size:20px!important;height:20px!important;width:20px!important}[_nghost-%COMP%]   mat-icon.text-yellow-400[_ngcontent-%COMP%]{color:#fbbf24!important;font-size:20px!important;height:20px!important;width:20px!important}[_nghost-%COMP%]   .mat-dialog-message[_ngcontent-%COMP%]{font-size:13px;margin-top:5px}[_nghost-%COMP%]   select[_ngcontent-%COMP%]{width:100%;height:40px}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConvertToInvitationDialogComponent, [{
+        type: Component,
+        args: [{ selector: 'app-convert-to-invitation-dialog', standalone: false, template: "<h2 mat-dialog-title class=\"text-white !pb-2 !text-xl font-semibold\">Convert to Invitation Code</h2>\r\n\r\n<mat-dialog-content class=\" !pb-0 !min-w-[500px]\">\r\n  <div class=\" space-y-6\">\r\n    <div class=\"text-md text-gray-300\">\r\n      Generate invitation codes for <span class=\"font-semibold text-white\">{{data.selectedCount}}</span> selected waitlist member{{data.selectedCount > 1 ? 's' : ''}}\r\n    </div>\r\n    <div class=\"border-t border-gray-700\"></div>\r\n    <div class=\"mat-dialog-instructions\">\r\n      <h3 class=\"text-md font-medium text-white mb-6\">What happens next?</h3>\r\n      <div class=\"bg-gray-800/30 border border-gray-700 rounded-lg p-4 space-y-3\">\r\n        <div class=\"dialog-instruction flex items-start\">\r\n          <div class=\"bullet-point mr-3 mt-2\"></div>\r\n          <span class=\"text-gray-300\">Invitation codes will be generated for each selected member</span>\r\n        </div>\r\n        <div class=\"dialog-instruction flex items-start\">\r\n          <div class=\"bullet-point mr-3 mt-2\"></div>\r\n          <span class=\"text-gray-300\">Codes will be tied to their email addresses</span>\r\n        </div>\r\n        <div class=\"dialog-instruction flex items-start\">\r\n          <div class=\"bullet-point mr-3 mt-2\"></div>\r\n          <span class=\"text-gray-300\">Members will be removed from the waitlist</span>\r\n        </div>\r\n        <div class=\"dialog-instruction flex items-start\">\r\n          <div class=\"bullet-point mr-3 mt-2\"></div>\r\n          <span class=\"text-gray-300\">Codes bypass user type limits</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"border-t border-gray-700\"></div>\r\n    <div>\r\n      <h3 class=\"text-md font-medium text-white mb-2\">Invitation Expiry Period</h3>\r\n      <div class=\"space-y-4\">\r\n        <div>\r\n          <select\r\n            [(ngModel)]=\"expiryDays\"\r\n            class=\"w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 cursor-pointer\">\r\n            <option *ngFor=\"let days of expiryOptions\" [value]=\"days\" [selected]=\"days === 30\">\r\n              {{days}} day{{days > 1 ? 's' : ''}}\r\n            </option>\r\n          </select>\r\n        </div>\r\n          <div class=\"flex items-start\">\r\n            <span class=\"mat-dialog-message text-gray-300\">Code will expire if account is not created within this period</span>\r\n          </div>\r\n\r\n      </div>\r\n    </div>\r\n<div class=\"mb-6\">\r\n  <h3 class=\"text-md font-medium text-white mb-2\">Access Level</h3>\r\n  <div class=\"space-y-2\">\r\n    <label class=\"flex items-center space-x-2 cursor-pointer\">\r\n      <input type=\"radio\" [(ngModel)]=\"accessLevel\" value=\"basic\" class=\"text-blue-500\">\r\n      <span class=\"text-gray-300\">Basic Access</span>\r\n    </label>\r\n    <label class=\"flex items-center space-x-2 cursor-pointer\">\r\n      <input type=\"radio\" [(ngModel)]=\"accessLevel\" value=\"premium\" class=\"text-blue-500\">\r\n      <span class=\"text-gray-300\">Premium Access</span>\r\n    </label>\r\n    <label class=\"flex items-center space-x-2 cursor-pointer\">\r\n      <input type=\"radio\" [(ngModel)]=\"accessLevel\" value=\"admin\" class=\"text-blue-500\">\r\n      <span class=\"text-gray-300\">Admin Access</span>\r\n    </label>\r\n    <label class=\"flex items-center space-x-2 cursor-pointer\">\r\n      <input type=\"radio\" [(ngModel)]=\"accessLevel\" value=\"vip\" class=\"text-blue-500\">\r\n      <span class=\"text-gray-300\">VIP Access</span>\r\n    </label>\r\n  </div>\r\n</div>\r\n  </div>\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions align=\"end\" class=\"!p-6 !pt-4 !border-t !border-gray-700\">\r\n  <button\r\n    mat-stroked-button\r\n    (click)=\"onCancel()\"\r\n    class=\"!border-gray-600 !text-gray-300 hover:!bg-gray-700 hover:!border-gray-500\">\r\n    Cancel\r\n  </button>\r\n  <button\r\n    mat-raised-button\r\n    color=\"primary\"\r\n    (click)=\"onConvert()\"\r\n    [disabled]=\"isConverting\"\r\n    class=\"!bg-blue-600 hover:!bg-blue-700 disabled:!opacity-50 disabled:!cursor-not-allowed\">\r\n    <span *ngIf=\"isConverting\" class=\"flex items-center space-x-2\">\r\n      <mat-icon class=\"animate-spin !text-lg\">refresh</mat-icon>\r\n      <span>Generating...</span>\r\n    </span>\r\n    <span *ngIf=\"!isConverting\" class=\"flex items-center space-x-2\">\r\n      <mat-icon>send</mat-icon>\r\n      <span>Generate {{data.selectedCount}} Invitation{{data.selectedCount > 1 ? 's' : ''}}</span>\r\n    </span>\r\n  </button>\r\n</mat-dialog-actions>\r\n", styles: [":host .mat-dialog-instructions{border:1px solid #423D48;padding:30px 20px;border-radius:10px;margin:22px 0}:host .mat-mdc-dialog-container{background-color:#1f2937!important;border:1px solid #374151}:host .mat-mdc-dialog-title{color:#fff!important;font-size:1.25rem!important;padding-bottom:.5rem!important}:host .mat-mdc-dialog-content{color:#d1d5db!important}:host .bullet-point{width:8px;height:8px;background-color:#fff;border-radius:50%;flex-shrink:0;margin-right:10px;position:relative;bottom:2px}:host .dialog-instruction{margin-top:5px}:host mat-icon.text-green-400{color:#34d399!important;font-size:20px!important;height:20px!important;width:20px!important}:host mat-icon.text-yellow-400{color:#fbbf24!important;font-size:20px!important;height:20px!important;width:20px!important}:host .mat-dialog-message{font-size:13px;margin-top:5px}:host select{width:100%;height:40px}\n"] }]
+    }], () => [{ type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                type: Inject,
+                args: [MAT_DIALOG_DATA]
+            }] }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ConvertToInvitationDialogComponent, { className: "ConvertToInvitationDialogComponent", filePath: "lib/components/modal/convert-to-invitation-dialog/convert-to-invitation-dialog.component.ts", lineNumber: 16 }); })();
+
+class WaitlistCodeService {
+    http;
+    config;
+    apiUrlBuilder;
+    constructor(http, config) {
+        this.http = http;
+        this.config = config;
+        this.apiUrlBuilder = new ApiUrlBuilder(config);
+    }
+    getWaitlistStats() {
+        return this.http.get(this.apiUrlBuilder.buildUrl('waitlisted-users/stats')).pipe(map(stats => {
+            if (!stats.success) {
+                return this.getDefaultStats();
+            }
+            const totalStats = stats.total || stats;
+            return [
+                {
+                    title: 'Waitlisted',
+                    value: totalStats.waitlisted || 0,
+                    description: 'Members waiting for access',
+                    icon: 'schedule',
+                    color: 'bg-yellow-500'
+                },
+                {
+                    title: 'Invited',
+                    value: totalStats.invited || 0,
+                    description: 'Invitations sent',
+                    icon: 'send',
+                    color: 'bg-blue-500'
+                },
+                {
+                    title: 'Active Users',
+                    value: totalStats.currentUsers || 0,
+                    description: 'Currently active users',
+                    icon: 'people',
+                    color: 'bg-green-500'
+                },
+                {
+                    title: 'User Limit',
+                    value: totalStats.userLimit || 0,
+                    description: 'Maximum allowed users',
+                    icon: 'security',
+                    color: 'bg-purple-500'
+                }
+            ];
+        }));
+    }
+    getDefaultStats() {
+        return [
+            {
+                title: 'Waitlisted',
+                value: 0,
+                description: 'Members waiting for access',
+                icon: 'schedule',
+                color: 'bg-yellow-500'
+            },
+            {
+                title: 'Invited',
+                value: 0,
+                description: 'Invitations sent',
+                icon: 'send',
+                color: 'bg-blue-500'
+            },
+            {
+                title: 'Active Users',
+                value: 0,
+                description: 'Currently active users',
+                icon: 'people',
+                color: 'bg-green-500'
+            }
+        ];
+    }
+    updatePriority(memberId, priority) {
+        return this.http.put(this.apiUrlBuilder.buildUrl(`waitlisted-users/${memberId}/invite`), {});
+    }
+    removeFromWaitlist(memberId) {
+        return this.http.delete(this.apiUrlBuilder.buildUrl(`waitlisted-users/${memberId}`));
+    }
+    restoreToWaitlist(memberId) {
+        return new Observable();
+    }
+    updateStatus(memberId, status) {
+        return this.http.post(this.apiUrlBuilder.buildUrl(`waitlisted-users/${memberId}/invite`), {
+            accessLevel: 'basic'
+        });
+    }
+    static ɵfac = function WaitlistCodeService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WaitlistCodeService)(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(INVITATION_CODE_CONFIG)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: WaitlistCodeService, factory: WaitlistCodeService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WaitlistCodeService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                type: Inject,
+                args: [INVITATION_CODE_CONFIG]
+            }] }], null); })();
+
+class WaitlistGridService {
+    invitationCodeService;
+    waitlistCodeService;
+    http;
+    config;
+    refreshGrid$ = new BehaviorSubject(undefined);
+    destroy$ = new Subject();
+    apiUrlBuilder;
+    constructor(invitationCodeService, waitlistCodeService, http, config) {
+        this.invitationCodeService = invitationCodeService;
+        this.waitlistCodeService = waitlistCodeService;
+        this.http = http;
+        this.config = config;
+        this.apiUrlBuilder = new ApiUrlBuilder(config);
+    }
+    get refreshTrigger$() {
+        return this.refreshGrid$.asObservable();
+    }
+    triggerRefresh() {
+        this.refreshGrid$.next();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    getWaitlistMembers(event) {
+        const page = Math.floor(event.from / event.size) + 1;
+        const limit = event.size;
+        return this.invitationCodeService.getWaitlistMembers(page, limit, event.userFilters, event.sortField, event.sortDirection === 'Ascending' ? 'asc' : 'desc', event.searchString).pipe(map(response => {
+            const gridRows = response.data.map(item => {
+                const gridItem = {
+                    id: item.id,
+                    name: item.name,
+                    email: item.email,
+                    userType: item.userType,
+                    priority: item.priority,
+                    joined: item.joined,
+                    waitTime: item.waitTime,
+                    notes: item.notes,
+                    status: item.status,
+                    convertedAt: item.convertedAt,
+                    convertedToCodeId: item.convertedToCodeId
+                };
+                return {
+                    id: item.id,
+                    data: gridItem,
+                    rowMenuItems: this.createActionMenu(gridItem),
+                    hasEditPermissions: true,
+                    hasDeletePermissions: true,
+                    displayValues: this.createDisplayValues(gridItem)
+                };
+            });
+            return { data: gridRows, count: response.count };
+        }));
+    }
+    createDisplayValues(item) {
+        return {
+            name: item.name,
+            email: item.email,
+            userType: this.getUserTypeDisplay(item.userType),
+            priority: this.getPriorityDisplay(item.priority),
+            joined: this.formatDate(item.joined),
+            waitTime: `${item.waitTime} days`,
+            notes: item.notes,
+            status: this.getStatusDisplay(item.status || 'pending'),
+            id: item.id
+        };
+    }
+    formatDate(date) {
+        if (!date)
+            return 'N/A';
+        const d = new Date(date);
+        return isNaN(d.getTime()) ? 'Invalid Date' : d.toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    }
+    getUserTypeDisplay(userType) {
+        const userTypeMap = {
+            'premium': 'Premium Member',
+            'standard': 'Standard Member',
+            'vip': 'VIP Member'
+        };
+        return userTypeMap[userType] || userType;
+    }
+    getPriorityDisplay(priority) {
+        const priorityMap = {
+            'high': 'High Priority',
+            'normal': 'Normal'
+        };
+        return priorityMap[priority] || priority;
+    }
+    getStatusDisplay(status) {
+        const statusMap = {
+            'pending': 'Pending',
+            'converted': 'Converted',
+            'removed': 'Removed',
+            'invited': 'Invited'
+        };
+        return statusMap[status] || status || 'Pending';
+    }
+    createActionMenu(item) {
+        const menuItems = [
+            {
+                label: 'Action',
+                disabled: true,
+                styleClass: 'menu-header'
+            },
+            {
+                separator: true
+            }
+        ];
+        if (item.status === 'pending' || item.status === 'waitlisted') {
+            menuItems.push({
+                label: 'Send Invitation',
+                icon: 'pi pi-send',
+                command: () => this.sendInvitation(item)
+            });
+            menuItems.push({
+                label: 'Remove from Waitlist',
+                icon: 'pi pi-trash',
+                command: () => this.removeFromWaitlist(item)
+            });
+        }
+        else if (item.status === 'invited' || item.status === 'waitlist_invited') {
+            menuItems.push({
+                label: 'View Invitation',
+                icon: 'pi pi-eye',
+                command: () => this.viewInvitation(item)
+            });
+            menuItems.push({
+                label: 'Remove Invitation',
+                icon: 'pi pi-times',
+                command: () => this.removeFromWaitlist(item)
+            });
+        }
+        else if (item.status === 'converted') {
+            menuItems.push({
+                label: 'View Invitation Code',
+                icon: 'pi pi-eye',
+                command: () => this.viewInvitation(item)
+            });
+        }
+        return menuItems;
+    }
+    sendInvitation(item) {
+        if (confirm(`Send invitation to "${item.name}"?`)) {
+            this.http.post(this.apiUrlBuilder.buildUrl(`waitlisted-users/${item.id}/invite`), {
+                accessLevel: 'basic',
+                expiryDays: 30
+            }).subscribe({
+                next: (response) => {
+                    if (response.success) {
+                        alert(`Invitation sent to "${item.name}"!`);
+                        this.triggerRefresh();
+                    }
+                    else {
+                        alert(`Failed to send invitation: ${response.error || 'Unknown error'}`);
+                    }
+                },
+                error: (error) => {
+                    alert(`Failed to send invitation: ${error.message}`);
+                }
+            });
+        }
+    }
+    updatePriority(item) {
+        const newPriority = item.priority === 'high' ? 'normal' : 'high';
+        if (confirm(`Are you sure you want to change priority of "${item.name}" to ${newPriority}?`)) {
+            this.waitlistCodeService.updatePriority(item.id, newPriority).subscribe({
+                next: () => {
+                    alert(`Priority for "${item.name}" has been updated to ${newPriority}!`);
+                    this.triggerRefresh();
+                },
+                error: (error) => {
+                    alert(`Failed to update priority: ${error.message}`);
+                }
+            });
+        }
+    }
+    removeFromWaitlist(item) {
+        if (confirm(`Are you sure you want to remove "${item.name}" from the waitlist?`)) {
+            this.waitlistCodeService.removeFromWaitlist(item.id).subscribe({
+                next: () => {
+                    alert(`"${item.name}" has been removed from the waitlist!`);
+                    this.triggerRefresh();
+                },
+                error: (error) => {
+                    alert(`Failed to remove from waitlist: ${error.message}`);
+                }
+            });
+        }
+    }
+    restoreToWaitlist(item) {
+        if (confirm(`Are you sure you want to restore "${item.name}" to the waitlist?`)) {
+            this.waitlistCodeService.restoreToWaitlist(item.id).subscribe({
+                next: () => {
+                    alert(`"${item.name}" has been restored to the waitlist!`);
+                    this.triggerRefresh();
+                },
+                error: (error) => {
+                    alert(`Failed to restore: ${error.message}`);
+                }
+            });
+        }
+    }
+    viewInvitation(item) {
+        if (item.convertedToCodeId) {
+            this.http.get(this.apiUrlBuilder.buildUrl(`invitation-codes/${item.convertedToCodeId}`)).subscribe({
+                next: (invitation) => {
+                    alert(`Invitation Details:\n\n` +
+                        `Code: ${invitation.code}\n` +
+                        `Status: ${invitation.status}\n` +
+                        `User Type: ${invitation.userType}\n` +
+                        `Access Level: ${invitation.accessLevel}\n` +
+                        `Expires: ${new Date(invitation.expires).toLocaleDateString()}\n` +
+                        `Created: ${new Date(invitation.createdAt).toLocaleDateString()}`);
+                },
+                error: () => {
+                    alert(`This member was converted to invitation code: ${item.convertedToCodeId}\nYou can view it in the invitation codes grid.`);
+                }
+            });
+        }
+        else if (item.status === 'invited' || item.status === 'waitlist_invited') {
+            this.http.get(this.apiUrlBuilder.buildUrl(`waitlisted-users/${item.id}`)).subscribe({
+                next: (userDetails) => {
+                    if (userDetails.data?.invitationCode) {
+                        alert(`Invitation Code: ${userDetails.data.invitationCode}\n` +
+                            `Status: Invited\n` +
+                            `Invited On: ${new Date(userDetails.data.waitlistInvitedAt).toLocaleDateString()}\n` +
+                            `Expires: ${new Date(userDetails.data.waitlistInvitationExpiry).toLocaleDateString()}`);
+                    }
+                    else {
+                        alert('No invitation code found for this member.');
+                    }
+                },
+                error: () => {
+                    alert('No invitation code found for this member.');
+                }
+            });
+        }
+        else {
+            alert('No invitation code found for this member.');
+        }
+    }
+    bulkConvertToInvitations(data) {
+        return this.invitationCodeService.bulkGenerateFromWaitlist(data).pipe(map(response => {
+            this.triggerRefresh();
+            return response;
+        }));
+    }
+    static ɵfac = function WaitlistGridService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WaitlistGridService)(i0.ɵɵinject(InvitationCodeService), i0.ɵɵinject(WaitlistCodeService), i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(INVITATION_CODE_CONFIG)); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: WaitlistGridService, factory: WaitlistGridService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WaitlistGridService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], () => [{ type: InvitationCodeService }, { type: WaitlistCodeService }, { type: i1.HttpClient }, { type: undefined, decorators: [{
+                type: Inject,
+                args: [INVITATION_CODE_CONFIG]
+            }] }], null); })();
+
+function WaitlistComponent_div_11_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "button", 16);
+    i0.ɵɵlistener("click", function WaitlistComponent_div_11_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openConvertModal()); });
+    i0.ɵɵelementStart(2, "mat-icon", 17);
+    i0.ɵɵtext(3, "send");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" Convert ", ctx_r1.checkedRows.size, " to Invite ");
+} }
+function WaitlistComponent_button_15_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 18);
+    i0.ɵɵlistener("click", function WaitlistComponent_button_15_Template_button_click_0_listener() { const filter_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setFilter(filter_r4)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const filter_r4 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(ctx_r1.activeFilter === filter_r4 ? "selected-filter px-4 py-2 text-sm font-medium transition-colors" : "unselected-filter px-4 py-2 text-sm font-medium transition-colors");
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getFilterDisplayName(filter_r4), " ");
+} }
+class WaitlistComponent {
+    waitlistGridService;
+    cdr;
+    dialog;
+    gridData = [];
+    columns = [];
+    isConverting = false;
+    isLoading = false;
+    totalRecords = 0;
+    rowsPerPage = 10;
+    rowsPerPageOptions = [5, 10, 25, 50];
+    sortField = 'joined';
+    sortOrder = 'Descending';
+    checkedRows = new Set();
+    activeFilter = 'all';
+    filters = ['all', 'high', 'standard', 'premium', 'vip'];
+    checkboxHtmlCache = new Map();
+    destroy$ = new Subject();
+    constructor(waitlistGridService, cdr, dialog) {
+        this.waitlistGridService = waitlistGridService;
+        this.cdr = cdr;
+        this.dialog = dialog;
+    }
+    ngOnInit() {
+        this.initializeColumns();
+        this.loadGridData();
+        this.subscribeToAutoRefresh();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    subscribeToAutoRefresh() {
+        this.waitlistGridService.refreshTrigger$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.loadGridData();
+        });
+    }
+    initializeColumns() {
+        const checkboxColumn = {
+            name: 'checkbox',
+            label: '',
+            visible: true,
+            sortable: false,
+            width: 60,
+            controlType: 'Text',
+            editable: false
+        };
+        this.columns = [...waitlistGridColumns, checkboxColumn];
+    }
+    createCheckboxHtml(memberId) {
+        const cacheKey = `${memberId}-${this.checkedRows.has(memberId)}`;
+        if (this.checkboxHtmlCache.has(cacheKey)) {
+            return this.checkboxHtmlCache.get(cacheKey);
+        }
+        const isChecked = this.checkedRows.has(memberId);
+        const checkboxHtml = isChecked ? this.createCheckedHtml(memberId) : this.createUncheckedHtml(memberId);
+        this.checkboxHtmlCache.set(cacheKey, checkboxHtml);
+        return checkboxHtml;
+    }
+    createCheckedHtml(memberId) {
+        return `
+      <div class="custom-grid-checkbox checked"
+           data-member-id="${memberId}"
+           style="
+             width: 20px;
+             height: 20px;
+             border: 2px solid #3b82f6;
+             border-radius: 4px;
+             background: #3b82f6;
+             cursor: pointer;
+             position: relative;
+             display: inline-block;
+             margin: 0 auto;
+           ">
+        <span style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 12px; font-weight: bold;">✓</span>
+      </div>
+    `;
+    }
+    createUncheckedHtml(memberId) {
+        return `
+      <div class="custom-grid-checkbox"
+           data-member-id="${memberId}"
+           style="
+             width: 20px;
+             height: 20px;
+             border: 2px solid #9ca3af;
+             border-radius: 4px;
+             background: transparent;
+             cursor: pointer;
+             position: relative;
+             display: inline-block;
+             margin: 0 auto;
+           "></div>
+    `;
+    }
+    clearCheckboxCache() {
+        this.checkboxHtmlCache.clear();
+    }
+    enhanceGridData(data) {
+        return data.map((row) => {
+            const enhancedData = {
+                ...row.data,
+                checkbox: this.createCheckboxHtml(row.data.id)
+            };
+            return {
+                ...row,
+                data: enhancedData
+            };
+        });
+    }
+    onCellClicked(event) {
+        if (event.colName === 'checkbox' && event.data?.id) {
+            const memberId = event.data.id;
+            this.toggleCheckbox(memberId);
+        }
+    }
+    toggleCheckbox(memberId) {
+        const wasChecked = this.checkedRows.has(memberId);
+        if (wasChecked) {
+            this.checkedRows.delete(memberId);
+        }
+        else {
+            this.checkedRows.add(memberId);
+        }
+        this.checkboxHtmlCache.delete(`${memberId}-${wasChecked}`);
+        this.checkboxHtmlCache.delete(`${memberId}-${!wasChecked}`);
+        this.updateSingleRow(memberId);
+    }
+    updateSingleRow(memberId) {
+        const rowIndex = this.gridData.findIndex(row => row.data.id === memberId);
+        if (rowIndex !== -1) {
+            const newCheckboxHtml = this.createCheckboxHtml(memberId);
+            const updatedGridData = [...this.gridData];
+            updatedGridData[rowIndex] = {
+                ...updatedGridData[rowIndex],
+                data: {
+                    ...updatedGridData[rowIndex].data,
+                    checkbox: newCheckboxHtml
+                }
+            };
+            this.gridData = updatedGridData;
+            this.cdr.markForCheck();
+        }
+    }
+    updateGridData() {
+        this.clearCheckboxCache();
+        const newGridData = this.gridData.map((row) => {
+            const enhancedData = {
+                ...row.data,
+                checkbox: this.createCheckboxHtml(row.data.id)
+            };
+            return {
+                ...row,
+                data: enhancedData
+            };
+        });
+        this.gridData = [...newGridData];
+        this.cdr.markForCheck();
+    }
+    loadGridData() {
+        const request = {
+            from: 0,
+            size: this.rowsPerPage,
+            sortField: this.sortField,
+            sortDirection: this.sortOrder,
+            searchString: ''
+        };
+        this.isLoading = true;
+        this.waitlistGridService.getWaitlistMembers(request)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (response) => {
+                this.clearCheckboxCache();
+                this.gridData = this.enhanceGridData(response.data);
+                this.totalRecords = response.count;
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    onLazyLoad(event) {
+        this.isLoading = true;
+        this.waitlistGridService.getWaitlistMembers(event)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (response) => {
+                this.clearCheckboxCache();
+                this.gridData = this.enhanceGridData(response.data);
+                this.totalRecords = response.count;
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    setFilter(filter) {
+        this.activeFilter = filter;
+        this.applyFilter();
+    }
+    applyFilter() {
+        const request = {
+            from: 0,
+            size: this.rowsPerPage,
+            sortField: this.sortField,
+            sortDirection: this.sortOrder,
+            searchString: '',
+            userFilters: this.getUserFilters()
+        };
+        this.isLoading = true;
+        this.waitlistGridService.getWaitlistMembers(request)
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: (response) => {
+                this.clearCheckboxCache();
+                this.gridData = this.enhanceGridData(response.data);
+                this.totalRecords = response.count;
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            },
+            error: (error) => {
+                this.isLoading = false;
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    getUserFilters() {
+        switch (this.activeFilter) {
+            case 'high': return [{ publicFieldName: 'priority', operatorType: 'Equals', values: ['high'] }];
+            case 'standard': return [{ publicFieldName: 'userType', operatorType: 'Equals', values: ['standard'] }];
+            case 'premium': return [{ publicFieldName: 'userType', operatorType: 'Equals', values: ['premium'] }];
+            case 'vip': return [{ publicFieldName: 'userType', operatorType: 'Equals', values: ['vip'] }];
+            default: return [];
+        }
+    }
+    getFilterDisplayName(filter) {
+        const names = { 'all': 'All Members', 'high': 'High Priority', 'standard': 'Standard', 'premium': 'Premium', 'vip': 'VIP' };
+        return names[filter];
+    }
+    selectAll() {
+        this.clearCheckboxCache();
+        this.gridData.forEach(row => this.checkedRows.add(row.data.id));
+        this.updateGridData();
+    }
+    clearAll() {
+        this.clearCheckboxCache();
+        this.checkedRows.clear();
+        this.updateGridData();
+    }
+    openConvertModal() {
+        if (this.checkedRows.size === 0) {
+            return;
+        }
+        const selectedMembers = this.getSelectedMembers();
+        const dialogRef = this.dialog.open(ConvertToInvitationDialogComponent, {
+            width: 'auto',
+            maxWidth: '500px',
+            maxHeight: '85vh',
+            panelClass: 'convert-to-invitation-dialog',
+            autoFocus: false,
+            disableClose: true,
+            data: {
+                selectedMembers: selectedMembers,
+                selectedCount: this.checkedRows.size
+            }
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result) {
+                this.convertToInvitations(result);
+            }
+        });
+    }
+    convertToInvitations(data) {
+        const conversionData = {
+            waitlistMemberIds: data.selectedMemberIds,
+            expiryDays: data.expiryDays,
+            accessLevel: data.accessLevel || 'basic'
+        };
+        this.isConverting = true;
+        this.waitlistGridService.bulkConvertToInvitations(conversionData).subscribe({
+            next: (response) => {
+                this.checkedRows.clear();
+                this.clearCheckboxCache();
+                this.isConverting = false;
+            },
+            error: (error) => {
+                this.isConverting = false;
+            }
+        });
+    }
+    getSelectedMembers() {
+        return this.gridData
+            .filter(row => this.checkedRows.has(row.data.id))
+            .map(row => {
+            const { checkbox, ...memberData } = row.data;
+            return memberData;
+        });
+    }
+    static ɵfac = function WaitlistComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WaitlistComponent)(i0.ɵɵdirectiveInject(WaitlistGridService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.MatDialog)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WaitlistComponent, selectors: [["app-waitlist"]], standalone: false, decls: 18, vars: 18, consts: [[1, "waitlist-page", "min-h-screen"], [1, "waitlist-container"], [1, "main-grid-section", "p-6"], [1, "code-management-header", "mb-6", "p-3"], [1, "flex", "flex-col", "lg:flex-row", "lg:items-center", "lg:justify-between"], [1, "mb-4", "lg:mb-0"], [1, "text-xl", "font-semibold", "text-white", "mb-2"], [1, "text-gray-400", "text-sm"], ["class", "flex space-x-2", 4, "ngIf"], [1, "filter-tabs", "mb-6"], [1, "filter-container", "p-1.5", "bg-gray-800", "border", "border-gray-700", "rounded-xl", "w-fit"], [1, "flex", "space-x-0.5"], [3, "class", "click", 4, "ngFor", "ngForOf"], [1, "grid-placeholder", "bg-gray-800", "rounded-lg", "border", "border-gray-700"], [1, "dark-theme-grid", "w-full", 3, "lazyLoad", "cellClicked", "data", "columns", "isLoading", "totalRecords", "rowsPerPage", "rowsPerPageOptions", "sortField", "sortOrder", "enableSelection", "enableCreate", "enableRefresh", "enableTrash", "enableGridFilters", "hideToolbar", "hideSettings", "hideRowMenu"], [1, "flex", "space-x-2"], ["mat-raised-button", "", "color", "primary", 1, "!bg-blue-600", "hover:!bg-blue-700", "flex", "items-center", "gap-2", 3, "click"], [1, "!text-lg"], [3, "click"]], template: function WaitlistComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵelement(2, "app-waitlist-stats-overview");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "div", 2)(4, "div", 3)(5, "div", 4)(6, "div", 5)(7, "h3", 6);
+            i0.ɵɵtext(8, "Waitlist Members");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "p", 7);
+            i0.ɵɵtext(10, " Manage waitlist and convert members to invitation codes ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(11, WaitlistComponent_div_11_Template, 5, 1, "div", 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(12, "div", 9)(13, "div", 10)(14, "div", 11);
+            i0.ɵɵtemplate(15, WaitlistComponent_button_15_Template, 2, 3, "button", 12);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(16, "div", 13)(17, "lib-grid", 14);
+            i0.ɵɵlistener("lazyLoad", function WaitlistComponent_Template_lib_grid_lazyLoad_17_listener($event) { return ctx.onLazyLoad($event); })("cellClicked", function WaitlistComponent_Template_lib_grid_cellClicked_17_listener($event) { return ctx.onCellClicked($event); });
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(11);
+            i0.ɵɵproperty("ngIf", ctx.checkedRows.size > 0);
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngForOf", ctx.filters);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("data", ctx.gridData)("columns", ctx.columns)("isLoading", ctx.isLoading)("totalRecords", ctx.totalRecords)("rowsPerPage", ctx.rowsPerPage)("rowsPerPageOptions", ctx.rowsPerPageOptions)("sortField", ctx.sortField)("sortOrder", ctx.sortOrder)("enableSelection", false)("enableCreate", false)("enableRefresh", false)("enableTrash", false)("enableGridFilters", false)("hideToolbar", true)("hideSettings", true)("hideRowMenu", false);
+        } }, styles: [".main-grid-section[_ngcontent-%COMP%]{border:2px solid #423D48;border-radius:10px;margin-top:35px;background:#29252d}[_nghost-%COMP%]     lib-grid.dark-theme-grid .grid-cell-text{position:relative!important;min-height:48px!important;display:flex!important;align-items:center!important;transition:all .2s ease!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell:nth-of-type(2) .grid-cell-text:before{content:\"Name\"!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell:nth-of-type(3) .grid-cell-text:before{content:\"Email\"!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell:nth-of-type(4) .grid-cell-text:before{content:\"User Type\"!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell:nth-of-type(5) .grid-cell-text:before{content:\"Priority\"!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell:nth-of-type(6) .grid-cell-text:before{content:\"Joined\"!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell:nth-of-type(7) .grid-cell-text:before{content:\"Wait Time\"!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell:nth-of-type(8) .grid-cell-text:before{content:\"Notes\"!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .grid-cell-text:before{color:#fff!important;font-weight:400!important;font-size:14px!important;font-family:Roboto,sans-serif!important;z-index:10!important;transition:color .2s ease!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .p-button-icon{display:none!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell:hover .grid-cell-text:before{color:#000!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell .p-datatable-column-sorted .grid-cell-text:before, [_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell .grid-cell-text.p-datatable-column-sorted:before, [_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell[aria-sort] .grid-cell-text:before{color:#000!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid th.grid-cell:hover{transition:background-color .2s ease!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .grid-cell-text .ng-star-inserted{margin-left:auto!important;margin-right:8px!important;transition:filter .2s ease!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .filter-toolbar-top-container{display:none!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:none!important;visibility:hidden!important;opacity:0!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid td[alignfrozen=left]:empty{display:none!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .p-datatable-wrapper{overflow-x:auto!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .checkbox-header{background:#374151!important;border-left:1px solid #423D48!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .checkbox-cell{border-left:1px solid #423D48!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .checkbox-cell .custom-grid-checkbox:hover{border-color:#6b7280!important;background-color:#6b72801a!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .checkbox-cell .custom-grid-checkbox.checked:hover{background-color:#2563eb!important;border-color:#2563eb!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .grid-row-menu-button, [_nghost-%COMP%]     lib-grid.dark-theme-grid [alignfrozen=left]{padding:0 40px 0 0!important;text-align:center!important;vertical-align:middle!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .grid-row-menu-button button, [_nghost-%COMP%]     lib-grid.dark-theme-grid [alignfrozen=left] button{all:initial!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;display:inline-block!important;position:relative!important;cursor:pointer!important;margin:0 auto!important;border:none!important;background:none!important;padding:0!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDQgMTYiIGZpbGw9IiM5Y2EzYWYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiLz48Y2lyY2xlIGN4PSIyIiBjeT0iOCIgcj0iMiIvPjxjaXJjbGUgY3g9IjIiIGN5PSIxNCIgcj0iMiIvPjwvc3ZnPg==)!important;background-repeat:no-repeat!important;background-position:center!important;background-size:4px 16px!important;border-radius:6px!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .grid-row-menu-button button:hover, [_nghost-%COMP%]     lib-grid.dark-theme-grid [alignfrozen=left] button:hover{background-color:#4b5563!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDQgMTYiIGZpbGw9IiM5Y2EzYWYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiLz48Y2lyY2xlIGN4PSIyIiBjeT0iOCIgcj0iMiIvPjxjaXJjbGUgY3g9IjIiIGN5PSIxNCIgcj0iMiIvPjwvc3ZnPg==)!important}[_nghost-%COMP%]     lib-grid.dark-theme-grid .grid-row-menu-button button i, [_nghost-%COMP%]     lib-grid.dark-theme-grid [alignfrozen=left] button i, [_nghost-%COMP%]     lib-grid.dark-theme-grid .pi-ellipsis-v{display:none!important;width:0!important;height:0!important;font-size:0!important;visibility:hidden!important;opacity:0!important}[_nghost-%COMP%]     .dark-theme-grid .p-datatable{justify-content:center;align-items:center}[_nghost-%COMP%]     .dark-theme-grid .p-menu-list{background:#fff!important}.filter-container[_ngcontent-%COMP%]{position:relative;display:inline-block;border:2px solid #423D48;padding:3px;border-radius:20px}.filter-container[_ngcontent-%COMP%]:before{content:\"\";position:absolute;inset:1.5px;background:transparent;border-radius:20px;z-index:0;transition:all .2s ease}.filter-container[_ngcontent-%COMP%]   .flex[_ngcontent-%COMP%]{position:relative;z-index:1}.filter-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{position:relative;z-index:2;min-width:80px;all:unset;cursor:pointer;text-align:center;padding:.5rem 1rem;border-radius:16px;font-size:.875rem;font-weight:500;transition:all .2s ease}.filter-container[_ngcontent-%COMP%]   button.selected-filter[_ngcontent-%COMP%]{background-color:#374151;color:#fff;border:1px solid #4b5563;box-shadow:0 1px 2px #0000001a}.filter-container[_ngcontent-%COMP%]   button.unselected-filter[_ngcontent-%COMP%]{background-color:transparent;color:#d1d5db;border:1px solid transparent}.filter-container[_ngcontent-%COMP%]   button.unselected-filter[_ngcontent-%COMP%]:hover{background-color:#4b556333;color:#fff}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WaitlistComponent, [{
+        type: Component,
+        args: [{ selector: 'app-waitlist', standalone: false, template: "<div class=\"waitlist-page min-h-screen\">\r\n  <div class=\"waitlist-container\">\r\n    <app-waitlist-stats-overview></app-waitlist-stats-overview>\r\n  </div>\r\n\r\n  <div class=\"main-grid-section p-6\">\r\n    <!-- Header Section -->\r\n    <div class=\"code-management-header mb-6 p-3\">\r\n      <div class=\"flex flex-col lg:flex-row lg:items-center lg:justify-between\">\r\n        <div class=\"mb-4 lg:mb-0\">\r\n          <h3 class=\"text-xl font-semibold text-white mb-2\">Waitlist Members</h3>\r\n          <p class=\"text-gray-400 text-sm\">\r\n            Manage waitlist and convert members to invitation codes\r\n          </p>\r\n        </div>\r\n        <div class=\"flex space-x-2\" *ngIf=\"checkedRows.size > 0\">\r\n          <button\r\n            mat-raised-button\r\n            color=\"primary\"\r\n            (click)=\"openConvertModal()\"\r\n            class=\"!bg-blue-600 hover:!bg-blue-700 flex items-center gap-2\">\r\n            <mat-icon class=\"!text-lg\">send</mat-icon>\r\n            Convert {{checkedRows.size}} to Invite\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Filter Tabs -->\r\n    <div class=\"filter-tabs mb-6\">\r\n      <div class=\"filter-container p-1.5 bg-gray-800 border border-gray-700 rounded-xl w-fit\">\r\n        <div class=\"flex space-x-0.5\">\r\n          <button\r\n            *ngFor=\"let filter of filters\"\r\n            (click)=\"setFilter(filter)\"\r\n            [class]=\"activeFilter === filter\r\n              ? 'selected-filter px-4 py-2 text-sm font-medium transition-colors'\r\n              : 'unselected-filter px-4 py-2 text-sm font-medium transition-colors'\">\r\n            {{ getFilterDisplayName(filter) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Grid Section with click handler -->\r\n    <div class=\"grid-placeholder bg-gray-800 rounded-lg border border-gray-700\">\r\n      <lib-grid\r\n        [data]=\"gridData\"\r\n        [columns]=\"columns\"\r\n        [isLoading]=\"isLoading\"\r\n        [totalRecords]=\"totalRecords\"\r\n        [rowsPerPage]=\"rowsPerPage\"\r\n        [rowsPerPageOptions]=\"rowsPerPageOptions\"\r\n        [sortField]=\"sortField\"\r\n        [sortOrder]=\"sortOrder\"\r\n        [enableSelection]=\"false\"\r\n        [enableCreate]=\"false\"\r\n        [enableRefresh]=\"false\"\r\n        [enableTrash]=\"false\"\r\n        [enableGridFilters]=\"false\"\r\n        [hideToolbar]=\"true\"\r\n        [hideSettings]=\"true\"\r\n        [hideRowMenu]=\"false\"\r\n        (lazyLoad)=\"onLazyLoad($event)\"\r\n        (cellClicked)=\"onCellClicked($event)\"\r\n        class=\"dark-theme-grid w-full\">\r\n      </lib-grid>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".main-grid-section{border:2px solid #423D48;border-radius:10px;margin-top:35px;background:#29252d}:host ::ng-deep lib-grid.dark-theme-grid .grid-cell-text{position:relative!important;min-height:48px!important;display:flex!important;align-items:center!important;transition:all .2s ease!important}:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell:nth-of-type(2) .grid-cell-text:before{content:\"Name\"!important}:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell:nth-of-type(3) .grid-cell-text:before{content:\"Email\"!important}:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell:nth-of-type(4) .grid-cell-text:before{content:\"User Type\"!important}:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell:nth-of-type(5) .grid-cell-text:before{content:\"Priority\"!important}:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell:nth-of-type(6) .grid-cell-text:before{content:\"Joined\"!important}:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell:nth-of-type(7) .grid-cell-text:before{content:\"Wait Time\"!important}:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell:nth-of-type(8) .grid-cell-text:before{content:\"Notes\"!important}:host ::ng-deep lib-grid.dark-theme-grid .grid-cell-text:before{color:#fff!important;font-weight:400!important;font-size:14px!important;font-family:Roboto,sans-serif!important;z-index:10!important;transition:color .2s ease!important}:host ::ng-deep lib-grid.dark-theme-grid .p-button-icon{display:none!important}:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell:hover .grid-cell-text:before{color:#000!important}:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell .p-datatable-column-sorted .grid-cell-text:before,:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell .grid-cell-text.p-datatable-column-sorted:before,:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell[aria-sort] .grid-cell-text:before{color:#000!important}:host ::ng-deep lib-grid.dark-theme-grid th.grid-cell:hover{transition:background-color .2s ease!important}:host ::ng-deep lib-grid.dark-theme-grid .grid-cell-text .ng-star-inserted{margin-left:auto!important;margin-right:8px!important;transition:filter .2s ease!important}:host ::ng-deep lib-grid.dark-theme-grid .filter-toolbar-top-container{display:none!important;height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:none!important;visibility:hidden!important;opacity:0!important}:host ::ng-deep lib-grid.dark-theme-grid td[alignfrozen=left]:empty{display:none!important}:host ::ng-deep lib-grid.dark-theme-grid .p-datatable-wrapper{overflow-x:auto!important}:host ::ng-deep lib-grid.dark-theme-grid .checkbox-header{background:#374151!important;border-left:1px solid #423D48!important}:host ::ng-deep lib-grid.dark-theme-grid .checkbox-cell{border-left:1px solid #423D48!important}:host ::ng-deep lib-grid.dark-theme-grid .checkbox-cell .custom-grid-checkbox:hover{border-color:#6b7280!important;background-color:#6b72801a!important}:host ::ng-deep lib-grid.dark-theme-grid .checkbox-cell .custom-grid-checkbox.checked:hover{background-color:#2563eb!important;border-color:#2563eb!important}:host ::ng-deep lib-grid.dark-theme-grid .grid-row-menu-button,:host ::ng-deep lib-grid.dark-theme-grid [alignfrozen=left]{padding:0 40px 0 0!important;text-align:center!important;vertical-align:middle!important}:host ::ng-deep lib-grid.dark-theme-grid .grid-row-menu-button button,:host ::ng-deep lib-grid.dark-theme-grid [alignfrozen=left] button{all:initial!important;width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;display:inline-block!important;position:relative!important;cursor:pointer!important;margin:0 auto!important;border:none!important;background:none!important;padding:0!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDQgMTYiIGZpbGw9IiM5Y2EzYWYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiLz48Y2lyY2xlIGN4PSIyIiBjeT0iOCIgcj0iMiIvPjxjaXJjbGUgY3g9IjIiIGN5PSIxNCIgcj0iMiIvPjwvc3ZnPg==)!important;background-repeat:no-repeat!important;background-position:center!important;background-size:4px 16px!important;border-radius:6px!important}:host ::ng-deep lib-grid.dark-theme-grid .grid-row-menu-button button:hover,:host ::ng-deep lib-grid.dark-theme-grid [alignfrozen=left] button:hover{background-color:#4b5563!important;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDQgMTYiIGZpbGw9IiM5Y2EzYWYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMiIgY3k9IjIiIHI9IjIiLz48Y2lyY2xlIGN4PSIyIiBjeT0iOCIgcj0iMiIvPjxjaXJjbGUgY3g9IjIiIGN5PSIxNCIgcj0iMiIvPjwvc3ZnPg==)!important}:host ::ng-deep lib-grid.dark-theme-grid .grid-row-menu-button button i,:host ::ng-deep lib-grid.dark-theme-grid [alignfrozen=left] button i,:host ::ng-deep lib-grid.dark-theme-grid .pi-ellipsis-v{display:none!important;width:0!important;height:0!important;font-size:0!important;visibility:hidden!important;opacity:0!important}:host ::ng-deep .dark-theme-grid .p-datatable{justify-content:center;align-items:center}:host ::ng-deep .dark-theme-grid .p-menu-list{background:#fff!important}.filter-container{position:relative;display:inline-block;border:2px solid #423D48;padding:3px;border-radius:20px}.filter-container:before{content:\"\";position:absolute;inset:1.5px;background:transparent;border-radius:20px;z-index:0;transition:all .2s ease}.filter-container .flex{position:relative;z-index:1}.filter-container button{position:relative;z-index:2;min-width:80px;all:unset;cursor:pointer;text-align:center;padding:.5rem 1rem;border-radius:16px;font-size:.875rem;font-weight:500;transition:all .2s ease}.filter-container button.selected-filter{background-color:#374151;color:#fff;border:1px solid #4b5563;box-shadow:0 1px 2px #0000001a}.filter-container button.unselected-filter{background-color:transparent;color:#d1d5db;border:1px solid transparent}.filter-container button.unselected-filter:hover{background-color:#4b556333;color:#fff}\n"] }]
+    }], () => [{ type: WaitlistGridService }, { type: i0.ChangeDetectorRef }, { type: i1$1.MatDialog }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WaitlistComponent, { className: "WaitlistComponent", filePath: "lib/pages/waitlist/waitlist.component.ts", lineNumber: 18 }); })();
+
+class CodeManagementHeaderComponent {
+    activeTab = 'codes';
+    activeFilter = 'all';
+    tabChanged = new EventEmitter();
+    filterChanged = new EventEmitter();
+    setActiveTab(tab) {
+        this.activeTab = tab;
+        this.tabChanged.emit(tab);
+    }
+    setActiveFilter(filter) {
+        this.activeFilter = filter;
+        this.filterChanged.emit(filter);
+    }
+    static ɵfac = function CodeManagementHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CodeManagementHeaderComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CodeManagementHeaderComponent, selectors: [["app-code-management-header"]], outputs: { tabChanged: "tabChanged", filterChanged: "filterChanged" }, standalone: false, decls: 7, vars: 4, consts: [[1, "mb-6"], [1, "tab-container", "p-1.5", "bg-gray-800", "border", "border-gray-700", "rounded-xl", "w-fit"], [1, "flex", "space-x-0.5"], [3, "click"]], template: function CodeManagementHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
+            i0.ɵɵlistener("click", function CodeManagementHeaderComponent_Template_button_click_3_listener() { return ctx.setActiveTab("codes"); });
+            i0.ɵɵtext(4, " Invitation Codes ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "button", 3);
+            i0.ɵɵlistener("click", function CodeManagementHeaderComponent_Template_button_click_5_listener() { return ctx.setActiveTab("waitlist"); });
+            i0.ɵɵtext(6, " Waitlist ");
+            i0.ɵɵelementEnd()()()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassMap(ctx.activeTab === "codes" ? "selected-tab px-4 py-2 text-sm font-medium transition-colors" : "unselected-tab px-4 py-2 text-sm font-medium transition-colors");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassMap(ctx.activeTab === "waitlist" ? "selected-tab px-4 py-2 text-sm font-medium transition-colors" : "unselected-tab px-4 py-2 text-sm font-medium transition-colors");
+        } }, styles: [".tab-container[_ngcontent-%COMP%]{position:relative;display:inline-block;border:2px solid #423D48;padding:3px;border-radius:20px}.tab-container[_ngcontent-%COMP%]:before{content:\"\";position:absolute;inset:1.5px;background:transparent;border-radius:20px;z-index:0;transition:all .2s ease}.tab-container[_ngcontent-%COMP%]   .flex[_ngcontent-%COMP%]{position:relative;z-index:1}.tab-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{position:relative;z-index:2;min-width:120px;all:unset;cursor:pointer;text-align:center;padding:.5rem 1rem;border-radius:16px;font-size:.875rem;font-weight:500;transition:all .2s ease}.tab-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:first-child{margin-left:0}.tab-container[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:last-child{margin-right:0}.tab-container[_ngcontent-%COMP%]   button.selected-tab[_ngcontent-%COMP%]{background-color:#374151;color:#fff;border:1px solid #4b5563;box-shadow:0 1px 2px #0000001a}.tab-container[_ngcontent-%COMP%]   button.unselected-tab[_ngcontent-%COMP%]{background-color:transparent;color:#d1d5db;border:1px solid transparent}.tab-container[_ngcontent-%COMP%]   button.unselected-tab[_ngcontent-%COMP%]:hover{background-color:#4b556333;color:#fff}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CodeManagementHeaderComponent, [{
+        type: Component,
+        args: [{ selector: 'app-code-management-header', standalone: false, template: "<div class=\"mb-6\">\r\n  <!-- Tab Navigation -->\r\n  <div class=\"tab-container p-1.5 bg-gray-800 border border-gray-700 rounded-xl w-fit\">\r\n    <div class=\"flex space-x-0.5\">\r\n      <button\r\n        (click)=\"setActiveTab('codes')\"\r\n        [class]=\"activeTab === 'codes'\r\n          ? 'selected-tab px-4 py-2 text-sm font-medium transition-colors'\r\n          : 'unselected-tab px-4 py-2 text-sm font-medium transition-colors'\">\r\n        Invitation Codes\r\n      </button>\r\n      <button\r\n        (click)=\"setActiveTab('waitlist')\"\r\n        [class]=\"activeTab === 'waitlist'\r\n          ? 'selected-tab px-4 py-2 text-sm font-medium transition-colors'\r\n          : 'unselected-tab px-4 py-2 text-sm font-medium transition-colors'\">\r\n        Waitlist\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".tab-container{position:relative;display:inline-block;border:2px solid #423D48;padding:3px;border-radius:20px}.tab-container:before{content:\"\";position:absolute;inset:1.5px;background:transparent;border-radius:20px;z-index:0;transition:all .2s ease}.tab-container .flex{position:relative;z-index:1}.tab-container button{position:relative;z-index:2;min-width:120px;all:unset;cursor:pointer;text-align:center;padding:.5rem 1rem;border-radius:16px;font-size:.875rem;font-weight:500;transition:all .2s ease}.tab-container button:first-child{margin-left:0}.tab-container button:last-child{margin-right:0}.tab-container button.selected-tab{background-color:#374151;color:#fff;border:1px solid #4b5563;box-shadow:0 1px 2px #0000001a}.tab-container button.unselected-tab{background-color:transparent;color:#d1d5db;border:1px solid transparent}.tab-container button.unselected-tab:hover{background-color:#4b556333;color:#fff}\n"] }]
+    }], null, { tabChanged: [{
+            type: Output
+        }], filterChanged: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CodeManagementHeaderComponent, { className: "CodeManagementHeaderComponent", filePath: "lib/components/code-management-header/code-management-header.component.ts", lineNumber: 12 }); })();
+
+// generate-code-dialog.component.ts
+function GenerateCodeDialogComponent_button_53_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 29);
+    i0.ɵɵlistener("click", function GenerateCodeDialogComponent_button_53_Template_button_click_0_listener() { const level_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectAccessLevel(level_r2.value)); });
+    i0.ɵɵelementStart(1, "div", 30)(2, "mat-icon", 31);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "div", 32)(5, "div", 33)(6, "span", 34);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 35);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    let tmp_2_0;
+    const level_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassMap(((tmp_2_0 = ctx_r2.codeForm.get("accessLevel")) == null ? null : tmp_2_0.value) === level_r2.value ? "access-level-selected bg-blue-900/30 border-blue-500 text-blue-300" : "access-level-unselected bg-gray-800/50 border-gray-700 text-gray-300");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2.getLevelIconClass(level_r2.value));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r2.getLevelIcon(level_r2.value));
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(level_r2.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", level_r2.description, " ");
+} }
+function GenerateCodeDialogComponent_div_54_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 36)(1, "div", 37)(2, "span", 38);
+    i0.ɵɵtext(3, "Generated Code:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 39);
+    i0.ɵɵlistener("click", function GenerateCodeDialogComponent_div_54_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.copyToClipboard()); });
+    i0.ɵɵelementStart(5, "mat-icon", 40);
+    i0.ɵɵtext(6, "content_copy");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span");
+    i0.ɵɵtext(8, "Copy");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "div", 41)(10, "code", 42);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "p", 43);
+    i0.ɵɵtext(13, "Share this code with users to grant them access");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(11);
+    i0.ɵɵtextInterpolate(ctx_r2.generatedCode);
+} }
+function GenerateCodeDialogComponent_div_55_li_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li");
+    i0.ɵɵtext(1, "Please enter a valid email address");
+    i0.ɵɵelementEnd();
+} }
+function GenerateCodeDialogComponent_div_55_li_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li");
+    i0.ɵɵtext(1, "Maximum uses must be at least 1");
+    i0.ɵɵelementEnd();
+} }
+function GenerateCodeDialogComponent_div_55_li_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "li");
+    i0.ɵɵtext(1, "Access level is required");
+    i0.ɵɵelementEnd();
+} }
+function GenerateCodeDialogComponent_div_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44)(1, "div", 45)(2, "mat-icon", 46);
+    i0.ɵɵtext(3, "error");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 47);
+    i0.ɵɵtext(5, " Please fix the following errors: ");
+    i0.ɵɵelementStart(6, "ul", 48);
+    i0.ɵɵtemplate(7, GenerateCodeDialogComponent_div_55_li_7_Template, 2, 0, "li", 49)(8, GenerateCodeDialogComponent_div_55_li_8_Template, 2, 0, "li", 49)(9, GenerateCodeDialogComponent_div_55_li_9_Template, 2, 0, "li", 49);
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    let tmp_1_0;
+    let tmp_2_0;
+    let tmp_3_0;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("ngIf", (tmp_1_0 = ctx_r2.codeForm.get("email")) == null ? null : tmp_1_0.hasError("email"));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (tmp_2_0 = ctx_r2.codeForm.get("maxUses")) == null ? null : tmp_2_0.hasError("min"));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", (tmp_3_0 = ctx_r2.codeForm.get("accessLevel")) == null ? null : tmp_3_0.hasError("required"));
+} }
+function GenerateCodeDialogComponent_span_60_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15)(1, "mat-icon", 50);
+    i0.ɵɵtext(2, "refresh");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Generating...");
+    i0.ɵɵelementEnd()();
+} }
+function GenerateCodeDialogComponent_span_61_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 15)(1, "mat-icon");
+    i0.ɵɵtext(2, "add");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Generate Code");
+    i0.ɵɵelementEnd()();
+} }
+class GenerateCodeDialogComponent {
+    fb;
+    invitationCodeService;
+    dialogRef;
+    data;
+    codeForm;
+    isGenerating = false;
+    generatedCode = null;
+    generatedData = null;
+    showSuccessMessage = false;
+    accessLevels = [
+        {
+            value: 'basic',
+            label: 'Basic Access',
+            description: 'Standard features',
+            icon: 'person',
+            userType: 'standard'
+        },
+        {
+            value: 'premium',
+            label: 'Premium Access',
+            description: 'Advanced features',
+            icon: 'star',
+            userType: 'premium'
+        },
+        {
+            value: 'vip',
+            label: 'VIP Access',
+            description: 'Exclusive features',
+            icon: 'workspace_premium',
+            userType: 'vip'
+        }
+    ];
+    constructor(fb, invitationCodeService, dialogRef, data) {
+        this.fb = fb;
+        this.invitationCodeService = invitationCodeService;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.codeForm = this.fb.group({
+            name: ['', [Validators.maxLength(50)]],
+            maxUses: [null, [Validators.min(1)]],
+            expiryDate: [null],
+            accessLevel: ['basic', Validators.required],
+            email: ['', [Validators.email]]
+        });
+        if (data) {
+            this.codeForm.patchValue(data);
+        }
+        this.codeForm.valueChanges.subscribe(() => {
+            this.codeForm.markAsTouched();
+        });
+    }
+    ngOnInit() { }
+    onCancel() {
+        this.dialogRef.close();
+    }
+    onSubmit() {
+        if (this.codeForm.valid) {
+            this.isGenerating = true;
+            this.generatedCode = null;
+            this.generatedData = null;
+            this.showSuccessMessage = false;
+            const formData = this.codeForm.value;
+            // Map access level to userType
+            const selectedAccessLevel = this.accessLevels.find(level => level.value === formData.accessLevel);
+            const userType = selectedAccessLevel?.userType || 'standard';
+            const codeData = {
+                name: formData.name,
+                maxUses: formData.maxUses,
+                expiryDate: formData.expiryDate ? new Date(formData.expiryDate).toISOString() : null,
+                accessLevel: formData.accessLevel,
+                userType: userType,
+                email: formData.email || null
+            };
+            // Call the actual API
+            this.invitationCodeService.generateCode(codeData).subscribe({
+                next: (response) => {
+                    this.generatedCode = response.code;
+                    this.generatedData = response;
+                    this.isGenerating = false;
+                    this.showSuccessMessage = true;
+                    // Show success alert
+                    setTimeout(() => {
+                        alert('Invitation code generated successfully!');
+                        // Close the dialog and pass success result
+                        this.dialogRef.close({
+                            success: true,
+                            data: response,
+                            message: 'Code generated successfully!'
+                        });
+                    }, 500); // Small delay for better UX
+                },
+                error: (error) => {
+                    console.error('Error generating code:', error);
+                    this.isGenerating = false;
+                    // Show error message
+                    alert('Failed to generate code. Please try again.');
+                }
+            });
+        }
+        else {
+            this.markFormGroupTouched(this.codeForm);
+        }
+    }
+    selectAccessLevel(level) {
+        this.codeForm.patchValue({ accessLevel: level });
+    }
+    clearExpiryDate() {
+        this.codeForm.patchValue({ expiryDate: null });
+    }
+    copyToClipboard() {
+        if (this.generatedCode) {
+            navigator.clipboard.writeText(this.generatedCode).then(() => {
+                // Show copied message
+                const originalText = event?.target;
+                if (originalText) {
+                    const originalContent = originalText.innerHTML;
+                    originalText.innerHTML = '<mat-icon class="!text-base">check</mat-icon><span>Copied!</span>';
+                    setTimeout(() => {
+                        originalText.innerHTML = originalContent;
+                    }, 2000);
+                }
+            }).catch(err => {
+                console.error('Failed to copy: ', err);
+            });
+        }
+    }
+    getLevelIcon(level) {
+        const found = this.accessLevels.find(l => l.value === level);
+        return found?.icon || 'person';
+    }
+    getLevelIconClass(level) {
+        const baseClasses = 'w-8 h-8 rounded-full flex items-center justify-center';
+        switch (level) {
+            case 'basic': return `${baseClasses} bg-blue-500/20 text-blue-400`;
+            case 'premium': return `${baseClasses} bg-yellow-500/20 text-yellow-400`;
+            case 'vip': return `${baseClasses} bg-purple-500/20 text-purple-400`;
+            default: return `${baseClasses} bg-gray-600`;
+        }
+    }
+    markFormGroupTouched(formGroup) {
+        Object.values(formGroup.controls).forEach(control => {
+            control.markAsTouched();
+            if (control instanceof FormGroup) {
+                this.markFormGroupTouched(control);
+            }
+        });
+    }
+    static ɵfac = function GenerateCodeDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || GenerateCodeDialogComponent)(i0.ɵɵdirectiveInject(i1$2.FormBuilder), i0.ɵɵdirectiveInject(InvitationCodeService), i0.ɵɵdirectiveInject(i1$1.MatDialogRef), i0.ɵɵdirectiveInject(MAT_DIALOG_DATA)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: GenerateCodeDialogComponent, selectors: [["app-generate-code-dialog"]], standalone: false, decls: 62, vars: 8, consts: [[1, "generate-code-dialog"], ["mat-dialog-title", "", 1, "text-white", "!pb-2", "!text-xl", "font-semibold"], [1, "!pb-0", "!min-w-[500px]"], [1, "space-y-6"], [1, "text-md", "text-gray-300"], [1, "border-t", "border-gray-700"], [1, "space-y-6", 3, "formGroup"], [1, "form-group"], [1, "block", "text-sm", "font-medium", "text-gray-300", "mb-2"], [1, "text-gray-500", "text-xs", "font-normal"], ["type", "email", "formControlName", "email", "placeholder", "Enter email address (optional)", "email", "", 1, "w-full", "px-4", "py-3", "bg-gray-800", "border", "border-gray-700", "rounded-lg", "text-white", "placeholder-gray-500", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors"], [1, "mt-1", "text-xs", "text-gray-500"], ["type", "text", "formControlName", "name", "placeholder", "e.g., VIP Users, Team Beta", "maxlength", "50", 1, "w-full", "px-4", "py-3", "bg-gray-800", "border", "border-gray-700", "rounded-lg", "text-white", "placeholder-gray-500", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors"], [1, "mt-1", "text-xs", "text-gray-500", "flex", "justify-between"], ["type", "number", "formControlName", "maxUses", "min", "1", "placeholder", "e.g., 50", 1, "w-full", "px-4", "py-3", "bg-gray-800", "border", "border-gray-700", "rounded-lg", "text-white", "placeholder-gray-500", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors"], [1, "flex", "items-center", "space-x-2"], ["type", "date", "formControlName", "expiryDate", 1, "flex-1", "px-4", "py-3", "bg-gray-800", "border", "border-gray-700", "rounded-lg", "text-white", "placeholder-gray-500", "focus:outline-none", "focus:ring-2", "focus:ring-blue-500", "focus:border-transparent", "transition-colors"], ["type", "button", 1, "px-4", "py-3", "text-sm", "text-gray-400", "hover:text-white", "hover:bg-gray-700", "rounded-lg", "transition-colors", "border", "border-gray-600", 3, "click"], [1, "mb-6"], [1, "text-md", "font-medium", "text-white", "mb-2"], [1, "text-red-400"], [1, "grid", "grid-cols-2", "gap-2"], ["type", "button", "class", "access-level-button px-3 py-2.5 rounded-lg border hover:bg-gray-700/50 transition-all duration-200 flex items-start space-x-3", 3, "class", "click", 4, "ngFor", "ngForOf"], ["class", "mt-4 p-4 bg-gray-800/50 border border-gray-700 rounded-lg", 4, "ngIf"], ["class", "mt-4 p-3 bg-red-900/20 border border-red-800/30 rounded-lg", 4, "ngIf"], ["align", "end", 1, "!border-t", "!border-gray-700"], ["mat-stroked-button", "", 1, "!border-gray-600", "!text-gray-300", "hover:!bg-gray-700", "hover:!border-gray-500", 3, "click"], ["mat-raised-button", "", "color", "primary", 1, "!bg-blue-600", "hover:!bg-blue-700", "disabled:!opacity-50", "disabled:!cursor-not-allowed", 3, "click", "disabled"], ["class", "flex items-center space-x-2", 4, "ngIf"], ["type", "button", 1, "access-level-button", "px-3", "py-2.5", "rounded-lg", "border", "hover:bg-gray-700/50", "transition-all", "duration-200", "flex", "items-start", "space-x-3", 3, "click"], [1, "w-8", "h-8", "rounded-lg", "flex", "items-center", "justify-center", "flex-shrink-0", "mt-0.5"], [1, "!text-sm"], [1, "flex-1", "min-w-0"], [1, "flex", "items-center", "justify-between", "mb-1"], [1, "font-medium", "text-sm", "truncate"], [1, "text-xs", "opacity-75", "truncate"], [1, "mt-4", "p-4", "bg-gray-800/50", "border", "border-gray-700", "rounded-lg"], [1, "flex", "items-center", "justify-between", "mb-2"], [1, "text-sm", "font-medium", "text-gray-300"], ["type", "button", 1, "text-sm", "text-blue-400", "hover:text-blue-300", "flex", "items-center", "space-x-1", "transition-colors", 3, "click"], [1, "!text-base"], [1, "bg-gray-900", "p-3", "rounded", "border", "border-gray-700"], [1, "font-mono", "text-lg", "font-bold", "text-green-400", "select-all"], [1, "mt-2", "text-xs", "text-gray-500"], [1, "mt-4", "p-3", "bg-red-900/20", "border", "border-red-800/30", "rounded-lg"], [1, "flex", "items-start", "space-x-2"], [1, "!text-red-400", "!text-lg", "flex-shrink-0"], [1, "text-sm", "text-red-300"], [1, "mt-1", "ml-4", "list-disc", "text-red-400"], [4, "ngIf"], [1, "animate-spin", "!text-lg"]], template: function GenerateCodeDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "h2", 1);
+            i0.ɵɵtext(2, "Generate Invitation Code");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(3, "mat-dialog-content", 2)(4, "div", 3)(5, "div", 4);
+            i0.ɵɵtext(6, " Create a new invitation code with custom settings ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelement(7, "div", 5);
+            i0.ɵɵelementStart(8, "form", 6)(9, "div", 7)(10, "label", 8);
+            i0.ɵɵtext(11, " Email Address ");
+            i0.ɵɵelementStart(12, "span", 9);
+            i0.ɵɵtext(13, "(Optional)");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(14, "input", 10);
+            i0.ɵɵelementStart(15, "p", 11);
+            i0.ɵɵtext(16, "If provided, only this email can use the code");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(17, "div", 7)(18, "label", 8);
+            i0.ɵɵtext(19, " Code Name ");
+            i0.ɵɵelementStart(20, "span", 9);
+            i0.ɵɵtext(21, "(Optional)");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(22, "input", 12);
+            i0.ɵɵelementStart(23, "div", 13)(24, "span");
+            i0.ɵɵtext(25, "A descriptive name for this code");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(26, "span");
+            i0.ɵɵtext(27);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(28, "div", 7)(29, "label", 8);
+            i0.ɵɵtext(30, " Maximum Uses ");
+            i0.ɵɵelementStart(31, "span", 9);
+            i0.ɵɵtext(32, "(Optional)");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelement(33, "input", 14);
+            i0.ɵɵelementStart(34, "p", 11);
+            i0.ɵɵtext(35, "Leave empty for unlimited uses");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(36, "div", 7)(37, "label", 8);
+            i0.ɵɵtext(38, " Expiration Date ");
+            i0.ɵɵelementStart(39, "span", 9);
+            i0.ɵɵtext(40, "(Optional)");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(41, "div", 15);
+            i0.ɵɵelement(42, "input", 16);
+            i0.ɵɵelementStart(43, "button", 17);
+            i0.ɵɵlistener("click", function GenerateCodeDialogComponent_Template_button_click_43_listener() { return ctx.clearExpiryDate(); });
+            i0.ɵɵtext(44, " Clear ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(45, "p", 11);
+            i0.ɵɵtext(46, "Leave empty for no expiration (30 days default)");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(47, "div", 18)(48, "h3", 19);
+            i0.ɵɵtext(49, "Access Level ");
+            i0.ɵɵelementStart(50, "span", 20);
+            i0.ɵɵtext(51, "*");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(52, "div", 21);
+            i0.ɵɵtemplate(53, GenerateCodeDialogComponent_button_53_Template, 10, 7, "button", 22);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(54, GenerateCodeDialogComponent_div_54_Template, 14, 1, "div", 23)(55, GenerateCodeDialogComponent_div_55_Template, 10, 3, "div", 24);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(56, "mat-dialog-actions", 25)(57, "button", 26);
+            i0.ɵɵlistener("click", function GenerateCodeDialogComponent_Template_button_click_57_listener() { return ctx.onCancel(); });
+            i0.ɵɵtext(58, " Cancel ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(59, "button", 27);
+            i0.ɵɵlistener("click", function GenerateCodeDialogComponent_Template_button_click_59_listener() { return ctx.onSubmit(); });
+            i0.ɵɵtemplate(60, GenerateCodeDialogComponent_span_60_Template, 5, 0, "span", 28)(61, GenerateCodeDialogComponent_span_61_Template, 5, 0, "span", 28);
+            i0.ɵɵelementEnd()()();
+        } if (rf & 2) {
+            let tmp_1_0;
+            i0.ɵɵadvance(8);
+            i0.ɵɵproperty("formGroup", ctx.codeForm);
+            i0.ɵɵadvance(19);
+            i0.ɵɵtextInterpolate1("", ((tmp_1_0 = ctx.codeForm.get("name")) == null ? null : tmp_1_0.value == null ? null : tmp_1_0.value.length) || 0, "/50");
+            i0.ɵɵadvance(26);
+            i0.ɵɵproperty("ngForOf", ctx.accessLevels);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.generatedCode);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.codeForm.invalid && (ctx.codeForm.touched || ctx.codeForm.dirty));
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("disabled", !ctx.codeForm.valid || ctx.isGenerating);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isGenerating);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isGenerating);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i1$2.ɵNgNoValidate, i1$2.DefaultValueAccessor, i1$2.NumberValueAccessor, i1$2.NgControlStatus, i1$2.NgControlStatusGroup, i1$2.MaxLengthValidator, i1$2.EmailValidator, i1$2.MinValidator, i1$2.FormGroupDirective, i1$2.FormControlName, i1$1.MatDialogTitle, i1$1.MatDialogActions, i1$1.MatDialogContent, i4$1.MatButton, i5.MatIcon], styles: ["[_nghost-%COMP%]{display:block}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .mat-mdc-dialog-container[_ngcontent-%COMP%]{background-color:#1f2937!important;border:1px solid #374151}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .mat-mdc-dialog-title[_ngcontent-%COMP%]{color:#fff!important;font-size:1.25rem!important;padding-bottom:.5rem!important}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .mat-mdc-dialog-content[_ngcontent-%COMP%]{color:#d1d5db!important}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .mat-mdc-dialog-actions[_ngcontent-%COMP%]{padding-top:0!important;padding-bottom:0!important}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .transition-colors[_ngcontent-%COMP%]{height:30px}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]{grid-template-columns:repeat(2,minmax(0,1fr))}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button[_ngcontent-%COMP%]{min-height:70px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s cubic-bezier(.4,0,.2,1);padding:7px;margin:5px}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button.access-level-unselected[_ngcontent-%COMP%]{background:#1f293799;border:1px solid rgba(75,85,99,.5)}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button.access-level-unselected[_ngcontent-%COMP%]:hover{background:#374151b3;border-color:#6b728099;transform:translateY(-1px);box-shadow:0 2px 8px #00000026}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button.access-level-unselected[_ngcontent-%COMP%]:active{transform:translateY(0)}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button.access-level-selected[_ngcontent-%COMP%]{background:#1e40af33;border:1px solid rgba(59,130,246,.5);box-shadow:0 0 0 1px #3b82f61a,inset 0 1px #ffffff0d}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button.access-level-selected[_ngcontent-%COMP%]:hover{background:#1e40af40;border-color:#3b82f699;transform:translateY(-1px)}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button[_ngcontent-%COMP%]   .bg-blue-500\\/20.text-blue-400[_ngcontent-%COMP%]{color:#93c5fd}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button[_ngcontent-%COMP%]   .bg-yellow-500\\/20.text-yellow-400[_ngcontent-%COMP%]{color:#fcd34d}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button[_ngcontent-%COMP%]   .bg-red-500\\/20.text-red-400[_ngcontent-%COMP%]{color:#fca5a5}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button[_ngcontent-%COMP%]   .bg-purple-500\\/20.text-purple-400[_ngcontent-%COMP%]{color:#c4b5fd}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button[_ngcontent-%COMP%]   mat-icon.check_circle[_ngcontent-%COMP%]{transition:transform .2s ease}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .access-level-button[_ngcontent-%COMP%]:hover   mat-icon.check_circle[_ngcontent-%COMP%]{transform:scale(1.1)}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .min-w-0[_ngcontent-%COMP%]{min-width:0;margin:auto}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .grid-cols-2[_ngcontent-%COMP%]   .min-w-0[_ngcontent-%COMP%]   .truncate[_ngcontent-%COMP%]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]{margin-bottom:1.25rem}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%]{display:block;margin-bottom:.375rem;font-size:.875rem}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], [_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]{width:100%;font-size:.875rem;padding:.5rem .75rem;background:#1f293799;border:1px solid rgba(75,85,99,.5)}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus, [_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus{background:#1f2937cc;border-color:#3b82f699;box-shadow:0 0 0 2px #3b82f61a}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder, [_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .form-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]::placeholder{color:#9ca3afb3}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]     .mat-mdc-dialog-content::-webkit-scrollbar{width:4px}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]     .mat-mdc-dialog-content::-webkit-scrollbar-track{background:transparent}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]     .mat-mdc-dialog-content::-webkit-scrollbar-thumb{background:#4b556380;border-radius:2px}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]     .mat-mdc-dialog-content::-webkit-scrollbar-thumb:hover{background:#6b7280b3}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .bg-gray-800\\/50[_ngcontent-%COMP%]{background:#1f293799;border:1px solid rgba(75,85,99,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .bg-gray-800\\/50 code[_ngcontent-%COMP%]{font-family:SF Mono,Monaco,Inconsolata,monospace;font-size:.875rem;letter-spacing:.025em;color:#34d399}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .bg-green-900\\/20[_ngcontent-%COMP%]{background:#064e3b33;border:1px solid rgba(52,211,153,.3);animation:_ngcontent-%COMP%_slideIn .3s ease-out}@keyframes _ngcontent-%COMP%_slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]     .mat-mdc-dialog-surface{background:#111827f2!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(75,85,99,.3);border-radius:12px!important;box-shadow:0 10px 25px -5px #00000080,0 8px 10px -6px #0006,inset 0 1px #ffffff0d;width:auto!important;min-width:500px;max-width:550px}@media (max-width: 640px){[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]     .mat-mdc-dialog-surface{min-width:90vw!important;margin:1rem}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]     .mat-mdc-dialog-surface .grid-cols-2{grid-template-columns:1fr;gap:1rem}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]     .mat-mdc-dialog-surface .grid-cols-2 .access-level-button{min-height:65px}}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   button[mat-raised-button][_ngcontent-%COMP%]:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f640,0 2px 4px #3b82f61a}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   button[mat-stroked-button][_ngcontent-%COMP%]:not(:disabled):hover{transform:translateY(-1px);background:#3741514d;border-color:#6b728099}@keyframes _ngcontent-%COMP%_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .animate-spin[_ngcontent-%COMP%]{animation:_ngcontent-%COMP%_spin 1s linear infinite}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .bg-red-900\\/20[_ngcontent-%COMP%]{background:#7f1d1d33;border:1px solid rgba(248,113,113,.3)}[_nghost-%COMP%]   .generate-code-dialog[_ngcontent-%COMP%]   .bg-red-900\\/20[_ngcontent-%COMP%]   mat-icon[_ngcontent-%COMP%]{color:#fca5a5}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(GenerateCodeDialogComponent, [{
+        type: Component,
+        args: [{ selector: 'app-generate-code-dialog', standalone: false, template: "<div class=\"generate-code-dialog\">\r\n  <h2 mat-dialog-title class=\"text-white !pb-2 !text-xl font-semibold\">Generate Invitation Code</h2>\r\n\r\n  <mat-dialog-content class=\"!pb-0 !min-w-[500px]\">\r\n    <div class=\"space-y-6\">\r\n      <div class=\"text-md text-gray-300\">\r\n        Create a new invitation code with custom settings\r\n      </div>\r\n      <div class=\"border-t border-gray-700\"></div>\r\n\r\n      <form [formGroup]=\"codeForm\" class=\"space-y-6\">\r\n        <div class=\"form-group\">\r\n          <label class=\"block text-sm font-medium text-gray-300 mb-2\">\r\n            Email Address <span class=\"text-gray-500 text-xs font-normal\">(Optional)</span>\r\n          </label>\r\n          <input\r\n            type=\"email\"\r\n            formControlName=\"email\"\r\n            class=\"w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors\"\r\n            placeholder=\"Enter email address (optional)\"\r\n            email>\r\n          <p class=\"mt-1 text-xs text-gray-500\">If provided, only this email can use the code</p>\r\n        </div>\r\n\r\n        <!-- Code Name -->\r\n        <div class=\"form-group\">\r\n          <label class=\"block text-sm font-medium text-gray-300 mb-2\">\r\n            Code Name <span class=\"text-gray-500 text-xs font-normal\">(Optional)</span>\r\n          </label>\r\n          <input\r\n            type=\"text\"\r\n            formControlName=\"name\"\r\n            class=\"w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors\"\r\n            placeholder=\"e.g., VIP Users, Team Beta\"\r\n            maxlength=\"50\">\r\n          <div class=\"mt-1 text-xs text-gray-500 flex justify-between\">\r\n            <span>A descriptive name for this code</span>\r\n            <span>{{ codeForm.get('name')?.value?.length || 0 }}/50</span>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Max Uses -->\r\n        <div class=\"form-group\">\r\n          <label class=\"block text-sm font-medium text-gray-300 mb-2\">\r\n            Maximum Uses <span class=\"text-gray-500 text-xs font-normal\">(Optional)</span>\r\n          </label>\r\n          <input\r\n            type=\"number\"\r\n            formControlName=\"maxUses\"\r\n            min=\"1\"\r\n            class=\"w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors\"\r\n            placeholder=\"e.g., 50\">\r\n          <p class=\"mt-1 text-xs text-gray-500\">Leave empty for unlimited uses</p>\r\n        </div>\r\n\r\n        <!-- Expiration Date -->\r\n        <div class=\"form-group\">\r\n          <label class=\"block text-sm font-medium text-gray-300 mb-2\">\r\n            Expiration Date <span class=\"text-gray-500 text-xs font-normal\">(Optional)</span>\r\n          </label>\r\n          <div class=\"flex items-center space-x-2\">\r\n            <input\r\n              type=\"date\"\r\n              formControlName=\"expiryDate\"\r\n              class=\"flex-1 px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors\">\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"clearExpiryDate()\"\r\n              class=\"px-4 py-3 text-sm text-gray-400 hover:text-white hover:bg-gray-700 rounded-lg transition-colors border border-gray-600\">\r\n              Clear\r\n            </button>\r\n          </div>\r\n          <p class=\"mt-1 text-xs text-gray-500\">Leave empty for no expiration (30 days default)</p>\r\n        </div>\r\n\r\n        <!-- Access Level -->\r\n        <div class=\"mb-6\">\r\n          <h3 class=\"text-md font-medium text-white mb-2\">Access Level <span class=\"text-red-400\">*</span></h3>\r\n          <div class=\"grid grid-cols-2 gap-2\">\r\n            <button\r\n              type=\"button\"\r\n              *ngFor=\"let level of accessLevels\"\r\n              (click)=\"selectAccessLevel(level.value)\"\r\n              [class]=\"codeForm.get('accessLevel')?.value === level.value\r\n                ? 'access-level-selected bg-blue-900/30 border-blue-500 text-blue-300'\r\n                : 'access-level-unselected bg-gray-800/50 border-gray-700 text-gray-300'\"\r\n              class=\"access-level-button px-3 py-2.5 rounded-lg border hover:bg-gray-700/50 transition-all duration-200 flex items-start space-x-3\">\r\n\r\n              <!-- Icon Container -->\r\n              <div [class]=\"getLevelIconClass(level.value)\"\r\n                   class=\"w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5\">\r\n                <mat-icon class=\"!text-sm\">{{ getLevelIcon(level.value) }}</mat-icon>\r\n              </div>\r\n\r\n              <!-- Text Content -->\r\n              <div class=\"flex-1 min-w-0\">\r\n                <!-- First line: Label with checkmark -->\r\n                <div class=\"flex items-center justify-between mb-1\">\r\n                  <span class=\"font-medium text-sm truncate\">{{ level.label }}</span>\r\n\r\n                </div>\r\n\r\n                <!-- Second line: Description -->\r\n                <div class=\"text-xs opacity-75 truncate\">\r\n                  {{ level.description }}\r\n                </div>\r\n              </div>\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Generated Code Preview -->\r\n        <div *ngIf=\"generatedCode\" class=\"mt-4 p-4 bg-gray-800/50 border border-gray-700 rounded-lg\">\r\n          <div class=\"flex items-center justify-between mb-2\">\r\n            <span class=\"text-sm font-medium text-gray-300\">Generated Code:</span>\r\n            <button\r\n              type=\"button\"\r\n              (click)=\"copyToClipboard()\"\r\n              class=\"text-sm text-blue-400 hover:text-blue-300 flex items-center space-x-1 transition-colors\">\r\n              <mat-icon class=\"!text-base\">content_copy</mat-icon>\r\n              <span>Copy</span>\r\n            </button>\r\n          </div>\r\n          <div class=\"bg-gray-900 p-3 rounded border border-gray-700\">\r\n            <code class=\"font-mono text-lg font-bold text-green-400 select-all\">{{ generatedCode }}</code>\r\n          </div>\r\n          <p class=\"mt-2 text-xs text-gray-500\">Share this code with users to grant them access</p>\r\n        </div>\r\n\r\n        <!-- Form Validation Summary -->\r\n        <div *ngIf=\"codeForm.invalid && (codeForm.touched || codeForm.dirty)\" class=\"mt-4 p-3 bg-red-900/20 border border-red-800/30 rounded-lg\">\r\n          <div class=\"flex items-start space-x-2\">\r\n            <mat-icon class=\"!text-red-400 !text-lg flex-shrink-0\">error</mat-icon>\r\n            <div class=\"text-sm text-red-300\">\r\n              Please fix the following errors:\r\n              <ul class=\"mt-1 ml-4 list-disc text-red-400\">\r\n                <li *ngIf=\"codeForm.get('email')?.hasError('email')\">Please enter a valid email address</li>\r\n                <li *ngIf=\"codeForm.get('maxUses')?.hasError('min')\">Maximum uses must be at least 1</li>\r\n                <li *ngIf=\"codeForm.get('accessLevel')?.hasError('required')\">Access level is required</li>\r\n              </ul>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </mat-dialog-content>\r\n\r\n  <mat-dialog-actions align=\"end\" class=\"!border-t !border-gray-700\">\r\n    <button\r\n      mat-stroked-button\r\n      (click)=\"onCancel()\"\r\n      class=\"!border-gray-600 !text-gray-300 hover:!bg-gray-700 hover:!border-gray-500\">\r\n      Cancel\r\n    </button>\r\n    <button\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      (click)=\"onSubmit()\"\r\n      [disabled]=\"!codeForm.valid || isGenerating\"\r\n      class=\"!bg-blue-600 hover:!bg-blue-700 disabled:!opacity-50 disabled:!cursor-not-allowed\">\r\n      <span *ngIf=\"isGenerating\" class=\"flex items-center space-x-2\">\r\n        <mat-icon class=\"animate-spin !text-lg\">refresh</mat-icon>\r\n        <span>Generating...</span>\r\n      </span>\r\n      <span *ngIf=\"!isGenerating\" class=\"flex items-center space-x-2\">\r\n        <mat-icon>add</mat-icon>\r\n        <span>Generate Code</span>\r\n      </span>\r\n    </button>\r\n  </mat-dialog-actions>\r\n</div>\r\n\r\n", styles: [":host{display:block}:host .generate-code-dialog .mat-mdc-dialog-container{background-color:#1f2937!important;border:1px solid #374151}:host .generate-code-dialog .mat-mdc-dialog-title{color:#fff!important;font-size:1.25rem!important;padding-bottom:.5rem!important}:host .generate-code-dialog .mat-mdc-dialog-content{color:#d1d5db!important}:host .generate-code-dialog .mat-mdc-dialog-actions{padding-top:0!important;padding-bottom:0!important}:host .generate-code-dialog .transition-colors{height:30px}:host .generate-code-dialog .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}:host .generate-code-dialog .grid-cols-2 .access-level-button{min-height:70px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s cubic-bezier(.4,0,.2,1);padding:7px;margin:5px}:host .generate-code-dialog .grid-cols-2 .access-level-button.access-level-unselected{background:#1f293799;border:1px solid rgba(75,85,99,.5)}:host .generate-code-dialog .grid-cols-2 .access-level-button.access-level-unselected:hover{background:#374151b3;border-color:#6b728099;transform:translateY(-1px);box-shadow:0 2px 8px #00000026}:host .generate-code-dialog .grid-cols-2 .access-level-button.access-level-unselected:active{transform:translateY(0)}:host .generate-code-dialog .grid-cols-2 .access-level-button.access-level-selected{background:#1e40af33;border:1px solid rgba(59,130,246,.5);box-shadow:0 0 0 1px #3b82f61a,inset 0 1px #ffffff0d}:host .generate-code-dialog .grid-cols-2 .access-level-button.access-level-selected:hover{background:#1e40af40;border-color:#3b82f699;transform:translateY(-1px)}:host .generate-code-dialog .grid-cols-2 .access-level-button .bg-blue-500\\/20.text-blue-400{color:#93c5fd}:host .generate-code-dialog .grid-cols-2 .access-level-button .bg-yellow-500\\/20.text-yellow-400{color:#fcd34d}:host .generate-code-dialog .grid-cols-2 .access-level-button .bg-red-500\\/20.text-red-400{color:#fca5a5}:host .generate-code-dialog .grid-cols-2 .access-level-button .bg-purple-500\\/20.text-purple-400{color:#c4b5fd}:host .generate-code-dialog .grid-cols-2 .access-level-button mat-icon.check_circle{transition:transform .2s ease}:host .generate-code-dialog .grid-cols-2 .access-level-button:hover mat-icon.check_circle{transform:scale(1.1)}:host .generate-code-dialog .grid-cols-2 .min-w-0{min-width:0;margin:auto}:host .generate-code-dialog .grid-cols-2 .min-w-0 .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .generate-code-dialog .form-group{margin-bottom:1.25rem}:host .generate-code-dialog .form-group label{display:block;margin-bottom:.375rem;font-size:.875rem}:host .generate-code-dialog .form-group input,:host .generate-code-dialog .form-group select{width:100%;font-size:.875rem;padding:.5rem .75rem;background:#1f293799;border:1px solid rgba(75,85,99,.5)}:host .generate-code-dialog .form-group input:focus,:host .generate-code-dialog .form-group select:focus{background:#1f2937cc;border-color:#3b82f699;box-shadow:0 0 0 2px #3b82f61a}:host .generate-code-dialog .form-group input::placeholder,:host .generate-code-dialog .form-group select::placeholder{color:#9ca3afb3}:host .generate-code-dialog ::ng-deep .mat-mdc-dialog-content::-webkit-scrollbar{width:4px}:host .generate-code-dialog ::ng-deep .mat-mdc-dialog-content::-webkit-scrollbar-track{background:transparent}:host .generate-code-dialog ::ng-deep .mat-mdc-dialog-content::-webkit-scrollbar-thumb{background:#4b556380;border-radius:2px}:host .generate-code-dialog ::ng-deep .mat-mdc-dialog-content::-webkit-scrollbar-thumb:hover{background:#6b7280b3}:host .generate-code-dialog .bg-gray-800\\/50{background:#1f293799;border:1px solid rgba(75,85,99,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}:host .generate-code-dialog .bg-gray-800\\/50 code{font-family:SF Mono,Monaco,Inconsolata,monospace;font-size:.875rem;letter-spacing:.025em;color:#34d399}:host .generate-code-dialog .bg-green-900\\/20{background:#064e3b33;border:1px solid rgba(52,211,153,.3);animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}:host .generate-code-dialog ::ng-deep .mat-mdc-dialog-surface{background:#111827f2!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(75,85,99,.3);border-radius:12px!important;box-shadow:0 10px 25px -5px #00000080,0 8px 10px -6px #0006,inset 0 1px #ffffff0d;width:auto!important;min-width:500px;max-width:550px}@media (max-width: 640px){:host .generate-code-dialog ::ng-deep .mat-mdc-dialog-surface{min-width:90vw!important;margin:1rem}:host .generate-code-dialog ::ng-deep .mat-mdc-dialog-surface .grid-cols-2{grid-template-columns:1fr;gap:1rem}:host .generate-code-dialog ::ng-deep .mat-mdc-dialog-surface .grid-cols-2 .access-level-button{min-height:65px}}:host .generate-code-dialog button[mat-raised-button]:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 4px 12px #3b82f640,0 2px 4px #3b82f61a}:host .generate-code-dialog button[mat-stroked-button]:not(:disabled):hover{transform:translateY(-1px);background:#3741514d;border-color:#6b728099}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host .generate-code-dialog .animate-spin{animation:spin 1s linear infinite}:host .generate-code-dialog .bg-red-900\\/20{background:#7f1d1d33;border:1px solid rgba(248,113,113,.3)}:host .generate-code-dialog .bg-red-900\\/20 mat-icon{color:#fca5a5}\n"] }]
+    }], () => [{ type: i1$2.FormBuilder }, { type: InvitationCodeService }, { type: i1$1.MatDialogRef }, { type: undefined, decorators: [{
+                type: Inject,
+                args: [MAT_DIALOG_DATA]
+            }] }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(GenerateCodeDialogComponent, { className: "GenerateCodeDialogComponent", filePath: "lib/components/modal/generate-code-dialog/generate-code-dialog.component.ts", lineNumber: 31 }); })();
+
+function StatsCardComponent_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7)(1, "span", 8);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.stats.icon);
+} }
+function StatsCardComponent_p_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.stats.description);
+} }
+class StatsCardComponent {
+    stats;
+    static ɵfac = function StatsCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StatsCardComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StatsCardComponent, selectors: [["app-stats-card"]], inputs: { stats: "stats" }, standalone: false, decls: 9, vars: 4, consts: [[1, "stats-card", "bg-gray-800", "rounded-lg", "p-6", "border", "border-gray-700", "hover:border-gray-600", "transition-colors", "duration-200"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-gray-400", "text-sm", "font-medium"], ["class", "p-2 rounded-full bg-gray-400", 4, "ngIf"], [1, "mt-4"], [1, "text-3xl", "font-bold", "text-white"], ["class", "text-gray-500 text-sm mt-2", 4, "ngIf"], [1, "p-2", "rounded-full", "bg-gray-400"], [1, "material-icons", "text-gray-300", "text-lg"], [1, "text-gray-500", "text-sm", "mt-2"]], template: function StatsCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(4, StatsCardComponent_div_4_Template, 3, 1, "div", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 4)(6, "p", 5);
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(8, StatsCardComponent_p_8_Template, 2, 1, "p", 6);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.stats.title);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.stats.icon);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.stats.value);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.stats.description);
+        } }, dependencies: [i2.NgIf], styles: ["[_nghost-%COMP%]{display:block}.stats-card[_ngcontent-%COMP%]{background:#29252d;border:1px solid #423d48;border-radius:.5rem;padding:1.5rem;transition:all .2s ease;box-shadow:0 10px 15px -3px #00000040,0 4px 6px -2px #00000026,inset 0 0 0 1px #ffffff0d}.stats-card[_ngcontent-%COMP%]:hover{transform:translateY(-2px);border-color:#a855f7;box-shadow:0 20px 25px -5px #00000059,0 10px 10px -5px #0003,inset 0 0 0 1px #ffffff1a,0 0 20px #a855f726}.stats-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.stats-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]{color:#a5a1aa;font-size:.875rem;font-weight:500}.stats-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]{padding:.5rem;border-radius:9999px;background:#423d48;transition:background .2s ease}.stats-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]   .material-icons[_ngcontent-%COMP%]{color:#d8d4de;font-size:1rem;transition:color .2s ease}.stats-card[_ngcontent-%COMP%]:hover   .card-header[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]{background:#a855f7}.stats-card[_ngcontent-%COMP%]:hover   .card-header[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]   .material-icons[_ngcontent-%COMP%]{color:#fff}.stats-card[_ngcontent-%COMP%]   .card-content[_ngcontent-%COMP%]{margin-top:1rem}.stats-card[_ngcontent-%COMP%]   .card-content[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]{font-size:1.875rem;font-weight:700;color:#fff;margin:0}.stats-card[_ngcontent-%COMP%]   .card-content[_ngcontent-%COMP%]   .description[_ngcontent-%COMP%]{color:#9ca3af;font-size:.75rem;margin:.5rem 0 0}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StatsCardComponent, [{
+        type: Component,
+        args: [{ selector: 'app-stats-card', standalone: false, template: "<div class=\"stats-card bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-gray-600 transition-colors duration-200\">\r\n  <!-- Title and icon on the same line -->\r\n  <div class=\"flex items-center justify-between mb-6\">\r\n    <h3 class=\"text-gray-400 text-sm font-medium\">{{ stats.title }}</h3>\r\n    <!-- Material Icons on the same line as title -->\r\n    <div *ngIf=\"stats.icon\" class=\"p-2 rounded-full bg-gray-400\">\r\n      <span class=\"material-icons text-gray-300 text-lg\">{{ stats.icon }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Number and description below with more space above -->\r\n  <div class=\"mt-4\">\r\n    <p class=\"text-3xl font-bold text-white\">{{ stats.value }}</p>\r\n    <p *ngIf=\"stats.description\" class=\"text-gray-500 text-sm mt-2\">{{ stats.description }}</p>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.stats-card{background:#29252d;border:1px solid #423d48;border-radius:.5rem;padding:1.5rem;transition:all .2s ease;box-shadow:0 10px 15px -3px #00000040,0 4px 6px -2px #00000026,inset 0 0 0 1px #ffffff0d}.stats-card:hover{transform:translateY(-2px);border-color:#a855f7;box-shadow:0 20px 25px -5px #00000059,0 10px 10px -5px #0003,inset 0 0 0 1px #ffffff1a,0 0 20px #a855f726}.stats-card .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.stats-card .card-header h3{color:#a5a1aa;font-size:.875rem;font-weight:500}.stats-card .card-header .icon-container{padding:.5rem;border-radius:9999px;background:#423d48;transition:background .2s ease}.stats-card .card-header .icon-container .material-icons{color:#d8d4de;font-size:1rem;transition:color .2s ease}.stats-card:hover .card-header .icon-container{background:#a855f7}.stats-card:hover .card-header .icon-container .material-icons{color:#fff}.stats-card .card-content{margin-top:1rem}.stats-card .card-content .value{font-size:1.875rem;font-weight:700;color:#fff;margin:0}.stats-card .card-content .description{color:#9ca3af;font-size:.75rem;margin:.5rem 0 0}\n"] }]
+    }], null, { stats: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StatsCardComponent, { className: "StatsCardComponent", filePath: "lib/components/shared/stats-card/stats-card.component.ts", lineNumber: 11 }); })();
+
+// stats-overview.component.ts
+function StatsOverviewComponent_app_stats_card_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-stats-card", 9);
+} if (rf & 2) {
+    const stat_r1 = ctx.$implicit;
+    i0.ɵɵproperty("stats", stat_r1);
+} }
+class StatsOverviewComponent {
+    invitationCodeService;
+    dialog;
+    stats$;
+    constructor(invitationCodeService, dialog) {
+        this.invitationCodeService = invitationCodeService;
+        this.dialog = dialog;
+    }
+    ngOnInit() {
+        this.stats$ = this.invitationCodeService.getStats();
+    }
+    openGenerateCodeDialog() {
+        const dialogRef = this.dialog.open(GenerateCodeDialogComponent, {
+            width: 'auto', // Let content determine width
+            maxWidth: '600px', // Maximum width
+            maxHeight: '85vh', // Maximum height
+            panelClass: 'generate-code-dialog',
+            autoFocus: false,
+            disableClose: false,
+            data: {
+                name: '',
+                maxUses: null,
+                expiryDate: null,
+                accessLevel: 'basic'
+            }
+        });
+        dialogRef.afterClosed().subscribe((result) => {
+            if (result && result.code) {
+                console.log('Generated code:', result);
+                // Handle the generated code
+                this.handleGeneratedCode(result);
+            }
+        });
+    }
+    handleGeneratedCode(data) {
+        this.invitationCodeService.generateCode(data).subscribe({
+            next: (response) => {
+                console.log('Code generated successfully:', response);
+                alert(`Code "${response.code}" generated successfully!`);
+            },
+            error: (error) => {
+                console.error('Failed to generate code:', error);
+                alert(`Failed to generate code: ${error.message}`);
+            }
+        });
+    }
+    static ɵfac = function StatsOverviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StatsOverviewComponent)(i0.ɵɵdirectiveInject(InvitationCodeService), i0.ɵɵdirectiveInject(i1$1.MatDialog)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StatsOverviewComponent, selectors: [["app-stats-overview"]], standalone: false, decls: 14, vars: 3, consts: [[1, "stats-overview", "mb-8"], [1, "header-section", "flex", "flex-col", "lg:flex-row", "lg:items-center", "lg:justify-between", "mb-10"], [1, "header-content"], [1, "text-2xl", "font-bold", "text-white"], [1, "text-gray-400", "text-md"], ["mat-raised-button", "", "color", "primary", 1, "mt-4", "lg:mt-0", "flex", "items-center", "justify-center", "gap-2", "!bg-blue-600", "hover:!bg-blue-700", 3, "click"], [1, "!text-lg"], [1, "grid", "grid-cols-1", "md:grid-cols-2", "lg:grid-cols-5", "gap-4"], [3, "stats", 4, "ngFor", "ngForOf"], [3, "stats"]], template: function StatsOverviewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h2", 3);
+            i0.ɵɵtext(4, "Access Management");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "p", 4);
+            i0.ɵɵtext(6, "Manage invitation codes and waitlist members");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(7, "button", 5);
+            i0.ɵɵlistener("click", function StatsOverviewComponent_Template_button_click_7_listener() { return ctx.openGenerateCodeDialog(); });
+            i0.ɵɵelementStart(8, "mat-icon", 6);
+            i0.ɵɵtext(9, "add");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtext(10, " Generate Code ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(11, "div", 7);
+            i0.ɵɵtemplate(12, StatsOverviewComponent_app_stats_card_12_Template, 1, 1, "app-stats-card", 8);
+            i0.ɵɵpipe(13, "async");
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(12);
+            i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(13, 1, ctx.stats$));
+        } }, dependencies: [i2.NgForOf, i4$1.MatButton, i5.MatIcon, StatsCardComponent, i2.AsyncPipe], styles: ["[_nghost-%COMP%]{display:block}.header-section[_ngcontent-%COMP%]   .header-content[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%]{margin-bottom:1rem;font-weight:400}.header-section[_ngcontent-%COMP%]   button[mat-raised-button][_ngcontent-%COMP%]{transition:all .2s ease}.header-section[_ngcontent-%COMP%]   button[mat-raised-button][_ngcontent-%COMP%]:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.header-section[_ngcontent-%COMP%]   button[mat-raised-button][_ngcontent-%COMP%]:active:not(:disabled){transform:translateY(0)}  .dark-dialog .mat-mdc-dialog-surface{background-color:#29252d!important;border-radius:12px!important;border:1px solid #374151;box-shadow:0 20px 25px -5px #00000080,0 10px 10px -5px #0006}  .dark-dialog .mat-mdc-dialog-container{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StatsOverviewComponent, [{
+        type: Component,
+        args: [{ selector: 'app-stats-overview', standalone: false, template: "<!-- stats-overview.component.html -->\r\n<div class=\"stats-overview mb-8\">\r\n  <!-- Header section with flex layout -->\r\n  <div class=\"header-section flex flex-col lg:flex-row lg:items-center lg:justify-between mb-10\">\r\n    <div class=\"header-content\">\r\n      <h2 class=\"text-2xl font-bold text-white\">Access Management</h2>\r\n      <p class=\"text-gray-400 text-md\">Manage invitation codes and waitlist members</p>\r\n    </div>\r\n\r\n    <!-- Generate Code Button -->\r\n    <button\r\n      mat-raised-button\r\n      color=\"primary\"\r\n      (click)=\"openGenerateCodeDialog()\"\r\n      class=\"mt-4 lg:mt-0 flex items-center justify-center gap-2 !bg-blue-600 hover:!bg-blue-700\">\r\n      <mat-icon class=\"!text-lg\">add</mat-icon>\r\n      Generate Code\r\n    </button>\r\n  </div>\r\n\r\n  <!-- Stats cards grid -->\r\n  <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4\">\r\n    <app-stats-card\r\n      *ngFor=\"let stat of stats$ | async\"\r\n      [stats]=\"stat\">\r\n    </app-stats-card>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block}.header-section .header-content h2{margin-bottom:1rem;font-weight:400}.header-section button[mat-raised-button]{transition:all .2s ease}.header-section button[mat-raised-button]:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.header-section button[mat-raised-button]:active:not(:disabled){transform:translateY(0)}::ng-deep .dark-dialog .mat-mdc-dialog-surface{background-color:#29252d!important;border-radius:12px!important;border:1px solid #374151;box-shadow:0 20px 25px -5px #00000080,0 10px 10px -5px #0006}::ng-deep .dark-dialog .mat-mdc-dialog-container{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}\n"] }]
+    }], () => [{ type: InvitationCodeService }, { type: i1$1.MatDialog }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StatsOverviewComponent, { className: "StatsOverviewComponent", filePath: "lib/components/stats-overview/stats-overview.component.ts", lineNumber: 17 }); })();
+
+function WaitlistStatsCardComponent_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7)(1, "span", 8);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.stats.icon);
+} }
+function WaitlistStatsCardComponent_p_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 9);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.stats.description);
+} }
+class WaitlistStatsCardComponent {
+    stats;
+    static ɵfac = function WaitlistStatsCardComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WaitlistStatsCardComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WaitlistStatsCardComponent, selectors: [["app-waitlist-stats-card"]], inputs: { stats: "stats" }, standalone: false, decls: 9, vars: 4, consts: [[1, "stats-card", "bg-gray-800", "rounded-lg", "p-6", "border", "border-gray-700", "hover:border-gray-600", "transition-colors", "duration-200"], [1, "flex", "items-center", "justify-between", "mb-6"], [1, "text-gray-400", "text-sm", "font-medium"], ["class", "p-2 rounded-full bg-gray-400", 4, "ngIf"], [1, "mt-4"], [1, "text-3xl", "font-bold", "text-white"], ["class", "text-gray-500 text-sm mt-2", 4, "ngIf"], [1, "p-2", "rounded-full", "bg-gray-400"], [1, "material-icons", "text-gray-300", "text-lg"], [1, "text-gray-500", "text-sm", "mt-2"]], template: function WaitlistStatsCardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(4, WaitlistStatsCardComponent_div_4_Template, 3, 1, "div", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "div", 4)(6, "p", 5);
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(8, WaitlistStatsCardComponent_p_8_Template, 2, 1, "p", 6);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.stats.title);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.stats.icon);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.stats.value);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.stats.description);
+        } }, dependencies: [i2.NgIf], styles: ["[_nghost-%COMP%]{display:block;width:100%}.stats-card[_ngcontent-%COMP%]{background:#29252d;border:1px solid #423d48;border-radius:.5rem;padding:1.5rem;transition:all .2s ease;box-shadow:0 10px 15px -3px #00000040,0 4px 6px -2px #00000026,inset 0 0 0 1px #ffffff0d}.stats-card[_ngcontent-%COMP%]:hover{transform:translateY(-2px);border-color:#a855f7;box-shadow:0 20px 25px -5px #00000059,0 10px 10px -5px #0003,inset 0 0 0 1px #ffffff1a,0 0 20px #a855f726}.stats-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.stats-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]{color:#a5a1aa;font-size:.875rem;font-weight:500}.stats-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]{padding:.5rem;border-radius:9999px;background:#423d48;transition:background .2s ease}.stats-card[_ngcontent-%COMP%]   .card-header[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]   .material-icons[_ngcontent-%COMP%]{color:#d8d4de;font-size:1rem;transition:color .2s ease}.stats-card[_ngcontent-%COMP%]:hover   .card-header[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]{background:#a855f7}.stats-card[_ngcontent-%COMP%]:hover   .card-header[_ngcontent-%COMP%]   .icon-container[_ngcontent-%COMP%]   .material-icons[_ngcontent-%COMP%]{color:#fff}.stats-card[_ngcontent-%COMP%]   .card-content[_ngcontent-%COMP%]{margin-top:1rem}.stats-card[_ngcontent-%COMP%]   .card-content[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%]{font-size:1.875rem;font-weight:700;color:#fff;margin:0}.stats-card[_ngcontent-%COMP%]   .card-content[_ngcontent-%COMP%]   .description[_ngcontent-%COMP%]{color:#9ca3af;font-size:.75rem;margin:.5rem 0 0}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WaitlistStatsCardComponent, [{
+        type: Component,
+        args: [{ selector: 'app-waitlist-stats-card', standalone: false, template: "<div class=\"stats-card bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-gray-600 transition-colors duration-200\">\r\n  <div class=\"flex items-center justify-between mb-6\">\r\n    <h3 class=\"text-gray-400 text-sm font-medium\">{{ stats.title }}</h3>\r\n\r\n    <div *ngIf=\"stats.icon\" class=\"p-2 rounded-full bg-gray-400\">\r\n      <span class=\"material-icons text-gray-300 text-lg\">{{ stats.icon }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"mt-4\">\r\n    <p class=\"text-3xl font-bold text-white\">{{ stats.value }}</p>\r\n    <p *ngIf=\"stats.description\" class=\"text-gray-500 text-sm mt-2\">{{ stats.description }}</p>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;width:100%}.stats-card{background:#29252d;border:1px solid #423d48;border-radius:.5rem;padding:1.5rem;transition:all .2s ease;box-shadow:0 10px 15px -3px #00000040,0 4px 6px -2px #00000026,inset 0 0 0 1px #ffffff0d}.stats-card:hover{transform:translateY(-2px);border-color:#a855f7;box-shadow:0 20px 25px -5px #00000059,0 10px 10px -5px #0003,inset 0 0 0 1px #ffffff1a,0 0 20px #a855f726}.stats-card .card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.stats-card .card-header h3{color:#a5a1aa;font-size:.875rem;font-weight:500}.stats-card .card-header .icon-container{padding:.5rem;border-radius:9999px;background:#423d48;transition:background .2s ease}.stats-card .card-header .icon-container .material-icons{color:#d8d4de;font-size:1rem;transition:color .2s ease}.stats-card:hover .card-header .icon-container{background:#a855f7}.stats-card:hover .card-header .icon-container .material-icons{color:#fff}.stats-card .card-content{margin-top:1rem}.stats-card .card-content .value{font-size:1.875rem;font-weight:700;color:#fff;margin:0}.stats-card .card-content .description{color:#9ca3af;font-size:.75rem;margin:.5rem 0 0}\n"] }]
+    }], null, { stats: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WaitlistStatsCardComponent, { className: "WaitlistStatsCardComponent", filePath: "lib/components/shared/waitlist-stats-card/waitlist-stats-card.component.ts", lineNumber: 11 }); })();
+
+function WaitlistStatsOverviewComponent_ng_container_0_app_waitlist_stats_card_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "app-waitlist-stats-card", 7);
+} if (rf & 2) {
+    const stat_r1 = ctx.$implicit;
+    i0.ɵɵproperty("stats", stat_r1);
+} }
+function WaitlistStatsOverviewComponent_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 5);
+    i0.ɵɵtemplate(2, WaitlistStatsOverviewComponent_ng_container_0_app_waitlist_stats_card_2_Template, 1, 1, "app-waitlist-stats-card", 6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const stats_r2 = ctx.ngIf;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("grid-template-columns", ctx_r2.getCols(stats_r2.length));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", stats_r2);
+} }
+function WaitlistStatsOverviewComponent_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8)(1, "div", 9)(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span");
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 10);
+    i0.ɵɵelement(7, "div", 11);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const item_r4 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r4.label);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(item_r4.value);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("width", ctx_r2.getPercentage(item_r4.value) + "%");
+} }
+class WaitlistStatsOverviewComponent {
+    WaitlistCodeService;
+    waitlistStats$;
+    userDemand = [
+        { label: 'Premium Member', value: 2 },
+        { label: 'Standard Member', value: 2 },
+        { label: 'VIP Member', value: 1 }
+    ];
+    constructor(WaitlistCodeService) {
+        this.WaitlistCodeService = WaitlistCodeService;
+    }
+    ngOnInit() {
+        this.waitlistStats$ = this.WaitlistCodeService.getWaitlistStats();
+    }
+    getPercentage(value) {
+        const max = Math.max(...this.userDemand.map(x => x.value));
+        return (value / max) * 100;
+    }
+    getCols(count) {
+        return `repeat(${count}, minmax(0, 1fr))`;
+    }
+    static ɵfac = function WaitlistStatsOverviewComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || WaitlistStatsOverviewComponent)(i0.ɵɵdirectiveInject(WaitlistCodeService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: WaitlistStatsOverviewComponent, selectors: [["app-waitlist-stats-overview"]], standalone: false, decls: 8, vars: 4, consts: [[4, "ngIf"], [1, "user-demand", "bg-gray-800", "rounded-lg", "p-6", "border", "border-gray-700", "hover:border-gray-600", "transition-colors", "duration-200"], [1, "text-lg", "font-semibold", "text-white", "mb-4"], [1, "text-gray-400", "text-sm", "mb-6"], ["class", "mb-5 last:mb-0", 4, "ngFor", "ngForOf"], [1, "grid", "gap-4", "w-full"], ["class", "w-full", 3, "stats", 4, "ngFor", "ngForOf"], [1, "w-full", 3, "stats"], [1, "mb-5", "last:mb-0"], [1, "flex", "items-center", "justify-between", "text-sm", "text-white", "mb-2"], [1, "w-full", "h-4", "bg-gray-700", "rounded-full", "overflow-hidden"], [1, "h-full", "bg-gradient-to-r", "from-blue-500", "to-purple-500", "rounded-full", "transition-all", "duration-700"]], template: function WaitlistStatsOverviewComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, WaitlistStatsOverviewComponent_ng_container_0_Template, 3, 3, "ng-container", 0);
+            i0.ɵɵpipe(1, "async");
+            i0.ɵɵelementStart(2, "div", 1)(3, "h2", 2);
+            i0.ɵɵtext(4, "Demand by User Type");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "p", 3);
+            i0.ɵɵtext(6, " See which user types have the most waitlist members ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(7, WaitlistStatsOverviewComponent_div_7_Template, 8, 4, "div", 4);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", i0.ɵɵpipeBind1(1, 2, ctx.waitlistStats$));
+            i0.ɵɵadvance(7);
+            i0.ɵɵproperty("ngForOf", ctx.userDemand);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, WaitlistStatsCardComponent, i2.AsyncPipe], styles: [".user-demand[_ngcontent-%COMP%]{background:#29252d;border:1px solid #423d48;border-radius:.5rem;padding:1.5rem;transition:all .2s ease;margin-top:25px;box-shadow:0 10px 15px -3px #00000040,0 4px 6px -2px #00000026,inset 0 0 0 1px #ffffff0d}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WaitlistStatsOverviewComponent, [{
+        type: Component,
+        args: [{ selector: 'app-waitlist-stats-overview', standalone: false, template: "<ng-container *ngIf=\"waitlistStats$ | async as stats\">\r\n  <div class=\"grid gap-4 w-full\"\r\n       [style.grid-template-columns]=\"getCols(stats.length)\">\r\n    <app-waitlist-stats-card\r\n      *ngFor=\"let stat of stats\"\r\n      class=\"w-full\"\r\n      [stats]=\"stat\">\r\n    </app-waitlist-stats-card>\r\n  </div>\r\n</ng-container>\r\n<!-- DEMAND BY USER TYPE -->\r\n<div class=\"user-demand bg-gray-800 rounded-lg p-6 border border-gray-700 hover:border-gray-600 transition-colors duration-200\">\r\n  <h2 class=\"text-lg font-semibold text-white mb-4\">Demand by User Type</h2>\r\n  <p class=\"text-gray-400 text-sm mb-6\">\r\n    See which user types have the most waitlist members\r\n  </p>\r\n\r\n  <div *ngFor=\"let item of userDemand\" class=\"mb-5 last:mb-0\">\r\n    <div class=\"flex items-center justify-between text-sm text-white mb-2\">\r\n      <span>{{ item.label }}</span>\r\n      <span>{{ item.value }}</span>\r\n    </div>\r\n\r\n    <!-- Progress bar container -->\r\n    <div class=\"w-full h-4 bg-gray-700 rounded-full overflow-hidden\">\r\n      <div class=\"h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full transition-all duration-700\"\r\n           [style.width]=\"getPercentage(item.value) + '%'\">\r\n      </div>\r\n    </div>\r\n\r\n\r\n  </div>\r\n</div>\r\n\r\n", styles: [".user-demand{background:#29252d;border:1px solid #423d48;border-radius:.5rem;padding:1.5rem;transition:all .2s ease;margin-top:25px;box-shadow:0 10px 15px -3px #00000040,0 4px 6px -2px #00000026,inset 0 0 0 1px #ffffff0d}\n"] }]
+    }], () => [{ type: WaitlistCodeService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WaitlistStatsOverviewComponent, { className: "WaitlistStatsOverviewComponent", filePath: "lib/components/wait-list-stats-overview/waitlist-stats-overview.component.ts", lineNumber: 12 }); })();
+
+const INVITATION_CODE_CONFIG = new InjectionToken('InvitationCodeConfig');
+// Separate page components that have circular dependencies
+const PAGE_COMPONENTS = [
+    CodeManagementComponent,
+    InvitationCodesComponent,
+    WaitlistComponent
+];
+// UI components (no circular issues)
+const UI_COMPONENTS = [
+    CodeManagementHeaderComponent,
+    GenerateCodeDialogComponent,
+    ConvertToInvitationDialogComponent,
+    StatsOverviewComponent,
+    WaitlistStatsOverviewComponent,
+    StatsCardComponent,
+    WaitlistStatsCardComponent
+];
+// Apply forwardRef only to page components with circular dependencies
+const ALL_COMPONENTS = [
+    // Page components with forwardRef
+    forwardRef(() => CodeManagementComponent),
+    forwardRef(() => InvitationCodesComponent),
+    forwardRef(() => WaitlistComponent),
+    // UI components without forwardRef
+    ...UI_COMPONENTS
+];
+class InvitationCodeModule {
+    static forRoot(config) {
+        return {
+            ngModule: InvitationCodeModule,
+            providers: [
+                {
+                    provide: INVITATION_CODE_CONFIG,
+                    useValue: config
+                },
+                InvitationCodeService,
+                WaitlistCodeService,
+                InvitationGridService,
+                WaitlistGridService
+            ]
+        };
+    }
+    static ɵfac = function InvitationCodeModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InvitationCodeModule)(); };
+    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: InvitationCodeModule });
+    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            HttpClientModule,
+            RouterModule,
+            // Material
+            MatDialogModule,
+            MatButtonModule,
+            MatInputModule,
+            MatFormFieldModule,
+            MatSelectModule,
+            MatTableModule,
+            MatPaginatorModule,
+            MatSortModule,
+            MatIconModule,
+            MatTooltipModule,
+            MatCardModule,
+            MatDatepickerModule,
+            MatNativeDateModule,
+            MatProgressSpinnerModule,
+            MatSnackBarModule,
+            MatRadioModule,
+            // Third-party
+            GridModule] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InvitationCodeModule, [{
+        type: NgModule,
+        args: [{
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    ReactiveFormsModule,
+                    HttpClientModule,
+                    RouterModule,
+                    // Material
+                    MatDialogModule,
+                    MatButtonModule,
+                    MatInputModule,
+                    MatFormFieldModule,
+                    MatSelectModule,
+                    MatTableModule,
+                    MatPaginatorModule,
+                    MatSortModule,
+                    MatIconModule,
+                    MatTooltipModule,
+                    MatCardModule,
+                    MatDatepickerModule,
+                    MatNativeDateModule,
+                    MatProgressSpinnerModule,
+                    MatSnackBarModule,
+                    MatRadioModule,
+                    // Third-party
+                    GridModule,
+                ],
+                declarations: ALL_COMPONENTS,
+                exports: [...PAGE_COMPONENTS, ...UI_COMPONENTS]
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(InvitationCodeModule, { declarations: [CodeManagementComponent, InvitationCodesComponent, WaitlistComponent, CodeManagementHeaderComponent,
+        GenerateCodeDialogComponent,
+        ConvertToInvitationDialogComponent,
+        StatsOverviewComponent,
+        WaitlistStatsOverviewComponent,
+        StatsCardComponent,
+        WaitlistStatsCardComponent], imports: [CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        HttpClientModule,
+        RouterModule,
+        // Material
+        MatDialogModule,
+        MatButtonModule,
+        MatInputModule,
+        MatFormFieldModule,
+        MatSelectModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatIconModule,
+        MatTooltipModule,
+        MatCardModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
+        MatProgressSpinnerModule,
+        MatSnackBarModule,
+        MatRadioModule,
+        // Third-party
+        GridModule], exports: [CodeManagementComponent,
+        InvitationCodesComponent,
+        WaitlistComponent, CodeManagementHeaderComponent,
+        GenerateCodeDialogComponent,
+        ConvertToInvitationDialogComponent,
+        StatsOverviewComponent,
+        WaitlistStatsOverviewComponent,
+        StatsCardComponent,
+        WaitlistStatsCardComponent] }); })();
+i0.ɵɵsetComponentScope(CodeManagementComponent, function () { return [i2.NgIf, InvitationCodesComponent, WaitlistComponent, CodeManagementHeaderComponent,
+    StatsOverviewComponent]; }, []);
+i0.ɵɵsetComponentScope(WaitlistComponent, function () { return [i2.NgForOf, i2.NgIf, i4$1.MatButton, i5.MatIcon, i4.GridComponent, WaitlistStatsOverviewComponent]; }, []);
+
+// Core exports
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CodeManagementComponent, CodeManagementHeaderComponent, ConvertToInvitationDialogComponent, GenerateCodeDialogComponent, INVITATION_CODE_CONFIG, InvitationCodeModule, InvitationCodeService, InvitationCodesComponent, InvitationGridService, StatsCardComponent, StatsOverviewComponent, WaitlistCodeService, WaitlistComponent, WaitlistGridService, WaitlistStatsCardComponent, WaitlistStatsOverviewComponent };
+//# sourceMappingURL=invitation-code-lib.mjs.map