@memberjunction/ng-explorer-settings 2.50.0 → 2.51.0

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

@@ -0,0 +1,643 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Subject, BehaviorSubject } from 'rxjs';
+import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { RunView } from '@memberjunction/core';
+import { SharedSettingsModule } from '../shared/shared-settings.module';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+const _forTrack0 = ($index, $item) => $item.ID;
+function UserManagementComponent_For_66_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 32);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const role_r1 = ctx.$implicit;
+    i0.ɵɵproperty("value", role_r1.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(role_r1.Name);
+} }
+function UserManagementComponent_Conditional_72_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38)(1, "div", 42);
+    i0.ɵɵelement(2, "div", 43)(3, "div", 43)(4, "div", 43);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 44);
+    i0.ɵɵtext(6, "Loading users...");
+    i0.ɵɵelementEnd()();
+} }
+function UserManagementComponent_Conditional_73_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 39)(1, "div", 45);
+    i0.ɵɵelement(2, "i", 46);
+    i0.ɵɵelementStart(3, "p", 47);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 48);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_73_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.loadInitialData()); });
+    i0.ɵɵelement(6, "i", 3);
+    i0.ɵɵtext(7, " Try Again ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.error);
+} }
+function UserManagementComponent_Conditional_74_Conditional_1_For_20_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 57);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_74_Conditional_1_For_20_Template_tr_click_0_listener() { const user_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectUser(user_r5)); });
+    i0.ɵɵelementStart(1, "td", 58);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_74_Conditional_1_For_20_Template_td_click_1_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(2, "input", 53);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "td")(4, "div", 59)(5, "div", 60);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 61)(8, "div", 62);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "div", 63);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(12, "td");
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "td")(15, "div", 64);
+    i0.ɵɵelement(16, "i");
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "td")(19, "span", 65);
+    i0.ɵɵelement(20, "i");
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(22, "td")(23, "span", 66);
+    i0.ɵɵtext(24);
+    i0.ɵɵpipe(25, "date");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(26, "td", 67);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_74_Conditional_1_For_20_Template_td_click_26_listener($event) { i0.ɵɵrestoreView(_r4); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(27, "button", 68);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_74_Conditional_1_For_20_Template_button_click_27_listener() { const user_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.editUser(user_r5)); });
+    i0.ɵɵelement(28, "i", 69);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(29, "button", 70);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_74_Conditional_1_For_20_Template_button_click_29_listener() { const user_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleUserStatus(user_r5)); });
+    i0.ɵɵelement(30, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "button", 71);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_74_Conditional_1_For_20_Template_button_click_31_listener() { const user_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.confirmDeleteUser(user_r5)); });
+    i0.ɵɵelement(32, "i", 72);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const user_r5 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getUserInitials(user_r5), " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(user_r5.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" ", user_r5.FirstName, " ", user_r5.LastName, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(user_r5.Email);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap("fa-solid " + ctx_r2.getUserTypeIcon(user_r5));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", user_r5.Type, " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r2.getStatusClass(user_r5));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("fa-solid " + ctx_r2.getStatusIcon(user_r5));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", user_r5.IsActive ? "Active" : "Inactive", " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", user_r5.__mj_UpdatedAt ? i0.ɵɵpipeBind2(25, 17, user_r5.__mj_UpdatedAt, "short") : "Never", " ");
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("title", user_r5.IsActive ? "Deactivate" : "Activate");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(user_r5.IsActive ? "fa-solid fa-toggle-on" : "fa-solid fa-toggle-off");
+} }
+function UserManagementComponent_Conditional_74_Conditional_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 56);
+    i0.ɵɵelement(1, "i", 73);
+    i0.ɵɵelementStart(2, "p", 74);
+    i0.ɵɵtext(3, "No users found");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 75);
+    i0.ɵɵtext(5, "Try adjusting your filters or add a new user");
+    i0.ɵɵelementEnd()();
+} }
+function UserManagementComponent_Conditional_74_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49)(1, "table", 51)(2, "thead")(3, "tr")(4, "th", 52);
+    i0.ɵɵelement(5, "input", 53);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "th");
+    i0.ɵɵtext(7, "User");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "th");
+    i0.ɵɵtext(9, "Email");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "th");
+    i0.ɵɵtext(11, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "th");
+    i0.ɵɵtext(13, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "th");
+    i0.ɵɵtext(15, "Last Updated");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "th", 54);
+    i0.ɵɵtext(17, "Actions");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(18, "tbody");
+    i0.ɵɵrepeaterCreate(19, UserManagementComponent_Conditional_74_Conditional_1_For_20_Template, 33, 20, "tr", 55, _forTrack0);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(21, UserManagementComponent_Conditional_74_Conditional_1_Conditional_21_Template, 6, 0, "div", 56);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(19);
+    i0.ɵɵrepeater(ctx_r2.filteredUsers);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.filteredUsers.length === 0 ? 21 : -1);
+} }
+function UserManagementComponent_Conditional_74_Conditional_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 77);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_74_Conditional_2_For_2_Template_div_click_0_listener() { const user_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectUser(user_r7)); });
+    i0.ɵɵelementStart(1, "div", 78)(2, "div", 79);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 80)(5, "button", 68);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_74_Conditional_2_For_2_Template_button_click_5_listener($event) { const user_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.editUser(user_r7); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(6, "i", 69);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 71);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_74_Conditional_2_For_2_Template_button_click_7_listener($event) { const user_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.confirmDeleteUser(user_r7); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(8, "i", 72);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "div", 81)(10, "h3", 62);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "p", 63);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "p", 82);
+    i0.ɵɵelement(15, "i", 83);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 84)(18, "div", 85);
+    i0.ɵɵelement(19, "i");
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "span", 65);
+    i0.ɵɵelement(22, "i");
+    i0.ɵɵtext(23);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(24, "div", 86)(25, "div", 66);
+    i0.ɵɵelement(26, "i", 87);
+    i0.ɵɵtext(27);
+    i0.ɵɵpipe(28, "date");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const user_r7 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getUserInitials(user_r7), " ");
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate(user_r7.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", user_r7.FirstName, " ", user_r7.LastName, "");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", user_r7.Email, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap("fa-solid " + ctx_r2.getUserTypeIcon(user_r7));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", user_r7.Type, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2.getStatusClass(user_r7));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap("fa-solid " + ctx_r2.getStatusIcon(user_r7));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", user_r7.IsActive ? "Active" : "Inactive", " ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" Last updated: ", user_r7.__mj_UpdatedAt ? i0.ɵɵpipeBind2(28, 14, user_r7.__mj_UpdatedAt, "short") : "Never", " ");
+} }
+function UserManagementComponent_Conditional_74_Conditional_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 56);
+    i0.ɵɵelement(1, "i", 73);
+    i0.ɵɵelementStart(2, "p", 74);
+    i0.ɵɵtext(3, "No users found");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p", 75);
+    i0.ɵɵtext(5, "Try adjusting your filters or add a new user");
+    i0.ɵɵelementEnd()();
+} }
+function UserManagementComponent_Conditional_74_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵrepeaterCreate(1, UserManagementComponent_Conditional_74_Conditional_2_For_2_Template, 29, 17, "div", 76, _forTrack0);
+    i0.ɵɵtemplate(3, UserManagementComponent_Conditional_74_Conditional_2_Conditional_3_Template, 6, 0, "div", 56);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.filteredUsers);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.filteredUsers.length === 0 ? 3 : -1);
+} }
+function UserManagementComponent_Conditional_74_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40);
+    i0.ɵɵtemplate(1, UserManagementComponent_Conditional_74_Conditional_1_Template, 22, 1, "div", 49)(2, UserManagementComponent_Conditional_74_Conditional_2_Template, 4, 1, "div", 50);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.viewMode === "grid" ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.viewMode === "cards" ? 2 : -1);
+} }
+function UserManagementComponent_Conditional_75_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 88);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_75_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showDeleteConfirm = false); });
+    i0.ɵɵelementStart(1, "div", 89);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_75_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 90)(3, "h3", 91);
+    i0.ɵɵelement(4, "i", 92);
+    i0.ɵɵtext(5, " Confirm Delete ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 93);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_75_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showDeleteConfirm = false); });
+    i0.ɵɵelement(7, "i", 94);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 95)(9, "p");
+    i0.ɵɵtext(10, "Are you sure you want to delete user ");
+    i0.ɵɵelementStart(11, "strong");
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(13, "?");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "p", 96);
+    i0.ɵɵtext(15, "This action cannot be undone.");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 97)(17, "button", 4);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_75_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.showDeleteConfirm = false); });
+    i0.ɵɵtext(18, "Cancel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "button", 98);
+    i0.ɵɵlistener("click", function UserManagementComponent_Conditional_75_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.deleteUser()); });
+    i0.ɵɵelement(20, "i", 72);
+    i0.ɵɵtext(21, " Delete User ");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(12);
+    i0.ɵɵtextInterpolate(ctx_r2.selectedUser.Name);
+} }
+export class UserManagementComponent {
+    // State management
+    users = [];
+    filteredUsers = [];
+    roles = [];
+    selectedUser = null;
+    isLoading = false;
+    error = null;
+    // Stats
+    stats = {
+        totalUsers: 0,
+        activeUsers: 0,
+        inactiveUsers: 0,
+        adminUsers: 0 // This will be based on roles, not Type
+    };
+    // Filters
+    filters$ = new BehaviorSubject({
+        status: 'all',
+        role: '',
+        search: ''
+    });
+    // UI State
+    showCreateDialog = false;
+    showEditDialog = false;
+    showDeleteConfirm = false;
+    viewMode = 'grid';
+    // Grid configuration
+    gridConfig = {
+        pageSize: 20,
+        sortField: 'Name',
+        sortDirection: 'asc'
+    };
+    destroy$ = new Subject();
+    constructor() { }
+    ngOnInit() {
+        this.loadInitialData();
+        this.setupFilterSubscription();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    async loadInitialData() {
+        try {
+            this.isLoading = true;
+            this.error = null;
+            // Load users and roles in parallel
+            const [users, roles] = await Promise.all([
+                this.loadUsers(),
+                this.loadRoles()
+            ]);
+            this.users = users;
+            this.roles = roles;
+            this.calculateStats();
+            this.applyFilters();
+        }
+        catch (error) {
+            console.error('Error loading user data:', error);
+            this.error = 'Failed to load user data. Please try again.';
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async loadUsers() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'Users',
+            ResultType: 'entity_object'
+        });
+        return result.Success ? result.Results : [];
+    }
+    async loadRoles() {
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'Roles',
+            ResultType: 'entity_object',
+            OrderBy: 'Name ASC'
+        });
+        return result.Success ? result.Results : [];
+    }
+    setupFilterSubscription() {
+        this.filters$
+            .pipe(debounceTime(300), distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)), takeUntil(this.destroy$))
+            .subscribe(() => {
+            this.applyFilters();
+        });
+    }
+    applyFilters() {
+        const filters = this.filters$.value;
+        let filtered = [...this.users];
+        // Apply status filter
+        if (filters.status !== 'all') {
+            filtered = filtered.filter(user => filters.status === 'active' ? user.IsActive : !user.IsActive);
+        }
+        // Apply role filter
+        if (filters.role) {
+            // This would need to be implemented based on your user-role relationship
+            // For now, we'll skip this filter
+        }
+        // Apply search filter
+        if (filters.search) {
+            const searchLower = filters.search.toLowerCase();
+            filtered = filtered.filter(user => user.Name?.toLowerCase().includes(searchLower) ||
+                user.Email?.toLowerCase().includes(searchLower) ||
+                user.FirstName?.toLowerCase().includes(searchLower) ||
+                user.LastName?.toLowerCase().includes(searchLower));
+        }
+        this.filteredUsers = filtered;
+    }
+    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
+        };
+    }
+    // Public methods for template
+    onSearchChange(event) {
+        const value = event.target.value;
+        this.updateFilter({ search: value });
+    }
+    onStatusFilterChange(status) {
+        this.updateFilter({ status });
+    }
+    onRoleFilterChange(role) {
+        this.updateFilter({ role });
+    }
+    updateFilter(partial) {
+        this.filters$.next({
+            ...this.filters$.value,
+            ...partial
+        });
+    }
+    selectUser(user) {
+        this.selectedUser = user;
+        this.showEditDialog = true;
+    }
+    createNewUser() {
+        this.selectedUser = null;
+        this.showCreateDialog = true;
+    }
+    editUser(user) {
+        this.selectedUser = user;
+        this.showEditDialog = true;
+    }
+    confirmDeleteUser(user) {
+        this.selectedUser = user;
+        this.showDeleteConfirm = true;
+    }
+    async deleteUser() {
+        if (!this.selectedUser)
+            return;
+        try {
+            // Implement user deletion logic
+            this.showDeleteConfirm = false;
+            await this.loadInitialData();
+        }
+        catch (error) {
+            console.error('Error deleting user:', error);
+            this.error = 'Failed to delete user';
+        }
+    }
+    async toggleUserStatus(user) {
+        try {
+            user.IsActive = !user.IsActive;
+            await user.Save();
+            this.calculateStats();
+        }
+        catch (error) {
+            console.error('Error updating user status:', error);
+            user.IsActive = !user.IsActive; // Revert on error
+        }
+    }
+    toggleViewMode() {
+        this.viewMode = this.viewMode === 'grid' ? 'cards' : 'grid';
+    }
+    exportUsers() {
+        // Implement export functionality
+        console.log('Export users');
+    }
+    refreshData() {
+        this.loadInitialData();
+    }
+    getStatusIcon(user) {
+        return user.IsActive ? 'fa-check-circle' : 'fa-times-circle';
+    }
+    getStatusClass(user) {
+        return user.IsActive ? 'status-active' : 'status-inactive';
+    }
+    getUserTypeIcon(user) {
+        switch (user.Type) {
+            case 'Owner':
+                return 'fa-shield-halved';
+            case 'User':
+                return 'fa-user';
+            default:
+                return 'fa-user';
+        }
+    }
+    getUserInitials(user) {
+        const first = user.FirstName?.charAt(0) || '';
+        const last = user.LastName?.charAt(0) || '';
+        return (first + last).toUpperCase() || user.Name?.charAt(0).toUpperCase() || 'U';
+    }
+    static ɵfac = function UserManagementComponent_Factory(t) { return new (t || UserManagementComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UserManagementComponent, selectors: [["mj-user-management"]], standalone: true, features: [i0.ɵɵStandaloneFeature], decls: 76, vars: 22, consts: [[1, "user-management-container"], [1, "action-buttons"], [1, "btn-secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-download"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "stats-grid", 2, "display", "flex"], [1, "stat-card"], [1, "stat-icon", "stat-icon-total"], [1, "fa-solid", "fa-users"], [1, "stat-content"], [1, "stat-value"], [1, "stat-label"], [1, "stat-icon", "stat-icon-active"], [1, "fa-solid", "fa-user-check"], [1, "stat-icon", "stat-icon-inactive"], [1, "fa-solid", "fa-user-xmark"], [1, "stat-icon", "stat-icon-admin"], [1, "fa-solid", "fa-shield-halved"], [1, "filters-section"], [1, "filters-row"], [1, "search-container"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search users by name or email...", 1, "search-input", 3, "input", "value"], [1, "filter-group"], [1, "filter-label"], [1, "filter-buttons"], [1, "filter-btn", 3, "click"], [1, "filter-select", 3, "change"], ["value", ""], [3, "value"], [1, "view-toggle"], ["title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-table"], ["title", "Card View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-th-large"], [1, "loading-container"], [1, "error-container"], [1, "content-area"], [1, "modal-backdrop"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-content"], [1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], [1, "retry-button", 3, "click"], [1, "users-table"], [1, "users-grid"], [1, "modern-table"], [1, "th-checkbox"], ["type", "checkbox", 1, "checkbox"], [1, "th-actions"], [1, "table-row"], [1, "empty-state"], [1, "table-row", 3, "click"], [1, "td-checkbox", 3, "click"], [1, "user-cell"], [1, "user-avatar"], [1, "user-info"], [1, "user-name"], [1, "user-fullname"], [1, "user-type"], [1, "status-badge"], [1, "last-login"], [1, "td-actions", 3, "click"], ["title", "Edit", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-edit"], [1, "action-btn", 3, "click", "title"], ["title", "Delete", 1, "action-btn", "action-btn-danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "fa-solid", "fa-users-slash", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], [1, "user-card"], [1, "user-card", 3, "click"], [1, "card-header"], [1, "user-avatar-large"], [1, "card-actions"], [1, "card-body"], [1, "user-email"], [1, "fa-solid", "fa-envelope"], [1, "card-meta"], [1, "meta-item"], [1, "card-footer"], [1, "fa-solid", "fa-clock"], [1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-title"], [1, "fa-solid", "fa-exclamation-triangle", "text-danger"], [1, "modal-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [1, "text-muted"], [1, "modal-footer"], [1, "btn-danger", 3, "click"]], template: function UserManagementComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
+            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_2_listener() { return ctx.refreshData(); });
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵtext(4, " Refresh ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(5, "button", 4);
+            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_5_listener() { return ctx.exportUsers(); });
+            i0.ɵɵelement(6, "i", 5);
+            i0.ɵɵtext(7, " Export ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(8, "button", 6);
+            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_8_listener() { return ctx.createNewUser(); });
+            i0.ɵɵelement(9, "i", 7);
+            i0.ɵɵtext(10, " Add User ");
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(11, "div", 8)(12, "div", 9)(13, "div", 10);
+            i0.ɵɵelement(14, "i", 11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(15, "div", 12)(16, "div", 13);
+            i0.ɵɵtext(17);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(18, "div", 14);
+            i0.ɵɵtext(19, "Total Users");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(20, "div", 9)(21, "div", 15);
+            i0.ɵɵelement(22, "i", 16);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(23, "div", 12)(24, "div", 13);
+            i0.ɵɵtext(25);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(26, "div", 14);
+            i0.ɵɵtext(27, "Active Users");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(28, "div", 9)(29, "div", 17);
+            i0.ɵɵelement(30, "i", 18);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(31, "div", 12)(32, "div", 13);
+            i0.ɵɵtext(33);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(34, "div", 14);
+            i0.ɵɵtext(35, "Inactive Users");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(36, "div", 9)(37, "div", 19);
+            i0.ɵɵelement(38, "i", 20);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(39, "div", 12)(40, "div", 13);
+            i0.ɵɵtext(41);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(42, "div", 14);
+            i0.ɵɵtext(43, "Owners");
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵelementStart(44, "div", 21)(45, "div", 22)(46, "div", 23);
+            i0.ɵɵelement(47, "i", 24);
+            i0.ɵɵelementStart(48, "input", 25);
+            i0.ɵɵlistener("input", function UserManagementComponent_Template_input_input_48_listener($event) { return ctx.onSearchChange($event); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(49, "div", 26)(50, "label", 27);
+            i0.ɵɵtext(51, "Status");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(52, "div", 28)(53, "button", 29);
+            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_53_listener() { return ctx.onStatusFilterChange("all"); });
+            i0.ɵɵtext(54, " All ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(55, "button", 29);
+            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_55_listener() { return ctx.onStatusFilterChange("active"); });
+            i0.ɵɵtext(56, " Active ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(57, "button", 29);
+            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_57_listener() { return ctx.onStatusFilterChange("inactive"); });
+            i0.ɵɵtext(58, " Inactive ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(59, "div", 26)(60, "label", 27);
+            i0.ɵɵtext(61, "Role");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(62, "select", 30);
+            i0.ɵɵlistener("change", function UserManagementComponent_Template_select_change_62_listener($event) { return ctx.onRoleFilterChange($event.target.value); });
+            i0.ɵɵelementStart(63, "option", 31);
+            i0.ɵɵtext(64, "All Roles");
+            i0.ɵɵelementEnd();
+            i0.ɵɵrepeaterCreate(65, UserManagementComponent_For_66_Template, 2, 2, "option", 32, _forTrack0);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(67, "div", 33)(68, "button", 34);
+            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_68_listener() { return ctx.viewMode = "grid"; });
+            i0.ɵɵelement(69, "i", 35);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(70, "button", 36);
+            i0.ɵɵlistener("click", function UserManagementComponent_Template_button_click_70_listener() { return ctx.viewMode = "cards"; });
+            i0.ɵɵelement(71, "i", 37);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵtemplate(72, UserManagementComponent_Conditional_72_Template, 7, 0, "div", 38)(73, UserManagementComponent_Conditional_73_Template, 8, 1, "div", 39)(74, UserManagementComponent_Conditional_74_Template, 3, 2, "div", 40)(75, UserManagementComponent_Conditional_75_Template, 22, 1, "div", 41);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("disabled", ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("fa-spin", ctx.isLoading);
+            i0.ɵɵadvance(14);
+            i0.ɵɵtextInterpolate(ctx.stats.totalUsers);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate(ctx.stats.activeUsers);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate(ctx.stats.inactiveUsers);
+            i0.ɵɵadvance(8);
+            i0.ɵɵtextInterpolate(ctx.stats.adminUsers);
+            i0.ɵɵadvance(7);
+            i0.ɵɵproperty("value", ctx.filters$.value.search);
+            i0.ɵɵadvance(5);
+            i0.ɵɵclassProp("active", ctx.filters$.value.status === "all");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.filters$.value.status === "active");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.filters$.value.status === "inactive");
+            i0.ɵɵadvance(8);
+            i0.ɵɵrepeater(ctx.roles);
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("active", ctx.viewMode === "grid");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.viewMode === "cards");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading ? 72 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 73 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 74 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedUser ? 75 : -1);
+        } }, dependencies: [CommonModule, i1.DatePipe, FormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, SharedSettingsModule], styles: ["@import '../shared/styles/variables';\n@import '../shared/styles/mixins';\n\n.user-management-container[_ngcontent-%COMP%] {\n  @include scrollable-container;\n  max-width: 1400px;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\n//[_ngcontent-%COMP%]   Action[_ngcontent-%COMP%]   Buttons\n.action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  margin-bottom: 1.5rem;\n\n  @media (max-width: 768px) {\n    justify-content: center;\n    flex-wrap: wrap;\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  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  margin-bottom: 2rem;\n  width: 100%;\n\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 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  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  margin-bottom: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\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  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n}\n\n//[_ngcontent-%COMP%]   Table[_ngcontent-%COMP%]   View\n.users-table[_ngcontent-%COMP%] {\n  overflow-x: auto;\n  max-height: calc(100vh - 450px); // Dynamic height\n  overflow-y: 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
+                ], template: "<div class=\"user-management-container\">\n  <!-- Action Buttons -->\n  <div class=\"action-buttons\">\n    <button class=\"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=\"btn-secondary\" (click)=\"exportUsers()\">\n      <i class=\"fa-solid fa-download\"></i>\n      Export\n    </button>\n    <button class=\"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=\"stats-grid\" style=\"display: flex\">\n    <div class=\"stat-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=\"stat-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=\"stat-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=\"stat-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=\"filter-btn\"\n            [class.active]=\"filters$.value.status === 'all'\"\n            (click)=\"onStatusFilterChange('all')\"\n          >\n            All\n          </button>\n          <button \n            class=\"filter-btn\"\n            [class.active]=\"filters$.value.status === 'active'\"\n            (click)=\"onStatusFilterChange('active')\"\n          >\n            Active\n          </button>\n          <button \n            class=\"filter-btn\"\n            [class.active]=\"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=\"view-btn\"\n          [class.active]=\"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=\"view-btn\"\n          [class.active]=\"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=\"action-btn\" (click)=\"editUser(user)\" title=\"Edit\">\n                      <i class=\"fa-solid fa-edit\"></i>\n                    </button>\n                    <button \n                      class=\"action-btn\" \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=\"action-btn action-btn-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=\"action-btn\" (click)=\"editUser(user); $event.stopPropagation()\" title=\"Edit\">\n                    <i class=\"fa-solid fa-edit\"></i>\n                  </button>\n                  <button class=\"action-btn action-btn-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  <!-- 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=\"btn-secondary\" (click)=\"showDeleteConfirm = false\">Cancel</button>\n          <button class=\"btn-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  max-width: 1400px;\n  margin: 0 auto;\n  padding: 2rem;\n}\n\n// Action Buttons\n.action-buttons {\n  display: flex;\n  gap: 0.75rem;\n  justify-content: flex-end;\n  margin-bottom: 1.5rem;\n\n  @media (max-width: 768px) {\n    justify-content: center;\n    flex-wrap: wrap;\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  display: grid !important;\n  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n  gap: 1.5rem;\n  margin-bottom: 2rem;\n  width: 100%;\n\n  @media (max-width: 768px) {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 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  background: white;\n  border-radius: 12px;\n  padding: 1.5rem;\n  margin-bottom: 1.5rem;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\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  background: white;\n  border-radius: 12px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n}\n\n// Table View\n.users-table {\n  overflow-x: auto;\n  max-height: calc(100vh - 450px); // Dynamic height\n  overflow-y: 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: 34 }); })();
+//# sourceMappingURL=user-management.component.js.map