@memberjunction/ng-explorer-settings 2.111.1 → 2.112.0

package/dist/lib/user-management/user-management.component.js

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { Subject, BehaviorSubject } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { RunView, Metadata } from '@memberjunction/core';
+import { RunView, Metadata } from '@memberjunction/global';
 import { SharedSettingsModule } from '../shared/shared-settings.module';
 import { UserDialogComponent } from './user-dialog/user-dialog.component';
 import { WindowModule } from '@progress/kendo-angular-dialog';
@@ -313,13 +313,13 @@ export class UserManagementComponent {
         totalUsers: 0,
         activeUsers: 0,
         inactiveUsers: 0,
-        adminUsers: 0 // This will be based on roles, not Type
+        adminUsers: 0, // This will be based on roles, not Type
     };
     // Filters
     filters$ = new BehaviorSubject({
         status: 'all',
         role: '',
-        search: ''
+        search: '',
     });
     // UI State
     showCreateDialog = false;
@@ -332,7 +332,7 @@ export class UserManagementComponent {
     gridConfig = {
         pageSize: 20,
         sortField: 'Name',
-        sortDirection: 'asc'
+        sortDirection: 'asc',
     };
     destroy$ = new Subject();
     metadata = new Metadata();
@@ -350,11 +350,7 @@ export class UserManagementComponent {
             this.isLoading = true;
             this.error = null;
             // Load users, roles, and user-role relationships in parallel
-            const [users, roles, userRoles] = await Promise.all([
-                this.loadUsers(),
-                this.loadRoles(),
-                this.loadUserRoles()
-            ]);
+            const [users, roles, userRoles] = await Promise.all([this.loadUsers(), this.loadRoles(), this.loadUserRoles()]);
             this.users = users;
             this.roles = roles;
             // Build user-role mapping
@@ -374,7 +370,7 @@ export class UserManagementComponent {
         const rv = new RunView();
         const result = await rv.RunView({
             EntityName: 'Users',
-            ResultType: 'entity_object'
+            ResultType: 'entity_object',
         });
         return result.Success ? result.Results : [];
     }
@@ -383,7 +379,7 @@ export class UserManagementComponent {
         const result = await rv.RunView({
             EntityName: 'Roles',
             ResultType: 'entity_object',
-            OrderBy: 'Name ASC'
+            OrderBy: 'Name ASC',
         });
         return result.Success ? result.Results : [];
     }
@@ -391,13 +387,13 @@ export class UserManagementComponent {
         const rv = new RunView();
         const result = await rv.RunView({
             EntityName: 'User Roles',
-            ResultType: 'entity_object'
+            ResultType: 'entity_object',
         });
         return result.Success ? result.Results : [];
     }
     buildUserRoleMapping(userRoles) {
         this.userRoleMap.clear();
-        userRoles.forEach(userRole => {
+        userRoles.forEach((userRole) => {
             const userId = userRole.UserID;
             const roleId = userRole.RoleID;
             if (!this.userRoleMap.has(userId)) {
@@ -418,11 +414,11 @@ export class UserManagementComponent {
         let filtered = [...this.users];
         // Apply status filter
         if (filters.status !== 'all') {
-            filtered = filtered.filter(user => filters.status === 'active' ? user.IsActive : !user.IsActive);
+            filtered = filtered.filter((user) => (filters.status === 'active' ? user.IsActive : !user.IsActive));
         }
         // Apply role filter
         if (filters.role) {
-            filtered = filtered.filter(user => {
+            filtered = filtered.filter((user) => {
                 const userRoles = this.userRoleMap.get(user.ID) || [];
                 return userRoles.includes(filters.role);
             });
@@ -430,7 +426,7 @@ export class UserManagementComponent {
         // Apply search filter
         if (filters.search) {
             const searchLower = filters.search.toLowerCase();
-            filtered = filtered.filter(user => user.Name?.toLowerCase().includes(searchLower) ||
+            filtered = filtered.filter((user) => user.Name?.toLowerCase().includes(searchLower) ||
                 user.Email?.toLowerCase().includes(searchLower) ||
                 user.FirstName?.toLowerCase().includes(searchLower) ||
                 user.LastName?.toLowerCase().includes(searchLower));
@@ -440,9 +436,9 @@ export class UserManagementComponent {
     calculateStats() {
         this.stats = {
             totalUsers: this.users.length,
-            activeUsers: this.users.filter(u => u.IsActive).length,
-            inactiveUsers: this.users.filter(u => !u.IsActive).length,
-            adminUsers: this.users.filter(u => u.Type === 'Owner').length // Using Owner as admin type
+            activeUsers: this.users.filter((u) => u.IsActive).length,
+            inactiveUsers: this.users.filter((u) => !u.IsActive).length,
+            adminUsers: this.users.filter((u) => u.Type === 'Owner').length, // Using Owner as admin type
         };
     }
     // Public methods for template
@@ -459,7 +455,7 @@ export class UserManagementComponent {
     updateFilter(partial) {
         this.filters$.next({
             ...this.filters$.value,
-            ...partial
+            ...partial,
         });
     }
     selectUser(user) {
@@ -469,7 +465,7 @@ export class UserManagementComponent {
     createNewUser() {
         this.userDialogData = {
             mode: 'create',
-            availableRoles: this.roles
+            availableRoles: this.roles,
         };
         this.showUserDialog = true;
     }
@@ -477,7 +473,7 @@ export class UserManagementComponent {
         this.userDialogData = {
             user: user,
             mode: 'edit',
-            availableRoles: this.roles
+            availableRoles: this.roles,
         };
         this.showUserDialog = true;
     }
@@ -536,7 +532,7 @@ export class UserManagementComponent {
             const headers = ['Name', 'First Name', 'Last Name', 'Email', 'Type', 'Status', 'Created', 'Updated'];
             const csvRows = [headers.join(',')];
             // Add user data
-            this.filteredUsers.forEach(user => {
+            this.filteredUsers.forEach((user) => {
                 const row = [
                     this.escapeCSV(user.Name || ''),
                     this.escapeCSV(user.FirstName || ''),
@@ -545,7 +541,7 @@ export class UserManagementComponent {
                     this.escapeCSV(user.Type || ''),
                     user.IsActive ? 'Active' : 'Inactive',
                     user.__mj_CreatedAt ? new Date(user.__mj_CreatedAt).toLocaleDateString() : '',
-                    user.__mj_UpdatedAt ? new Date(user.__mj_UpdatedAt).toLocaleDateString() : ''
+                    user.__mj_UpdatedAt ? new Date(user.__mj_UpdatedAt).toLocaleDateString() : '',
                 ];
                 csvRows.push(row.join(','));
             });
@@ -740,19 +736,11 @@ export class UserManagementComponent {
             i0.ɵɵproperty("data", ctx.userDialogData)("visible", ctx.showUserDialog);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedUser ? 76 : -1);
-        } }, dependencies: [CommonModule, i1.DatePipe, FormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, SharedSettingsModule,
-            UserDialogComponent,
-            WindowModule], styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.user-management-container[_ngcontent-%COMP%] {\n  @include scrollable-container;\n  width: 100%;\n  height: 100%;\n}\n\n//[_ngcontent-%COMP%]   Action[_ngcontent-%COMP%]   Buttons\n.action-buttons[_ngcontent-%COMP%] {\n  @include fixed-header;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 1rem 2rem;\n  background: white;\n  border-bottom: 1px solid $border-light;\n\n  @media (max-width: 768px) {\n    justify-content: center;\n    flex-wrap: wrap;\n    padding: 1rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Buttons\n.btn-primary[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #2196f3;\n  color: white;\n  \n  &:hover {\n    background-color: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    transform: none;\n  }\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #ffffff;\n  color: #374151;\n  border: 1px solid #e5e7eb;\n  \n  &:hover {\n    background-color: #f9fafb;\n    border-color: #2196f3;\n    color: #2196f3;\n  }\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #f44336;\n  color: white;\n  \n  &:hover {\n    background-color: #d32f2f;\n  }\n}\n\n//[_ngcontent-%COMP%]   Stats[_ngcontent-%COMP%]   Grid\n.stats-grid[_ngcontent-%COMP%] {\n  @include fixed-header;\n  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  padding: 1rem 2rem;\n  background: white;\n  border-bottom: 1px solid $border-light;\n  width: 100%;\n\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n    padding: 1rem;\n  }\n}\n\n.stat-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  display: flex;\n  margin-right: 10px;\n  align-items: center;\n  gap: 1rem;\n  transition: all 0.3s ease;\n  min-width: 0; // Prevent grid blowout\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.stat-icon[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n\n  &-total {\n    background: rgba(33, 150, 243, 0.1);\n    color: #2196f3;\n  }\n\n  &-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #4caf50;\n  }\n\n  &-inactive {\n    background: rgba(244, 67, 54, 0.1);\n    color: #f44336;\n  }\n\n  &-admin {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n}\n\n.stat-content[_ngcontent-%COMP%] {\n  flex: 1;\n\n  .stat-value {\n    font-size: 2rem;\n    font-weight: 700;\n    color: #1f2937;\n    line-height: 1;\n  }\n\n  .stat-label {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin-top: 0.25rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Filters[_ngcontent-%COMP%]   Section\n.filters-section[_ngcontent-%COMP%] {\n  @include fixed-header;\n  background: white;\n  padding: 1.5rem 2rem;\n  border-bottom: 1px solid $border-light;\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n  }\n}\n\n.filters-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1.5rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    gap: 1rem;\n  }\n}\n\n.search-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 250px;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #6b7280;\n    font-size: 1rem;\n  }\n\n  .search-input {\n    width: 100%;\n    padding: 0.75rem 1rem 0.75rem 2.75rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 0.95rem;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  .filter-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #374151;\n  }\n\n  .filter-buttons {\n    display: flex;\n    background: #f3f4f6;\n    border-radius: 8px;\n    padding: 4px;\n  }\n\n  .filter-btn {\n    padding: 0.5rem 1rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  .filter-select {\n    padding: 0.625rem 1rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    background: white;\n    font-size: 0.875rem;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f3f4f6;\n  border-radius: 8px;\n  padding: 4px;\n\n  .view-btn {\n    padding: 0.5rem 0.75rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1rem;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Content[_ngcontent-%COMP%]   Area\n.content-area[_ngcontent-%COMP%] {\n  @include scrollable-content;\n  padding: 2rem;\n  background: white;\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Table[_ngcontent-%COMP%]   View\n.users-table[_ngcontent-%COMP%] {\n  width: 100%;\n  overflow-x: auto;\n}\n\n.modern-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n\n  thead {\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n\n    th {\n      padding: 1rem;\n      text-align: left;\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: #374151;\n      white-space: nowrap;\n\n      &.th-checkbox {\n        width: 50px;\n      }\n\n      &.th-actions {\n        text-align: center;\n        width: 150px;\n      }\n    }\n  }\n\n  tbody {\n    tr {\n      border-bottom: 1px solid #f3f4f6;\n      transition: background-color 0.2s;\n      cursor: pointer;\n\n      &:hover {\n        background-color: #f9fafb;\n      }\n    }\n\n    td {\n      padding: 1rem;\n      font-size: 0.875rem;\n      color: #374151;\n\n      &.td-checkbox {\n        width: 50px;\n      }\n\n      &.td-actions {\n        text-align: center;\n      }\n    }\n  }\n}\n\n.checkbox[_ngcontent-%COMP%] {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n.user-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.user-avatar[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  font-size: 0.875rem;\n}\n\n.user-avatar-large[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  font-size: 1.5rem;\n  margin: 0 auto 1rem;\n}\n\n.user-info[_ngcontent-%COMP%] {\n  .user-name {\n    font-weight: 600;\n    color: #1f2937;\n  }\n\n  .user-fullname {\n    font-size: 0.75rem;\n    color: #6b7280;\n  }\n}\n\n.user-type[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: #4b5563;\n\n  i {\n    font-size: 0.875rem;\n  }\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.25rem 0.75rem;\n  border-radius: 20px;\n  font-size: 0.75rem;\n  font-weight: 500;\n\n  &.status-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #388e3c;\n  }\n\n  &.status-inactive {\n    background: rgba(244, 67, 54, 0.1);\n    color: #d32f2f;\n  }\n\n  i {\n    font-size: 0.625rem;\n  }\n}\n\n.last-login[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.875rem;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  &:hover {\n    background: #f3f4f6;\n    color: #2196f3;\n  }\n\n  &-danger:hover {\n    color: #f44336;\n  }\n}\n\n//[_ngcontent-%COMP%]   Card[_ngcontent-%COMP%]   View\n.users-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1.5rem;\n  padding: 1.5rem;\n\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n    padding: 1rem;\n  }\n}\n\n.user-card[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  padding: 1.5rem;\n  cursor: pointer;\n  transition: all 0.3s ease;\n\n  &:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n    transform: translateY(-2px);\n    border-color: #2196f3;\n  }\n}\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.card-body[_ngcontent-%COMP%] {\n  text-align: center;\n\n  .user-name {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.25rem 0;\n  }\n\n  .user-fullname {\n    color: #6b7280;\n    margin: 0 0 0.75rem 0;\n  }\n\n  .user-email {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    color: #4b5563;\n    font-size: 0.875rem;\n    margin-bottom: 1rem;\n\n    i {\n      color: #6b7280;\n    }\n  }\n}\n\n.card-meta[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem 0;\n  border-top: 1px solid #f3f4f6;\n  border-bottom: 1px solid #f3f4f6;\n  margin-bottom: 1rem;\n\n  .meta-item {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    color: #4b5563;\n    font-size: 0.875rem;\n  }\n}\n\n.card-footer[_ngcontent-%COMP%] {\n  .last-login {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    color: #6b7280;\n    font-size: 0.75rem;\n\n    i {\n      font-size: 0.875rem;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Empty[_ngcontent-%COMP%]   State\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .empty-icon {\n    font-size: 4rem;\n    color: #e5e7eb;\n    margin-bottom: 1rem;\n  }\n\n  .empty-text {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #374151;\n    margin: 0 0 0.5rem 0;\n  }\n\n  .empty-subtext {\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   State\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin-bottom: 1rem;\n\n  .spinner-ring {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border: 3px solid transparent;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    &:nth-child(1) {\n      border-color: #2196f3 transparent transparent transparent;\n      animation-delay: -0.45s;\n    }\n\n    &:nth-child(2) {\n      border-color: transparent #4caf50 transparent transparent;\n      animation-delay: -0.3s;\n    }\n\n    &:nth-child(3) {\n      border-color: transparent transparent #ff9800 transparent;\n      animation-delay: -0.15s;\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n//[_ngcontent-%COMP%]   Error[_ngcontent-%COMP%]   State\n.error-container[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .error-icon {\n    font-size: 3rem;\n    color: #f44336;\n    margin-bottom: 1rem;\n  }\n\n  .error-message {\n    color: #374151;\n    margin-bottom: 1.5rem;\n  }\n\n  .retry-button {\n    @include button-base;\n    background-color: #2196f3;\n    color: white;\n  }\n}\n\n//[_ngcontent-%COMP%]   Modal[_ngcontent-%COMP%]   Styles\n.modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s ease;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideUp 0.3s ease;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid #e5e7eb;\n\n  .modal-title {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0;\n  }\n\n  .modal-close {\n    padding: 0.5rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1.25rem;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n      background: #f3f4f6;\n      color: #374151;\n    }\n  }\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n\n  p {\n    margin: 0 0 1rem 0;\n    color: #374151;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .text-muted {\n    color: #6b7280;\n    font-size: 0.875rem;\n  }\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid #e5e7eb;\n  background: #f9fafb;\n}\n\n//[_ngcontent-%COMP%]   Animations\n@keyframes[_ngcontent-%COMP%]   fadeIn[_ngcontent-%COMP%] {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n//[_ngcontent-%COMP%]   Utility[_ngcontent-%COMP%]   Classes\n.text-danger[_ngcontent-%COMP%] {\n  color: #f44336;\n}"] });
+        } }, dependencies: [CommonModule, i1.DatePipe, FormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, SharedSettingsModule, UserDialogComponent, WindowModule], styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.user-management-container[_ngcontent-%COMP%] {\n  @include scrollable-container;\n  width: 100%;\n  height: 100%;\n}\n\n//[_ngcontent-%COMP%]   Action[_ngcontent-%COMP%]   Buttons\n.action-buttons[_ngcontent-%COMP%] {\n  @include fixed-header;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 1rem 2rem;\n  background: white;\n  border-bottom: 1px solid $border-light;\n\n  @media (max-width: 768px) {\n    justify-content: center;\n    flex-wrap: wrap;\n    padding: 1rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Buttons\n.btn-primary[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #2196f3;\n  color: white;\n  \n  &:hover {\n    background-color: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    transform: none;\n  }\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #ffffff;\n  color: #374151;\n  border: 1px solid #e5e7eb;\n  \n  &:hover {\n    background-color: #f9fafb;\n    border-color: #2196f3;\n    color: #2196f3;\n  }\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n  @include button-base;\n  background-color: #f44336;\n  color: white;\n  \n  &:hover {\n    background-color: #d32f2f;\n  }\n}\n\n//[_ngcontent-%COMP%]   Stats[_ngcontent-%COMP%]   Grid\n.stats-grid[_ngcontent-%COMP%] {\n  @include fixed-header;\n  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  padding: 1rem 2rem;\n  background: white;\n  border-bottom: 1px solid $border-light;\n  width: 100%;\n\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n    padding: 1rem;\n  }\n}\n\n.stat-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  display: flex;\n  margin-right: 10px;\n  align-items: center;\n  gap: 1rem;\n  transition: all 0.3s ease;\n  min-width: 0; // Prevent grid blowout\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.stat-icon[_ngcontent-%COMP%] {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n\n  &-total {\n    background: rgba(33, 150, 243, 0.1);\n    color: #2196f3;\n  }\n\n  &-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #4caf50;\n  }\n\n  &-inactive {\n    background: rgba(244, 67, 54, 0.1);\n    color: #f44336;\n  }\n\n  &-admin {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n}\n\n.stat-content[_ngcontent-%COMP%] {\n  flex: 1;\n\n  .stat-value {\n    font-size: 2rem;\n    font-weight: 700;\n    color: #1f2937;\n    line-height: 1;\n  }\n\n  .stat-label {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin-top: 0.25rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Filters[_ngcontent-%COMP%]   Section\n.filters-section[_ngcontent-%COMP%] {\n  @include fixed-header;\n  background: white;\n  padding: 1.5rem 2rem;\n  border-bottom: 1px solid $border-light;\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n  }\n}\n\n.filters-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 1.5rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    gap: 1rem;\n  }\n}\n\n.search-container[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 250px;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #6b7280;\n    font-size: 1rem;\n  }\n\n  .search-input {\n    width: 100%;\n    padding: 0.75rem 1rem 0.75rem 2.75rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 0.95rem;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.filter-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  .filter-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #374151;\n  }\n\n  .filter-buttons {\n    display: flex;\n    background: #f3f4f6;\n    border-radius: 8px;\n    padding: 4px;\n  }\n\n  .filter-btn {\n    padding: 0.5rem 1rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  .filter-select {\n    padding: 0.625rem 1rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    background: white;\n    font-size: 0.875rem;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background: #f3f4f6;\n  border-radius: 8px;\n  padding: 4px;\n\n  .view-btn {\n    padding: 0.5rem 0.75rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1rem;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Content[_ngcontent-%COMP%]   Area\n.content-area[_ngcontent-%COMP%] {\n  @include scrollable-content;\n  padding: 2rem;\n  background: white;\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n  }\n}\n\n//[_ngcontent-%COMP%]   Table[_ngcontent-%COMP%]   View\n.users-table[_ngcontent-%COMP%] {\n  width: 100%;\n  overflow-x: auto;\n}\n\n.modern-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n\n  thead {\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n\n    th {\n      padding: 1rem;\n      text-align: left;\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: #374151;\n      white-space: nowrap;\n\n      &.th-checkbox {\n        width: 50px;\n      }\n\n      &.th-actions {\n        text-align: center;\n        width: 150px;\n      }\n    }\n  }\n\n  tbody {\n    tr {\n      border-bottom: 1px solid #f3f4f6;\n      transition: background-color 0.2s;\n      cursor: pointer;\n\n      &:hover {\n        background-color: #f9fafb;\n      }\n    }\n\n    td {\n      padding: 1rem;\n      font-size: 0.875rem;\n      color: #374151;\n\n      &.td-checkbox {\n        width: 50px;\n      }\n\n      &.td-actions {\n        text-align: center;\n      }\n    }\n  }\n}\n\n.checkbox[_ngcontent-%COMP%] {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n.user-cell[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.user-avatar[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  font-size: 0.875rem;\n}\n\n.user-avatar-large[_ngcontent-%COMP%] {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  font-size: 1.5rem;\n  margin: 0 auto 1rem;\n}\n\n.user-info[_ngcontent-%COMP%] {\n  .user-name {\n    font-weight: 600;\n    color: #1f2937;\n  }\n\n  .user-fullname {\n    font-size: 0.75rem;\n    color: #6b7280;\n  }\n}\n\n.user-type[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: #4b5563;\n\n  i {\n    font-size: 0.875rem;\n  }\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.25rem 0.75rem;\n  border-radius: 20px;\n  font-size: 0.75rem;\n  font-weight: 500;\n\n  &.status-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #388e3c;\n  }\n\n  &.status-inactive {\n    background: rgba(244, 67, 54, 0.1);\n    color: #d32f2f;\n  }\n\n  i {\n    font-size: 0.625rem;\n  }\n}\n\n.last-login[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.875rem;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  &:hover {\n    background: #f3f4f6;\n    color: #2196f3;\n  }\n\n  &-danger:hover {\n    color: #f44336;\n  }\n}\n\n//[_ngcontent-%COMP%]   Card[_ngcontent-%COMP%]   View\n.users-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1.5rem;\n  padding: 1.5rem;\n\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n    padding: 1rem;\n  }\n}\n\n.user-card[_ngcontent-%COMP%] {\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  padding: 1.5rem;\n  cursor: pointer;\n  transition: all 0.3s ease;\n\n  &:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n    transform: translateY(-2px);\n    border-color: #2196f3;\n  }\n}\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.card-body[_ngcontent-%COMP%] {\n  text-align: center;\n\n  .user-name {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.25rem 0;\n  }\n\n  .user-fullname {\n    color: #6b7280;\n    margin: 0 0 0.75rem 0;\n  }\n\n  .user-email {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    color: #4b5563;\n    font-size: 0.875rem;\n    margin-bottom: 1rem;\n\n    i {\n      color: #6b7280;\n    }\n  }\n}\n\n.card-meta[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem 0;\n  border-top: 1px solid #f3f4f6;\n  border-bottom: 1px solid #f3f4f6;\n  margin-bottom: 1rem;\n\n  .meta-item {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    color: #4b5563;\n    font-size: 0.875rem;\n  }\n}\n\n.card-footer[_ngcontent-%COMP%] {\n  .last-login {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    color: #6b7280;\n    font-size: 0.75rem;\n\n    i {\n      font-size: 0.875rem;\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Empty[_ngcontent-%COMP%]   State\n.empty-state[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .empty-icon {\n    font-size: 4rem;\n    color: #e5e7eb;\n    margin-bottom: 1rem;\n  }\n\n  .empty-text {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #374151;\n    margin: 0 0 0.5rem 0;\n  }\n\n  .empty-subtext {\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n//[_ngcontent-%COMP%]   Loading[_ngcontent-%COMP%]   State\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin-bottom: 1rem;\n\n  .spinner-ring {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border: 3px solid transparent;\n    border-radius: 50%;\n    animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    &:nth-child(1) {\n      border-color: #2196f3 transparent transparent transparent;\n      animation-delay: -0.45s;\n    }\n\n    &:nth-child(2) {\n      border-color: transparent #4caf50 transparent transparent;\n      animation-delay: -0.3s;\n    }\n\n    &:nth-child(3) {\n      border-color: transparent transparent #ff9800 transparent;\n      animation-delay: -0.15s;\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n//[_ngcontent-%COMP%]   Error[_ngcontent-%COMP%]   State\n.error-container[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .error-icon {\n    font-size: 3rem;\n    color: #f44336;\n    margin-bottom: 1rem;\n  }\n\n  .error-message {\n    color: #374151;\n    margin-bottom: 1.5rem;\n  }\n\n  .retry-button {\n    @include button-base;\n    background-color: #2196f3;\n    color: white;\n  }\n}\n\n//[_ngcontent-%COMP%]   Modal[_ngcontent-%COMP%]   Styles\n.modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s ease;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_slideUp 0.3s ease;\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid #e5e7eb;\n\n  .modal-title {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0;\n  }\n\n  .modal-close {\n    padding: 0.5rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1.25rem;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n      background: #f3f4f6;\n      color: #374151;\n    }\n  }\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 1.5rem;\n\n  p {\n    margin: 0 0 1rem 0;\n    color: #374151;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .text-muted {\n    color: #6b7280;\n    font-size: 0.875rem;\n  }\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid #e5e7eb;\n  background: #f9fafb;\n}\n\n//[_ngcontent-%COMP%]   Animations\n@keyframes[_ngcontent-%COMP%]   fadeIn[_ngcontent-%COMP%] {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n//[_ngcontent-%COMP%]   Utility[_ngcontent-%COMP%]   Classes\n.text-danger[_ngcontent-%COMP%] {\n  color: #f44336;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserManagementComponent, [{
         type: Component,
-        args: [{ selector: 'mj-user-management', standalone: true, imports: [
-                    CommonModule,
-                    FormsModule,
-                    SharedSettingsModule,
-                    UserDialogComponent,
-                    WindowModule
-                ], template: "<div class=\"user-management-container\">\n  <!-- Action Buttons -->\n  <div class=\"action-buttons\">\n    <button class=\"mj-btn mj-btn-secondary\" (click)=\"refreshData()\" [disabled]=\"isLoading\">\n      <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n      Refresh\n    </button>\n    <button class=\"mj-btn mj-btn-secondary\" (click)=\"exportUsers()\">\n      <i class=\"fa-solid fa-download\"></i>\n      Export\n    </button>\n    <button class=\"mj-btn mj-btn-primary\" (click)=\"createNewUser()\">\n      <i class=\"fa-solid fa-plus\"></i>\n      Add User\n    </button>\n  </div>\n\n  <!-- Stats Cards -->\n  <div class=\"mj-grid mj-grid-4\">\n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-total\">\n        <i class=\"fa-solid fa-users\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.totalUsers }}</div>\n        <div class=\"stat-label\">Total Users</div>\n      </div>\n    </div>\n    \n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-active\">\n        <i class=\"fa-solid fa-user-check\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.activeUsers }}</div>\n        <div class=\"stat-label\">Active Users</div>\n      </div>\n    </div>\n    \n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-inactive\">\n        <i class=\"fa-solid fa-user-xmark\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.inactiveUsers }}</div>\n        <div class=\"stat-label\">Inactive Users</div>\n      </div>\n    </div>\n    \n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-admin\">\n        <i class=\"fa-solid fa-shield-halved\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.adminUsers }}</div>\n        <div class=\"stat-label\">Owners</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Filters Section -->\n  <div class=\"filters-section\">\n    <div class=\"filters-row\">\n      <!-- Search -->\n      <div class=\"search-container\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input \n          type=\"text\" \n          class=\"search-input\" \n          placeholder=\"Search users by name or email...\"\n          (input)=\"onSearchChange($event)\"\n          [value]=\"filters$.value.search\"\n        />\n      </div>\n      \n      <!-- Status Filter -->\n      <div class=\"filter-group\">\n        <label class=\"filter-label\">Status</label>\n        <div class=\"filter-buttons\">\n          <button \n            class=\"mj-btn mj-btn-ghost\"\n            [class.mj-btn-primary]=\"filters$.value.status === 'all'\"\n            (click)=\"onStatusFilterChange('all')\"\n          >\n            All\n          </button>\n          <button \n            class=\"mj-btn mj-btn-ghost\"\n            [class.mj-btn-primary]=\"filters$.value.status === 'active'\"\n            (click)=\"onStatusFilterChange('active')\"\n          >\n            Active\n          </button>\n          <button \n            class=\"mj-btn mj-btn-ghost\"\n            [class.mj-btn-primary]=\"filters$.value.status === 'inactive'\"\n            (click)=\"onStatusFilterChange('inactive')\"\n          >\n            Inactive\n          </button>\n        </div>\n      </div>\n      \n      <!-- Role Filter -->\n      <div class=\"filter-group\">\n        <label class=\"filter-label\">Role</label>\n        <select class=\"filter-select\" (change)=\"onRoleFilterChange($any($event.target).value)\">\n          <option value=\"\">All Roles</option>\n          @for (role of roles; track role.ID) {\n            <option [value]=\"role.ID\">{{ role.Name }}</option>\n          }\n        </select>\n      </div>\n      \n      <!-- View Toggle -->\n      <div class=\"view-toggle\">\n        <button \n          class=\"mj-btn mj-btn-icon-only\"\n          [class.mj-btn-primary]=\"viewMode === 'grid'\"\n          [class.mj-btn-ghost]=\"viewMode !== 'grid'\"\n          (click)=\"viewMode = 'grid'\"\n          title=\"Grid View\"\n        >\n          <i class=\"fa-solid fa-table\"></i>\n        </button>\n        <button \n          class=\"mj-btn mj-btn-icon-only\"\n          [class.mj-btn-primary]=\"viewMode === 'cards'\"\n          [class.mj-btn-ghost]=\"viewMode !== 'cards'\"\n          (click)=\"viewMode = 'cards'\"\n          title=\"Card View\"\n        >\n          <i class=\"fa-solid fa-th-large\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-spinner\">\n        <div class=\"spinner-ring\"></div>\n        <div class=\"spinner-ring\"></div>\n        <div class=\"spinner-ring\"></div>\n      </div>\n      <div class=\"loading-text\">Loading users...</div>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error && !isLoading) {\n    <div class=\"error-container\">\n      <div class=\"error-content\">\n        <i class=\"fa-solid fa-exclamation-triangle error-icon\"></i>\n        <p class=\"error-message\">{{ error }}</p>\n        <button class=\"retry-button\" (click)=\"loadInitialData()\">\n          <i class=\"fa-solid fa-refresh\"></i>\n          Try Again\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Content Area -->\n  @if (!isLoading && !error) {\n    <div class=\"content-area\">\n      <!-- Grid View -->\n      @if (viewMode === 'grid') {\n        <div class=\"users-table\">\n          <table class=\"modern-table\">\n            <thead>\n              <tr>\n                <th class=\"th-checkbox\">\n                  <input type=\"checkbox\" class=\"checkbox\" />\n                </th>\n                <th>User</th>\n                <th>Email</th>\n                <th>Type</th>\n                <th>Status</th>\n                <th>Last Updated</th>\n                <th class=\"th-actions\">Actions</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (user of filteredUsers; track user.ID) {\n                <tr class=\"table-row\" (click)=\"selectUser(user)\">\n                  <td class=\"td-checkbox\" (click)=\"$event.stopPropagation()\">\n                    <input type=\"checkbox\" class=\"checkbox\" />\n                  </td>\n                  <td>\n                    <div class=\"user-cell\">\n                      <div class=\"user-avatar\">\n                        {{ getUserInitials(user) }}\n                      </div>\n                      <div class=\"user-info\">\n                        <div class=\"user-name\">{{ user.Name }}</div>\n                        <div class=\"user-fullname\">\n                          {{ user.FirstName }} {{ user.LastName }}\n                        </div>\n                      </div>\n                    </div>\n                  </td>\n                  <td>{{ user.Email }}</td>\n                  <td>\n                    <div class=\"user-type\">\n                      <i [class]=\"'fa-solid ' + getUserTypeIcon(user)\"></i>\n                      {{ user.Type }}\n                    </div>\n                  </td>\n                  <td>\n                    <span class=\"status-badge\" [class]=\"getStatusClass(user)\">\n                      <i [class]=\"'fa-solid ' + getStatusIcon(user)\"></i>\n                      {{ user.IsActive ? 'Active' : 'Inactive' }}\n                    </span>\n                  </td>\n                  <td>\n                    <span class=\"last-login\">\n                      {{ user.__mj_UpdatedAt ? (user.__mj_UpdatedAt | date:'short') : 'Never' }}\n                    </span>\n                  </td>\n                  <td class=\"td-actions\" (click)=\"$event.stopPropagation()\">\n                    <button class=\"mj-btn mj-btn-ghost mj-btn-sm\" (click)=\"editUser(user)\" title=\"Edit\">\n                      <i class=\"fa-solid fa-edit\"></i>\n                    </button>\n                    <button \n                      class=\"mj-btn mj-btn-ghost mj-btn-sm\" \n                      (click)=\"toggleUserStatus(user)\"\n                      [title]=\"user.IsActive ? 'Deactivate' : 'Activate'\"\n                    >\n                      <i [class]=\"user.IsActive ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'\"></i>\n                    </button>\n                    <button class=\"mj-btn mj-btn-ghost mj-btn-sm text-danger\" (click)=\"confirmDeleteUser(user)\" title=\"Delete\">\n                      <i class=\"fa-solid fa-trash\"></i>\n                    </button>\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n          \n          @if (filteredUsers.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-users-slash empty-icon\"></i>\n              <p class=\"empty-text\">No users found</p>\n              <p class=\"empty-subtext\">Try adjusting your filters or add a new user</p>\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Card View -->\n      @if (viewMode === 'cards') {\n        <div class=\"users-grid\">\n          @for (user of filteredUsers; track user.ID) {\n            <div class=\"user-card\" (click)=\"selectUser(user)\">\n              <div class=\"card-header\">\n                <div class=\"user-avatar-large\">\n                  {{ getUserInitials(user) }}\n                </div>\n                <div class=\"card-actions\">\n                  <button class=\"mj-btn mj-btn-ghost mj-btn-sm\" (click)=\"editUser(user); $event.stopPropagation()\" title=\"Edit\">\n                    <i class=\"fa-solid fa-edit\"></i>\n                  </button>\n                  <button class=\"mj-btn mj-btn-ghost mj-btn-sm text-danger\" (click)=\"confirmDeleteUser(user); $event.stopPropagation()\" title=\"Delete\">\n                    <i class=\"fa-solid fa-trash\"></i>\n                  </button>\n                </div>\n              </div>\n              \n              <div class=\"card-body\">\n                <h3 class=\"user-name\">{{ user.Name }}</h3>\n                <p class=\"user-fullname\">{{ user.FirstName }} {{ user.LastName }}</p>\n                <p class=\"user-email\">\n                  <i class=\"fa-solid fa-envelope\"></i>\n                  {{ user.Email }}\n                </p>\n                \n                <div class=\"card-meta\">\n                  <div class=\"meta-item\">\n                    <i [class]=\"'fa-solid ' + getUserTypeIcon(user)\"></i>\n                    {{ user.Type }}\n                  </div>\n                  <span class=\"status-badge\" [class]=\"getStatusClass(user)\">\n                    <i [class]=\"'fa-solid ' + getStatusIcon(user)\"></i>\n                    {{ user.IsActive ? 'Active' : 'Inactive' }}\n                  </span>\n                </div>\n                \n                <div class=\"card-footer\">\n                  <div class=\"last-login\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    Last updated: {{ user.__mj_UpdatedAt ? (user.__mj_UpdatedAt | date:'short') : 'Never' }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n          \n          @if (filteredUsers.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-users-slash empty-icon\"></i>\n              <p class=\"empty-text\">No users found</p>\n              <p class=\"empty-subtext\">Try adjusting your filters or add a new user</p>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- User Create/Edit Dialog -->\n  <mj-user-dialog \n    [data]=\"userDialogData\"\n    [visible]=\"showUserDialog\"\n    (result)=\"onUserDialogResult($event)\">\n  </mj-user-dialog>\n\n  <!-- Delete Confirmation Dialog -->\n  @if (showDeleteConfirm && selectedUser) {\n    <div class=\"modal-backdrop\" (click)=\"showDeleteConfirm = false\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\">\n            <i class=\"fa-solid fa-exclamation-triangle text-danger\"></i>\n            Confirm Delete\n          </h3>\n          <button class=\"modal-close\" (click)=\"showDeleteConfirm = false\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Are you sure you want to delete user <strong>{{ selectedUser.Name }}</strong>?</p>\n          <p class=\"text-muted\">This action cannot be undone.</p>\n        </div>\n        <div class=\"modal-footer\">\n          <button class=\"mj-btn mj-btn-secondary\" (click)=\"showDeleteConfirm = false\">Cancel</button>\n          <button class=\"mj-btn mj-btn-primary text-danger\" (click)=\"deleteUser()\">\n            <i class=\"fa-solid fa-trash\"></i>\n            Delete User\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>", styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.user-management-container {\n  @include scrollable-container;\n  width: 100%;\n  height: 100%;\n}\n\n// Action Buttons\n.action-buttons {\n  @include fixed-header;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 1rem 2rem;\n  background: white;\n  border-bottom: 1px solid $border-light;\n\n  @media (max-width: 768px) {\n    justify-content: center;\n    flex-wrap: wrap;\n    padding: 1rem;\n  }\n}\n\n// Buttons\n.btn-primary {\n  @include button-base;\n  background-color: #2196f3;\n  color: white;\n  \n  &:hover {\n    background-color: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    transform: none;\n  }\n}\n\n.btn-secondary {\n  @include button-base;\n  background-color: #ffffff;\n  color: #374151;\n  border: 1px solid #e5e7eb;\n  \n  &:hover {\n    background-color: #f9fafb;\n    border-color: #2196f3;\n    color: #2196f3;\n  }\n}\n\n.btn-danger {\n  @include button-base;\n  background-color: #f44336;\n  color: white;\n  \n  &:hover {\n    background-color: #d32f2f;\n  }\n}\n\n// Stats Grid\n.stats-grid {\n  @include fixed-header;\n  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  padding: 1rem 2rem;\n  background: white;\n  border-bottom: 1px solid $border-light;\n  width: 100%;\n\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n    padding: 1rem;\n  }\n}\n\n.stat-card {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  display: flex;\n  margin-right: 10px;\n  align-items: center;\n  gap: 1rem;\n  transition: all 0.3s ease;\n  min-width: 0; // Prevent grid blowout\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.stat-icon {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n\n  &-total {\n    background: rgba(33, 150, 243, 0.1);\n    color: #2196f3;\n  }\n\n  &-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #4caf50;\n  }\n\n  &-inactive {\n    background: rgba(244, 67, 54, 0.1);\n    color: #f44336;\n  }\n\n  &-admin {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n}\n\n.stat-content {\n  flex: 1;\n\n  .stat-value {\n    font-size: 2rem;\n    font-weight: 700;\n    color: #1f2937;\n    line-height: 1;\n  }\n\n  .stat-label {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin-top: 0.25rem;\n  }\n}\n\n// Filters Section\n.filters-section {\n  @include fixed-header;\n  background: white;\n  padding: 1.5rem 2rem;\n  border-bottom: 1px solid $border-light;\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n  }\n}\n\n.filters-row {\n  display: flex;\n  gap: 1.5rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    gap: 1rem;\n  }\n}\n\n.search-container {\n  flex: 1;\n  min-width: 250px;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #6b7280;\n    font-size: 1rem;\n  }\n\n  .search-input {\n    width: 100%;\n    padding: 0.75rem 1rem 0.75rem 2.75rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 0.95rem;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  .filter-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #374151;\n  }\n\n  .filter-buttons {\n    display: flex;\n    background: #f3f4f6;\n    border-radius: 8px;\n    padding: 4px;\n  }\n\n  .filter-btn {\n    padding: 0.5rem 1rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  .filter-select {\n    padding: 0.625rem 1rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    background: white;\n    font-size: 0.875rem;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.view-toggle {\n  display: flex;\n  background: #f3f4f6;\n  border-radius: 8px;\n  padding: 4px;\n\n  .view-btn {\n    padding: 0.5rem 0.75rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1rem;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n}\n\n// Content Area\n.content-area {\n  @include scrollable-content;\n  padding: 2rem;\n  background: white;\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n  }\n}\n\n// Table View\n.users-table {\n  width: 100%;\n  overflow-x: auto;\n}\n\n.modern-table {\n  width: 100%;\n  border-collapse: collapse;\n\n  thead {\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n\n    th {\n      padding: 1rem;\n      text-align: left;\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: #374151;\n      white-space: nowrap;\n\n      &.th-checkbox {\n        width: 50px;\n      }\n\n      &.th-actions {\n        text-align: center;\n        width: 150px;\n      }\n    }\n  }\n\n  tbody {\n    tr {\n      border-bottom: 1px solid #f3f4f6;\n      transition: background-color 0.2s;\n      cursor: pointer;\n\n      &:hover {\n        background-color: #f9fafb;\n      }\n    }\n\n    td {\n      padding: 1rem;\n      font-size: 0.875rem;\n      color: #374151;\n\n      &.td-checkbox {\n        width: 50px;\n      }\n\n      &.td-actions {\n        text-align: center;\n      }\n    }\n  }\n}\n\n.checkbox {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n.user-cell {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.user-avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  font-size: 0.875rem;\n}\n\n.user-avatar-large {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  font-size: 1.5rem;\n  margin: 0 auto 1rem;\n}\n\n.user-info {\n  .user-name {\n    font-weight: 600;\n    color: #1f2937;\n  }\n\n  .user-fullname {\n    font-size: 0.75rem;\n    color: #6b7280;\n  }\n}\n\n.user-type {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: #4b5563;\n\n  i {\n    font-size: 0.875rem;\n  }\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.25rem 0.75rem;\n  border-radius: 20px;\n  font-size: 0.75rem;\n  font-weight: 500;\n\n  &.status-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #388e3c;\n  }\n\n  &.status-inactive {\n    background: rgba(244, 67, 54, 0.1);\n    color: #d32f2f;\n  }\n\n  i {\n    font-size: 0.625rem;\n  }\n}\n\n.last-login {\n  color: #6b7280;\n  font-size: 0.875rem;\n}\n\n.action-btn {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  &:hover {\n    background: #f3f4f6;\n    color: #2196f3;\n  }\n\n  &-danger:hover {\n    color: #f44336;\n  }\n}\n\n// Card View\n.users-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1.5rem;\n  padding: 1.5rem;\n\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n    padding: 1rem;\n  }\n}\n\n.user-card {\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  padding: 1.5rem;\n  cursor: pointer;\n  transition: all 0.3s ease;\n\n  &:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n    transform: translateY(-2px);\n    border-color: #2196f3;\n  }\n}\n\n.card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n}\n\n.card-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.card-body {\n  text-align: center;\n\n  .user-name {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.25rem 0;\n  }\n\n  .user-fullname {\n    color: #6b7280;\n    margin: 0 0 0.75rem 0;\n  }\n\n  .user-email {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    color: #4b5563;\n    font-size: 0.875rem;\n    margin-bottom: 1rem;\n\n    i {\n      color: #6b7280;\n    }\n  }\n}\n\n.card-meta {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem 0;\n  border-top: 1px solid #f3f4f6;\n  border-bottom: 1px solid #f3f4f6;\n  margin-bottom: 1rem;\n\n  .meta-item {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    color: #4b5563;\n    font-size: 0.875rem;\n  }\n}\n\n.card-footer {\n  .last-login {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    color: #6b7280;\n    font-size: 0.75rem;\n\n    i {\n      font-size: 0.875rem;\n    }\n  }\n}\n\n// Empty State\n.empty-state {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .empty-icon {\n    font-size: 4rem;\n    color: #e5e7eb;\n    margin-bottom: 1rem;\n  }\n\n  .empty-text {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #374151;\n    margin: 0 0 0.5rem 0;\n  }\n\n  .empty-subtext {\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n// Loading State\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin-bottom: 1rem;\n\n  .spinner-ring {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border: 3px solid transparent;\n    border-radius: 50%;\n    animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    &:nth-child(1) {\n      border-color: #2196f3 transparent transparent transparent;\n      animation-delay: -0.45s;\n    }\n\n    &:nth-child(2) {\n      border-color: transparent #4caf50 transparent transparent;\n      animation-delay: -0.3s;\n    }\n\n    &:nth-child(3) {\n      border-color: transparent transparent #ff9800 transparent;\n      animation-delay: -0.15s;\n    }\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n// Error State\n.error-container {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .error-icon {\n    font-size: 3rem;\n    color: #f44336;\n    margin-bottom: 1rem;\n  }\n\n  .error-message {\n    color: #374151;\n    margin-bottom: 1.5rem;\n  }\n\n  .retry-button {\n    @include button-base;\n    background-color: #2196f3;\n    color: white;\n  }\n}\n\n// Modal Styles\n.modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s ease;\n}\n\n.modal-dialog {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: slideUp 0.3s ease;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid #e5e7eb;\n\n  .modal-title {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0;\n  }\n\n  .modal-close {\n    padding: 0.5rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1.25rem;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n      background: #f3f4f6;\n      color: #374151;\n    }\n  }\n}\n\n.modal-body {\n  padding: 1.5rem;\n\n  p {\n    margin: 0 0 1rem 0;\n    color: #374151;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .text-muted {\n    color: #6b7280;\n    font-size: 0.875rem;\n  }\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid #e5e7eb;\n  background: #f9fafb;\n}\n\n// Animations\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n// Utility Classes\n.text-danger {\n  color: #f44336;\n}"] }]
+        args: [{ selector: 'mj-user-management', standalone: true, imports: [CommonModule, FormsModule, SharedSettingsModule, UserDialogComponent, WindowModule], template: "<div class=\"user-management-container\">\n  <!-- Action Buttons -->\n  <div class=\"action-buttons\">\n    <button class=\"mj-btn mj-btn-secondary\" (click)=\"refreshData()\" [disabled]=\"isLoading\">\n      <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n      Refresh\n    </button>\n    <button class=\"mj-btn mj-btn-secondary\" (click)=\"exportUsers()\">\n      <i class=\"fa-solid fa-download\"></i>\n      Export\n    </button>\n    <button class=\"mj-btn mj-btn-primary\" (click)=\"createNewUser()\">\n      <i class=\"fa-solid fa-plus\"></i>\n      Add User\n    </button>\n  </div>\n\n  <!-- Stats Cards -->\n  <div class=\"mj-grid mj-grid-4\">\n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-total\">\n        <i class=\"fa-solid fa-users\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.totalUsers }}</div>\n        <div class=\"stat-label\">Total Users</div>\n      </div>\n    </div>\n    \n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-active\">\n        <i class=\"fa-solid fa-user-check\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.activeUsers }}</div>\n        <div class=\"stat-label\">Active Users</div>\n      </div>\n    </div>\n    \n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-inactive\">\n        <i class=\"fa-solid fa-user-xmark\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.inactiveUsers }}</div>\n        <div class=\"stat-label\">Inactive Users</div>\n      </div>\n    </div>\n    \n    <div class=\"mj-card\">\n      <div class=\"stat-icon stat-icon-admin\">\n        <i class=\"fa-solid fa-shield-halved\"></i>\n      </div>\n      <div class=\"stat-content\">\n        <div class=\"stat-value\">{{ stats.adminUsers }}</div>\n        <div class=\"stat-label\">Owners</div>\n      </div>\n    </div>\n  </div>\n\n  <!-- Filters Section -->\n  <div class=\"filters-section\">\n    <div class=\"filters-row\">\n      <!-- Search -->\n      <div class=\"search-container\">\n        <i class=\"fa-solid fa-search search-icon\"></i>\n        <input \n          type=\"text\" \n          class=\"search-input\" \n          placeholder=\"Search users by name or email...\"\n          (input)=\"onSearchChange($event)\"\n          [value]=\"filters$.value.search\"\n        />\n      </div>\n      \n      <!-- Status Filter -->\n      <div class=\"filter-group\">\n        <label class=\"filter-label\">Status</label>\n        <div class=\"filter-buttons\">\n          <button \n            class=\"mj-btn mj-btn-ghost\"\n            [class.mj-btn-primary]=\"filters$.value.status === 'all'\"\n            (click)=\"onStatusFilterChange('all')\"\n          >\n            All\n          </button>\n          <button \n            class=\"mj-btn mj-btn-ghost\"\n            [class.mj-btn-primary]=\"filters$.value.status === 'active'\"\n            (click)=\"onStatusFilterChange('active')\"\n          >\n            Active\n          </button>\n          <button \n            class=\"mj-btn mj-btn-ghost\"\n            [class.mj-btn-primary]=\"filters$.value.status === 'inactive'\"\n            (click)=\"onStatusFilterChange('inactive')\"\n          >\n            Inactive\n          </button>\n        </div>\n      </div>\n      \n      <!-- Role Filter -->\n      <div class=\"filter-group\">\n        <label class=\"filter-label\">Role</label>\n        <select class=\"filter-select\" (change)=\"onRoleFilterChange($any($event.target).value)\">\n          <option value=\"\">All Roles</option>\n          @for (role of roles; track role.ID) {\n            <option [value]=\"role.ID\">{{ role.Name }}</option>\n          }\n        </select>\n      </div>\n      \n      <!-- View Toggle -->\n      <div class=\"view-toggle\">\n        <button \n          class=\"mj-btn mj-btn-icon-only\"\n          [class.mj-btn-primary]=\"viewMode === 'grid'\"\n          [class.mj-btn-ghost]=\"viewMode !== 'grid'\"\n          (click)=\"viewMode = 'grid'\"\n          title=\"Grid View\"\n        >\n          <i class=\"fa-solid fa-table\"></i>\n        </button>\n        <button \n          class=\"mj-btn mj-btn-icon-only\"\n          [class.mj-btn-primary]=\"viewMode === 'cards'\"\n          [class.mj-btn-ghost]=\"viewMode !== 'cards'\"\n          (click)=\"viewMode = 'cards'\"\n          title=\"Card View\"\n        >\n          <i class=\"fa-solid fa-th-large\"></i>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-spinner\">\n        <div class=\"spinner-ring\"></div>\n        <div class=\"spinner-ring\"></div>\n        <div class=\"spinner-ring\"></div>\n      </div>\n      <div class=\"loading-text\">Loading users...</div>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error && !isLoading) {\n    <div class=\"error-container\">\n      <div class=\"error-content\">\n        <i class=\"fa-solid fa-exclamation-triangle error-icon\"></i>\n        <p class=\"error-message\">{{ error }}</p>\n        <button class=\"retry-button\" (click)=\"loadInitialData()\">\n          <i class=\"fa-solid fa-refresh\"></i>\n          Try Again\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Content Area -->\n  @if (!isLoading && !error) {\n    <div class=\"content-area\">\n      <!-- Grid View -->\n      @if (viewMode === 'grid') {\n        <div class=\"users-table\">\n          <table class=\"modern-table\">\n            <thead>\n              <tr>\n                <th class=\"th-checkbox\">\n                  <input type=\"checkbox\" class=\"checkbox\" />\n                </th>\n                <th>User</th>\n                <th>Email</th>\n                <th>Type</th>\n                <th>Status</th>\n                <th>Last Updated</th>\n                <th class=\"th-actions\">Actions</th>\n              </tr>\n            </thead>\n            <tbody>\n              @for (user of filteredUsers; track user.ID) {\n                <tr class=\"table-row\" (click)=\"selectUser(user)\">\n                  <td class=\"td-checkbox\" (click)=\"$event.stopPropagation()\">\n                    <input type=\"checkbox\" class=\"checkbox\" />\n                  </td>\n                  <td>\n                    <div class=\"user-cell\">\n                      <div class=\"user-avatar\">\n                        {{ getUserInitials(user) }}\n                      </div>\n                      <div class=\"user-info\">\n                        <div class=\"user-name\">{{ user.Name }}</div>\n                        <div class=\"user-fullname\">\n                          {{ user.FirstName }} {{ user.LastName }}\n                        </div>\n                      </div>\n                    </div>\n                  </td>\n                  <td>{{ user.Email }}</td>\n                  <td>\n                    <div class=\"user-type\">\n                      <i [class]=\"'fa-solid ' + getUserTypeIcon(user)\"></i>\n                      {{ user.Type }}\n                    </div>\n                  </td>\n                  <td>\n                    <span class=\"status-badge\" [class]=\"getStatusClass(user)\">\n                      <i [class]=\"'fa-solid ' + getStatusIcon(user)\"></i>\n                      {{ user.IsActive ? 'Active' : 'Inactive' }}\n                    </span>\n                  </td>\n                  <td>\n                    <span class=\"last-login\">\n                      {{ user.__mj_UpdatedAt ? (user.__mj_UpdatedAt | date:'short') : 'Never' }}\n                    </span>\n                  </td>\n                  <td class=\"td-actions\" (click)=\"$event.stopPropagation()\">\n                    <button class=\"mj-btn mj-btn-ghost mj-btn-sm\" (click)=\"editUser(user)\" title=\"Edit\">\n                      <i class=\"fa-solid fa-edit\"></i>\n                    </button>\n                    <button \n                      class=\"mj-btn mj-btn-ghost mj-btn-sm\" \n                      (click)=\"toggleUserStatus(user)\"\n                      [title]=\"user.IsActive ? 'Deactivate' : 'Activate'\"\n                    >\n                      <i [class]=\"user.IsActive ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'\"></i>\n                    </button>\n                    <button class=\"mj-btn mj-btn-ghost mj-btn-sm text-danger\" (click)=\"confirmDeleteUser(user)\" title=\"Delete\">\n                      <i class=\"fa-solid fa-trash\"></i>\n                    </button>\n                  </td>\n                </tr>\n              }\n            </tbody>\n          </table>\n          \n          @if (filteredUsers.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-users-slash empty-icon\"></i>\n              <p class=\"empty-text\">No users found</p>\n              <p class=\"empty-subtext\">Try adjusting your filters or add a new user</p>\n            </div>\n          }\n        </div>\n      }\n\n      <!-- Card View -->\n      @if (viewMode === 'cards') {\n        <div class=\"users-grid\">\n          @for (user of filteredUsers; track user.ID) {\n            <div class=\"user-card\" (click)=\"selectUser(user)\">\n              <div class=\"card-header\">\n                <div class=\"user-avatar-large\">\n                  {{ getUserInitials(user) }}\n                </div>\n                <div class=\"card-actions\">\n                  <button class=\"mj-btn mj-btn-ghost mj-btn-sm\" (click)=\"editUser(user); $event.stopPropagation()\" title=\"Edit\">\n                    <i class=\"fa-solid fa-edit\"></i>\n                  </button>\n                  <button class=\"mj-btn mj-btn-ghost mj-btn-sm text-danger\" (click)=\"confirmDeleteUser(user); $event.stopPropagation()\" title=\"Delete\">\n                    <i class=\"fa-solid fa-trash\"></i>\n                  </button>\n                </div>\n              </div>\n              \n              <div class=\"card-body\">\n                <h3 class=\"user-name\">{{ user.Name }}</h3>\n                <p class=\"user-fullname\">{{ user.FirstName }} {{ user.LastName }}</p>\n                <p class=\"user-email\">\n                  <i class=\"fa-solid fa-envelope\"></i>\n                  {{ user.Email }}\n                </p>\n                \n                <div class=\"card-meta\">\n                  <div class=\"meta-item\">\n                    <i [class]=\"'fa-solid ' + getUserTypeIcon(user)\"></i>\n                    {{ user.Type }}\n                  </div>\n                  <span class=\"status-badge\" [class]=\"getStatusClass(user)\">\n                    <i [class]=\"'fa-solid ' + getStatusIcon(user)\"></i>\n                    {{ user.IsActive ? 'Active' : 'Inactive' }}\n                  </span>\n                </div>\n                \n                <div class=\"card-footer\">\n                  <div class=\"last-login\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    Last updated: {{ user.__mj_UpdatedAt ? (user.__mj_UpdatedAt | date:'short') : 'Never' }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          }\n          \n          @if (filteredUsers.length === 0) {\n            <div class=\"empty-state\">\n              <i class=\"fa-solid fa-users-slash empty-icon\"></i>\n              <p class=\"empty-text\">No users found</p>\n              <p class=\"empty-subtext\">Try adjusting your filters or add a new user</p>\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- User Create/Edit Dialog -->\n  <mj-user-dialog \n    [data]=\"userDialogData\"\n    [visible]=\"showUserDialog\"\n    (result)=\"onUserDialogResult($event)\">\n  </mj-user-dialog>\n\n  <!-- Delete Confirmation Dialog -->\n  @if (showDeleteConfirm && selectedUser) {\n    <div class=\"modal-backdrop\" (click)=\"showDeleteConfirm = false\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3 class=\"modal-title\">\n            <i class=\"fa-solid fa-exclamation-triangle text-danger\"></i>\n            Confirm Delete\n          </h3>\n          <button class=\"modal-close\" (click)=\"showDeleteConfirm = false\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Are you sure you want to delete user <strong>{{ selectedUser.Name }}</strong>?</p>\n          <p class=\"text-muted\">This action cannot be undone.</p>\n        </div>\n        <div class=\"modal-footer\">\n          <button class=\"mj-btn mj-btn-secondary\" (click)=\"showDeleteConfirm = false\">Cancel</button>\n          <button class=\"mj-btn mj-btn-primary text-danger\" (click)=\"deleteUser()\">\n            <i class=\"fa-solid fa-trash\"></i>\n            Delete User\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n</div>", styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.user-management-container {\n  @include scrollable-container;\n  width: 100%;\n  height: 100%;\n}\n\n// Action Buttons\n.action-buttons {\n  @include fixed-header;\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  padding: 1rem 2rem;\n  background: white;\n  border-bottom: 1px solid $border-light;\n\n  @media (max-width: 768px) {\n    justify-content: center;\n    flex-wrap: wrap;\n    padding: 1rem;\n  }\n}\n\n// Buttons\n.btn-primary {\n  @include button-base;\n  background-color: #2196f3;\n  color: white;\n  \n  &:hover {\n    background-color: #1976d2;\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n  }\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    transform: none;\n  }\n}\n\n.btn-secondary {\n  @include button-base;\n  background-color: #ffffff;\n  color: #374151;\n  border: 1px solid #e5e7eb;\n  \n  &:hover {\n    background-color: #f9fafb;\n    border-color: #2196f3;\n    color: #2196f3;\n  }\n}\n\n.btn-danger {\n  @include button-base;\n  background-color: #f44336;\n  color: white;\n  \n  &:hover {\n    background-color: #d32f2f;\n  }\n}\n\n// Stats Grid\n.stats-grid {\n  @include fixed-header;\n  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  padding: 1rem 2rem;\n  background: white;\n  border-bottom: 1px solid $border-light;\n  width: 100%;\n\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 1rem;\n    padding: 1rem;\n  }\n}\n\n.stat-card {\n  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  display: flex;\n  margin-right: 10px;\n  align-items: center;\n  gap: 1rem;\n  transition: all 0.3s ease;\n  min-width: 0; // Prevent grid blowout\n\n  &:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n  }\n}\n\n.stat-icon {\n  width: 60px;\n  height: 60px;\n  border-radius: 12px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 1.5rem;\n\n  &-total {\n    background: rgba(33, 150, 243, 0.1);\n    color: #2196f3;\n  }\n\n  &-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #4caf50;\n  }\n\n  &-inactive {\n    background: rgba(244, 67, 54, 0.1);\n    color: #f44336;\n  }\n\n  &-admin {\n    background: rgba(156, 39, 176, 0.1);\n    color: #9c27b0;\n  }\n}\n\n.stat-content {\n  flex: 1;\n\n  .stat-value {\n    font-size: 2rem;\n    font-weight: 700;\n    color: #1f2937;\n    line-height: 1;\n  }\n\n  .stat-label {\n    color: #6b7280;\n    font-size: 0.875rem;\n    margin-top: 0.25rem;\n  }\n}\n\n// Filters Section\n.filters-section {\n  @include fixed-header;\n  background: white;\n  padding: 1.5rem 2rem;\n  border-bottom: 1px solid $border-light;\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n  }\n}\n\n.filters-row {\n  display: flex;\n  gap: 1.5rem;\n  align-items: flex-end;\n  flex-wrap: wrap;\n\n  @media (max-width: 768px) {\n    gap: 1rem;\n  }\n}\n\n.search-container {\n  flex: 1;\n  min-width: 250px;\n  position: relative;\n\n  .search-icon {\n    position: absolute;\n    left: 1rem;\n    top: 50%;\n    transform: translateY(-50%);\n    color: #6b7280;\n    font-size: 1rem;\n  }\n\n  .search-input {\n    width: 100%;\n    padding: 0.75rem 1rem 0.75rem 2.75rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 0.95rem;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.filter-group {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n\n  .filter-label {\n    font-size: 0.875rem;\n    font-weight: 500;\n    color: #374151;\n  }\n\n  .filter-buttons {\n    display: flex;\n    background: #f3f4f6;\n    border-radius: 8px;\n    padding: 4px;\n  }\n\n  .filter-btn {\n    padding: 0.5rem 1rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 0.875rem;\n    font-weight: 500;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  .filter-select {\n    padding: 0.625rem 1rem;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    background: white;\n    font-size: 0.875rem;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:focus {\n      outline: none;\n      border-color: #2196f3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n  }\n}\n\n.view-toggle {\n  display: flex;\n  background: #f3f4f6;\n  border-radius: 8px;\n  padding: 4px;\n\n  .view-btn {\n    padding: 0.5rem 0.75rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1rem;\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s;\n\n    &:hover {\n      color: #374151;\n    }\n\n    &.active {\n      background: white;\n      color: #2196f3;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n    }\n  }\n}\n\n// Content Area\n.content-area {\n  @include scrollable-content;\n  padding: 2rem;\n  background: white;\n\n  @media (max-width: 768px) {\n    padding: 1rem;\n  }\n}\n\n// Table View\n.users-table {\n  width: 100%;\n  overflow-x: auto;\n}\n\n.modern-table {\n  width: 100%;\n  border-collapse: collapse;\n\n  thead {\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n\n    th {\n      padding: 1rem;\n      text-align: left;\n      font-size: 0.875rem;\n      font-weight: 600;\n      color: #374151;\n      white-space: nowrap;\n\n      &.th-checkbox {\n        width: 50px;\n      }\n\n      &.th-actions {\n        text-align: center;\n        width: 150px;\n      }\n    }\n  }\n\n  tbody {\n    tr {\n      border-bottom: 1px solid #f3f4f6;\n      transition: background-color 0.2s;\n      cursor: pointer;\n\n      &:hover {\n        background-color: #f9fafb;\n      }\n    }\n\n    td {\n      padding: 1rem;\n      font-size: 0.875rem;\n      color: #374151;\n\n      &.td-checkbox {\n        width: 50px;\n      }\n\n      &.td-actions {\n        text-align: center;\n      }\n    }\n  }\n}\n\n.checkbox {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n.user-cell {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.user-avatar {\n  width: 40px;\n  height: 40px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  font-size: 0.875rem;\n}\n\n.user-avatar-large {\n  width: 80px;\n  height: 80px;\n  border-radius: 50%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  color: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-weight: 600;\n  font-size: 1.5rem;\n  margin: 0 auto 1rem;\n}\n\n.user-info {\n  .user-name {\n    font-weight: 600;\n    color: #1f2937;\n  }\n\n  .user-fullname {\n    font-size: 0.75rem;\n    color: #6b7280;\n  }\n}\n\n.user-type {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: #4b5563;\n\n  i {\n    font-size: 0.875rem;\n  }\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.375rem;\n  padding: 0.25rem 0.75rem;\n  border-radius: 20px;\n  font-size: 0.75rem;\n  font-weight: 500;\n\n  &.status-active {\n    background: rgba(76, 175, 80, 0.1);\n    color: #388e3c;\n  }\n\n  &.status-inactive {\n    background: rgba(244, 67, 54, 0.1);\n    color: #d32f2f;\n  }\n\n  i {\n    font-size: 0.625rem;\n  }\n}\n\n.last-login {\n  color: #6b7280;\n  font-size: 0.875rem;\n}\n\n.action-btn {\n  padding: 0.5rem;\n  border: none;\n  background: transparent;\n  color: #6b7280;\n  font-size: 1rem;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n\n  &:hover {\n    background: #f3f4f6;\n    color: #2196f3;\n  }\n\n  &-danger:hover {\n    color: #f44336;\n  }\n}\n\n// Card View\n.users-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 1.5rem;\n  padding: 1.5rem;\n\n  @media (max-width: 768px) {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n    padding: 1rem;\n  }\n}\n\n.user-card {\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 12px;\n  padding: 1.5rem;\n  cursor: pointer;\n  transition: all 0.3s ease;\n\n  &:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);\n    transform: translateY(-2px);\n    border-color: #2196f3;\n  }\n}\n\n.card-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 1rem;\n}\n\n.card-actions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.card-body {\n  text-align: center;\n\n  .user-name {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0 0 0.25rem 0;\n  }\n\n  .user-fullname {\n    color: #6b7280;\n    margin: 0 0 0.75rem 0;\n  }\n\n  .user-email {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.5rem;\n    color: #4b5563;\n    font-size: 0.875rem;\n    margin-bottom: 1rem;\n\n    i {\n      color: #6b7280;\n    }\n  }\n}\n\n.card-meta {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 1rem;\n  padding: 1rem 0;\n  border-top: 1px solid #f3f4f6;\n  border-bottom: 1px solid #f3f4f6;\n  margin-bottom: 1rem;\n\n  .meta-item {\n    display: flex;\n    align-items: center;\n    gap: 0.375rem;\n    color: #4b5563;\n    font-size: 0.875rem;\n  }\n}\n\n.card-footer {\n  .last-login {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.375rem;\n    color: #6b7280;\n    font-size: 0.75rem;\n\n    i {\n      font-size: 0.875rem;\n    }\n  }\n}\n\n// Empty State\n.empty-state {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .empty-icon {\n    font-size: 4rem;\n    color: #e5e7eb;\n    margin-bottom: 1rem;\n  }\n\n  .empty-text {\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #374151;\n    margin: 0 0 0.5rem 0;\n  }\n\n  .empty-subtext {\n    color: #6b7280;\n    margin: 0;\n  }\n}\n\n// Loading State\n.loading-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 4rem 2rem;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin-bottom: 1rem;\n\n  .spinner-ring {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border: 3px solid transparent;\n    border-radius: 50%;\n    animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n\n    &:nth-child(1) {\n      border-color: #2196f3 transparent transparent transparent;\n      animation-delay: -0.45s;\n    }\n\n    &:nth-child(2) {\n      border-color: transparent #4caf50 transparent transparent;\n      animation-delay: -0.3s;\n    }\n\n    &:nth-child(3) {\n      border-color: transparent transparent #ff9800 transparent;\n      animation-delay: -0.15s;\n    }\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n.loading-text {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n// Error State\n.error-container {\n  text-align: center;\n  padding: 4rem 2rem;\n\n  .error-icon {\n    font-size: 3rem;\n    color: #f44336;\n    margin-bottom: 1rem;\n  }\n\n  .error-message {\n    color: #374151;\n    margin-bottom: 1.5rem;\n  }\n\n  .retry-button {\n    @include button-base;\n    background-color: #2196f3;\n    color: white;\n  }\n}\n\n// Modal Styles\n.modal-backdrop {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.2s ease;\n}\n\n.modal-dialog {\n  background: white;\n  border-radius: 12px;\n  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n  max-width: 500px;\n  width: 90%;\n  max-height: 90vh;\n  overflow: hidden;\n  animation: slideUp 0.3s ease;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  border-bottom: 1px solid #e5e7eb;\n\n  .modal-title {\n    display: flex;\n    align-items: center;\n    gap: 0.75rem;\n    font-size: 1.25rem;\n    font-weight: 600;\n    color: #1f2937;\n    margin: 0;\n  }\n\n  .modal-close {\n    padding: 0.5rem;\n    border: none;\n    background: transparent;\n    color: #6b7280;\n    font-size: 1.25rem;\n    cursor: pointer;\n    border-radius: 6px;\n    transition: all 0.2s;\n\n    &:hover {\n      background: #f3f4f6;\n      color: #374151;\n    }\n  }\n}\n\n.modal-body {\n  padding: 1.5rem;\n\n  p {\n    margin: 0 0 1rem 0;\n    color: #374151;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  .text-muted {\n    color: #6b7280;\n    font-size: 0.875rem;\n  }\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1.5rem;\n  border-top: 1px solid #e5e7eb;\n  background: #f9fafb;\n}\n\n// Animations\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideUp {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n// Utility Classes\n.text-danger {\n  color: #f44336;\n}"] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserManagementComponent, { className: "UserManagementComponent", filePath: "src/lib/user-management/user-management.component.ts", lineNumber: 38 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UserManagementComponent, { className: "UserManagementComponent", filePath: "src/lib/user-management/user-management.component.ts", lineNumber: 32 }); })();
 //# sourceMappingURL=user-management.component.js.map

package/dist/lib/user-management/user-management.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-management.component.js","sourceRoot":"","sources":["../../../src/lib/user-management/user-management.component.ts","../../../src/lib/user-management/user-management.component.html"],"names":[],"mappings":"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"}
+{"version":3,"file":"user-management.component.js","sourceRoot":"","sources":["../../../src/lib/user-management/user-management.component.ts","../../../src/lib/user-management/user-management.component.html"],"names":[],"mappings":"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"}

package/dist/lib/user-profile-settings/user-profile-settings.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-profile-settings.component.d.ts","sourceRoot":"","sources":["../../../src/lib/user-profile-settings/user-profile-settings.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,MAAM,eAAe,CAAC;AAIlD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAc,aAAa,EAAE,MAAM,2BAA2B,CAAC;;AAEtE,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,qBAOa,4BAA6B,YAAW,MAAM;IAiGvD,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,aAAa;IAjGvB,WAAW,EAAG,UAAU,CAAC;IACzB,WAAW,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAS;IAG5D,aAAa,SAAM;IACnB,iBAAiB,SAAM;IACvB,mBAAmB,SAAM;IACzB,gBAAgB,SAAM;IACtB,UAAU,SAAM;IAChB,gBAAgB,SAAM;IAGtB,QAAQ,UAAS;IACjB,kBAAkB,UAAS;IAC3B,YAAY,SAAM;IAGlB,cAAc,EAAE,YAAY,EAAE,CA4E5B;gBAGQ,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,aAAa;IAGhC,QAAQ;IAWd;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAuBzB;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI;IAK5D;;OAEG;IACG,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAsCjD;;OAEG;IACH,WAAW,IAAI,IAAI;IAanB;;OAEG;IACH,WAAW,IAAI,IAAI;IAgBnB;;OAEG;IACH,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAOnC;;OAEG;IACH,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO;IAI1C;;;;OAIG;IACG,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAOvC;;;OAGG;IACG,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IA6CtC;;OAEG;IACH,OAAO,CAAC,aAAa;IAuBrB;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAkE3B;;OAEG;IACH,MAAM,IAAI,IAAI;IAMd;;OAEG;IACH,OAAO,CAAC,WAAW;yCAvZR,4BAA4B;2CAA5B,4BAA4B;CAgaxC"}
+{"version":3,"file":"user-profile-settings.component.d.ts","sourceRoot":"","sources":["../../../src/lib/user-profile-settings/user-profile-settings.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,MAAM,EAAE,MAAM,eAAe,CAAC;AAIlD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAc,aAAa,EAAE,MAAM,2BAA2B,CAAC;;AAEtE,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB;AAED,qBAOa,4BAA6B,YAAW,MAAM;IA2FvD,OAAO,CAAC,iBAAiB;IACzB,OAAO,CAAC,aAAa;IA3FvB,WAAW,EAAG,UAAU,CAAC;IACzB,WAAW,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,CAAS;IAG5D,aAAa,SAAM;IACnB,iBAAiB,SAAM;IACvB,mBAAmB,SAAM;IACzB,gBAAgB,SAAM;IACtB,UAAU,SAAM;IAChB,gBAAgB,SAAM;IAGtB,QAAQ,UAAS;IACjB,kBAAkB,UAAS;IAC3B,YAAY,SAAM;IAGlB,cAAc,EAAE,YAAY,EAAE,CAsE5B;gBAGQ,iBAAiB,EAAE,iBAAiB,EACpC,aAAa,EAAE,aAAa;IAGhC,QAAQ;IAWd;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAuBzB;;OAEG;IACH,SAAS,CAAC,GAAG,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,GAAG,UAAU,GAAG,IAAI;IAK5D;;OAEG;IACG,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,OAAO,CAAC,IAAI,CAAC;IAsCjD;;OAEG;IACH,WAAW,IAAI,IAAI;IAanB;;OAEG;IACH,WAAW,IAAI,IAAI;IAgBnB;;OAEG;IACH,UAAU,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAOnC;;OAEG;IACH,cAAc,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO;IAI1C;;;;OAIG;IACG,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAQvC;;;OAGG;IACG,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IA6CtC;;OAEG;IACH,OAAO,CAAC,aAAa;IAuBrB;;OAEG;IACG,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC;IAkE3B;;OAEG;IACH,MAAM,IAAI,IAAI;IAMd;;OAEG;IACH,OAAO,CAAC,WAAW;yCAlZR,4BAA4B;2CAA5B,4BAA4B;CA2ZxC"}

package/dist/lib/user-profile-settings/user-profile-settings.component.js

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { Metadata } from '@memberjunction/core';
+import { Metadata } from '@memberjunction/global';
 import { MJGlobal, MJEventType } from '@memberjunction/global';
 import { EventCodes } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
@@ -252,8 +252,8 @@ export class UserProfileSettingsComponent {
                 'fa-solid fa-user-crown',
                 'fa-solid fa-user-pilot',
                 'fa-solid fa-user-cowboy',
-                'fa-solid fa-user-chef'
-            ]
+                'fa-solid fa-user-chef',
+            ],
         },
         {
             name: 'Business',
@@ -267,8 +267,8 @@ export class UserProfileSettingsComponent {
                 'fa-solid fa-award',
                 'fa-solid fa-lightbulb',
                 'fa-solid fa-rocket',
-                'fa-solid fa-star'
-            ]
+                'fa-solid fa-star',
+            ],
         },
         {
             name: 'Tech',
@@ -282,8 +282,8 @@ export class UserProfileSettingsComponent {
                 'fa-solid fa-server',
                 'fa-solid fa-database',
                 'fa-solid fa-network-wired',
-                'fa-solid fa-bug'
-            ]
+                'fa-solid fa-bug',
+            ],
         },
         {
             name: 'Fun',
@@ -297,19 +297,13 @@ export class UserProfileSettingsComponent {
                 'fa-solid fa-bolt',
                 'fa-solid fa-gem',
                 'fa-solid fa-crown',
-                'fa-solid fa-hat-wizard'
-            ]
+                'fa-solid fa-hat-wizard',
+            ],
         },
         {
             name: 'Animals',
-            icons: [
-                'fa-solid fa-cat',
-                'fa-solid fa-dog',
-                'fa-solid fa-dragon',
-                'fa-solid fa-dove',
-                'fa-solid fa-fish'
-            ]
-        }
+            icons: ['fa-solid fa-cat', 'fa-solid fa-dog', 'fa-solid fa-dragon', 'fa-solid fa-dove', 'fa-solid fa-fish'],
+        },
     ];
     constructor(userAvatarService, sharedService) {
         this.userAvatarService = userAvatarService;
@@ -447,7 +441,8 @@ export class UserProfileSettingsComponent {
      * in the calling application which has access to auth services
      */
     async syncFromProvider() {
-        this.errorMessage = 'Avatar sync from provider is not yet implemented in settings. Please use the automatic sync on login or manually upload an image.';
+        this.errorMessage =
+            'Avatar sync from provider is not yet implemented in settings. Please use the automatic sync on login or manually upload an image.';
         // TODO: Implement auth provider integration
         // The calling application should provide a way to get auth claims
         // and call userAvatarService.syncFromImageUrl() with the appropriate URL and headers
@@ -482,8 +477,8 @@ export class UserProfileSettingsComponent {
                     component: this,
                     args: {
                         imageUrl: null,
-                        iconClass: null
-                    }
+                        iconClass: null,
+                    },
                 });
             }
             else {
@@ -572,8 +567,8 @@ export class UserProfileSettingsComponent {
                     component: this,
                     args: {
                         imageUrl: this.currentUser.UserImageURL,
-                        iconClass: this.currentUser.UserImageIconClass
-                    }
+                        iconClass: this.currentUser.UserImageIconClass,
+                    },
                 });
             }
             else {