From 0bfcf675207d0cc60167742cdfe705095c682057 Mon Sep 17 00:00:00 2001
From: prakharlowanshi <walkover@walkovers-Mac-mini.local>
Date: Mon, 19 Jan 2026 15:26:54 +0530
Subject: [PATCH 1/2] set the max width in the member container

---
 .../user-management.component.html            | 123 ++++++++++--------
 .../user-management.component.scss            |  42 +++++-
 .../user-management.component.ts              |  45 +++++--
 .../confirm-dialog.component.html             |   2 +-
 4 files changed, 139 insertions(+), 73 deletions(-)

diff --git a/apps/proxy-auth/src/app/otp/user-management/user-management.component.html b/apps/proxy-auth/src/app/otp/user-management/user-management.component.html
index 15b97399..c6ddf14d 100644
--- a/apps/proxy-auth/src/app/otp/user-management/user-management.component.html
+++ b/apps/proxy-auth/src/app/otp/user-management/user-management.component.html
@@ -1,6 +1,6 @@
 <div #container class="container" [ngClass]="theme === 'dark' ? 'dark-theme' : 'light-theme'">
     <div class="members-container">
-        <h2>Invite Members</h2>
+        <h2>Members</h2>
 
         <mat-tab-group class="user-management-tabs">
             <!-- Members Tab -->
@@ -27,7 +27,7 @@ <h2>Invite Members</h2>
 
                     <div class="users-list-container" [ngClass]="theme === 'dark' ? 'dark-theme' : 'light-theme'">
                         <!-- Skeleton Loading -->
-                        <ng-container *ngIf="isUsersLoading">
+                        <ng-container *ngIf="isUsersLoading && !skipSkeletonLoading">
                             <div
                                 *ngFor="let item of [1, 2, 3, 4, 5]"
                                 class="user-item skeleton-item"
@@ -53,62 +53,69 @@ <h2>Invite Members</h2>
                             *ngFor="let user of dataSource.data; let i = index"
                             class="user-item"
                             [ngClass]="theme === 'dark' ? 'dark-theme' : 'light-theme'"
-                            [class.hidden]="isUsersLoading"
+                            [class.hidden]="isUsersLoading && !skipSkeletonLoading"
                         >
-                            <div class="user-avatar" *ngIf="theme !== 'dark'">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    height="18px"
-                                    viewBox="0 -960 960 960"
-                                    width="24px"
-                                    fill="#000000"
-                                >
-                                    <path
-                                        d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"
-                                    />
-                                </svg>
-                            </div>
-                            <div class="user-avatar" *ngIf="theme === 'dark'">
-                                <svg
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    height="18px"
-                                    viewBox="0 -960 960 960"
-                                    width="24px"
-                                    fill="#c1c5c8"
-                                >
-                                    <path
-                                        d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"
-                                    />
-                                </svg>
-                            </div>
-                            <div class="user-info bg-light-grey">
-                                <div class="user-name">{{ user.name }}</div>
-                                <div class="user-email" matTooltipPosition="above">
-                                    {{ user.email }}
+                            <div class="item-container w-100 d-flex justify-content-between align-items-center gap-2">
+                                <div class="d-flex justify-content-between align-items-center gap-2 w-35">
+                                    <div class="user-avatar" *ngIf="theme !== 'dark'">
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            height="18px"
+                                            viewBox="0 -960 960 960"
+                                            width="24px"
+                                            fill="#000000"
+                                        >
+                                            <path
+                                                d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <div class="user-avatar" *ngIf="theme === 'dark'">
+                                        <svg
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            height="18px"
+                                            viewBox="0 -960 960 960"
+                                            width="24px"
+                                            fill="#c1c5c8"
+                                        >
+                                            <path
+                                                d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"
+                                            />
+                                        </svg>
+                                    </div>
+                                    <div class="user-info bg-light-grey">
+                                        <div class="user-name">{{ user.name }}</div>
+                                        <div class="user-email" matTooltipPosition="above">
+                                            {{ user.email }}
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="user-role-row justify-content-center">
+                                    <div class="user-role">{{ user.role || 'User' }}</div>
+                                </div>
+                                <div class="user-actions">
+                                    <button
+                                        *ngIf="canEditUser"
+                                        mat-flat-button
+                                        class="button-add"
+                                        (click)="editUser(user, i)"
+                                    >
+                                        Edit
+                                    </button>
+                                    <button
+                                        *ngIf="canRemoveUser"
+                                        mat-stroked-button
+                                        class="button-remove"
+                                        [ngClass]="{ 'button-remove-light': theme !== 'dark' }"
+                                        (click)="deleteUser(user, i)"
+                                    >
+                                        Remove
+                                    </button>
                                 </div>
-                            </div>
-                            <div class="user-role-row">
-                                <div class="user-role">{{ user.role || 'User' }}</div>
-                            </div>
-                            <div class="user-actions">
-                                <button
-                                    *ngIf="canEditUser"
-                                    mat-flat-button
-                                    class="button-add"
-                                    (click)="editUser(user, i)"
-                                >
-                                    Edit
-                                </button>
-                                <button
-                                    *ngIf="canRemoveUser"
-                                    mat-flat-button
-                                    class="button-add"
-                                    (click)="deleteUser(user, i)"
-                                >
-                                    Remove
-                                </button>
                             </div>
                         </div>
+
+                        <!-- <div class = "border-bottom"></div> -->
                         <p class="no-data" *ngIf="!isUsersLoading && dataSource.data.length === 0">
                             Nothing Here, There are no Members to show
                         </p>
@@ -428,7 +435,7 @@ <h2 mat-dialog-title>{{ getDialogTitle() }}</h2>
                     <input
                         matInput
                         formControlName="name"
-                        placeholder="Enter user name"
+                        placeholder="Enter member name"
                         [readonly]="isEditUser"
                         required
                     />
@@ -483,7 +490,11 @@ <h2 mat-dialog-title>{{ getDialogTitle() }}</h2>
                     </mat-select>
                 </mat-form-field>
 
-                <mat-form-field appearance="outline" class="full-width" *ngIf="isEditUser">
+                <mat-form-field
+                    appearance="outline"
+                    class="full-width"
+                    *ngIf="isEditUser && getAvailableAdditionalPermissions().length !== 0"
+                >
                     <mat-label>Additional Permissions</mat-label>
                     <mat-select
                         formControlName="permission"
diff --git a/apps/proxy-auth/src/app/otp/user-management/user-management.component.scss b/apps/proxy-auth/src/app/otp/user-management/user-management.component.scss
index 71243da0..969189d6 100644
--- a/apps/proxy-auth/src/app/otp/user-management/user-management.component.scss
+++ b/apps/proxy-auth/src/app/otp/user-management/user-management.component.scss
@@ -38,6 +38,12 @@ body {
         }
     }
 }
+.w-35 {
+    width: 35%;
+}
+.item-container {
+    max-width: 900px;
+}
 
 .tab-content {
     padding: 0;
@@ -166,6 +172,7 @@ body {
     height: 100%;
     width: 100%;
     z-index: 10;
+    max-width: 2000px;
 }
 
 .dark-theme {
@@ -605,6 +612,8 @@ body {
         }
     }
 
+    // border-bottom: 1px solid #e0e0e0;
+
     // Light theme styles - Clean list view
     &.light-theme {
         .user-item {
@@ -882,6 +891,35 @@ td {
     background-color: #000000;
     color: #ffffff;
 }
+
+// Edit button styles
+.button-edit {
+    background-color: transparent !important;
+}
+
+.button-edit-light {
+    border: 1px solid #000000 !important;
+    color: #000000 !important;
+
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.04) !important;
+    }
+}
+
+// Remove button styles
+.button-remove {
+    background-color: transparent !important;
+}
+
+.button-remove-light {
+    border: 1px solid #dc3545 !important;
+    color: #dc3545 !important;
+
+    &:hover {
+        background-color: rgba(220, 53, 69, 0.04) !important;
+    }
+}
+
 .full-width {
     width: 100%;
 }
@@ -1098,7 +1136,7 @@ td {
     }
     // Fallback for all mat-select panels
     .mat-select-panel {
-        min-width: 300px !important;
+        min-width: 350px !important;
     }
 
     .mat-option {
@@ -1120,7 +1158,7 @@ td {
 .role-option-content {
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    // gap: 2px;
     padding: 4px 0;
     width: 100%;
     max-width: 100%;
diff --git a/apps/proxy-auth/src/app/otp/user-management/user-management.component.ts b/apps/proxy-auth/src/app/otp/user-management/user-management.component.ts
index 01048e6b..e715e818 100644
--- a/apps/proxy-auth/src/app/otp/user-management/user-management.component.ts
+++ b/apps/proxy-auth/src/app/otp/user-management/user-management.component.ts
@@ -83,6 +83,7 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af
     public rolesDataSource = new MatTableDataSource<any>([]);
     public roleSearchTerm: string = '';
     public filteredRolesData: any[] = [];
+    public defaultRoles: any;
 
     // Permissions table properties
     public permissionsDisplayedColumns: string[] = ['permission'];
@@ -110,6 +111,7 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af
     public currentPageIndex: number = 0;
     public currentPageSize: number = 50;
     public isUsersLoading: boolean = true;
+    public skipSkeletonLoading: boolean = false;
     private openAddUserDialogHandler = this.addUser.bind(this);
     constructor(private fb: FormBuilder, private dialog: MatDialog, private store: Store<IAppState>) {
         super();
@@ -220,13 +222,13 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af
             });
 
         this.store.pipe(select(companyUsersDataInProcess), takeUntil(this.destroy$)).subscribe((isLoaded) => {
-            // Note: companyUsersDataInProcess is true when loaded, false when loading
             this.isUsersLoading = !isLoaded;
         });
 
         this.getRoles$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
             if (res) {
                 this.roles = res.data?.data;
+                this.defaultRoles = res.data?.default_roles;
                 this.filteredRolesData = [...this.roles];
                 this.rolesDataSource.data = this.filteredRolesData;
             }
@@ -294,13 +296,15 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af
         this.updateCompanyUserData$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
             if (res) {
                 this.getCompanyUsers();
+                this.skipSkeletonLoading = false;
             }
         });
-        this.deleteUserData$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
-            if (res) {
-                this.getCompanyUsers();
-            }
-        });
+        // this.deleteUserData$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
+        //     if (res) {
+
+        //         // this.getCompanyUsers();
+        //     }
+        // });
         this.updateUserRoleData$.pipe(takeUntil(this.destroy$)).subscribe((res) => {
             if (res) {
                 this.getCompanyUsers();
@@ -381,6 +385,7 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af
     }
 
     public editUser(user: UserData, index: number): void {
+        this.skipSkeletonLoading = true;
         this.isEditUser = true;
         this.isEditRole = false;
         this.isEditPermission = false;
@@ -429,16 +434,20 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af
         });
 
         const componentInstance = dialogRef.componentInstance;
-        componentInstance.title = 'Delete User';
-        componentInstance.confirmationMessage = `Are you sure you want to delete ${user.name}?`;
-        componentInstance.confirmButtonText = 'Delete';
+        componentInstance.title = '<b>Remove User</b>';
+        componentInstance.confirmationMessage = `Are you sure you want to remove ${user.name}?`;
+        componentInstance.confirmButtonText = 'Remove';
         componentInstance.cancelButtonText = 'Cancel';
         componentInstance.confirmButtonColor = '';
         componentInstance.confirmButtonClass = 'mat-flat-button btn-danger confirm-dialog';
 
         dialogRef.afterClosed().subscribe((action) => {
             if (action === 'yes') {
-                this.store.dispatch(otpActions.deleteUser({ companyId: user.user_id, authToken: this.userToken }));
+                const userId = (user as any).user_id;
+                this.userData = this.userData.filter((u: any) => u.user_id !== userId);
+                this.dataSource.data = [...this.userData];
+                this.totalUsers = Math.max(0, this.totalUsers - 1);
+                this.store.dispatch(otpActions.deleteUser({ companyId: userId, authToken: this.userToken }));
             }
         });
     }
@@ -565,6 +574,14 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af
         this.isEditPermission = false;
         this.currentEditingUser = null;
         this.addUserForm.reset();
+
+        // Set default role for new user
+        if (this.defaultRoles?.default_member_role) {
+            this.addUserForm.patchValue({
+                role: this.defaultRoles.default_member_role,
+            });
+        }
+
         this.addUserDialogRef = this.dialog.open(this.addUserDialog, {
             width: '500px',
             panelClass: this.theme === 'dark' ? ['dark-dialog'] : [],
@@ -1035,9 +1052,9 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af
         } else if (this.isEditRole) {
             return this.currentEditingUser ? 'Edit Role' : 'Add New Role';
         } else if (this.isEditUser) {
-            return 'Edit User';
+            return 'Edit member';
         } else {
-            return 'Add New User';
+            return 'Add New member';
         }
     }
 
@@ -1071,9 +1088,9 @@ export class UserManagementComponent extends BaseComponent implements OnInit, Af
         } else if (this.isEditRole) {
             return this.currentEditingUser ? 'Update Role' : 'Add Role';
         } else if (this.isEditUser) {
-            return 'Update User';
+            return 'Update member';
         } else {
-            return 'Add User';
+            return 'Add member';
         }
     }
 
diff --git a/libs/ui/confirm-dialog/src/lib/confirm-dialog/confirm-dialog.component.html b/libs/ui/confirm-dialog/src/lib/confirm-dialog/confirm-dialog.component.html
index 6b781a94..bf93e8df 100644
--- a/libs/ui/confirm-dialog/src/lib/confirm-dialog/confirm-dialog.component.html
+++ b/libs/ui/confirm-dialog/src/lib/confirm-dialog/confirm-dialog.component.html
@@ -1,4 +1,4 @@
-<h1 mat-dialog-title class="mat-subheading-2 text-dark mb-3 fw-bold">{{ title }}</h1>
+<h1 mat-dialog-title class="mat-subheading-2 text-dark mb-3 fw-bold" [innerHTML]="title"></h1>
 <div mat-dialog-content class="w-100 mb-4">
     <p class="text-dark mat-body-2 my-0" [innerHTML]="confirmationMessage"></p>
 </div>

From a1add5f9e01fab76be88190557a8127f300c6560 Mon Sep 17 00:00:00 2001
From: prakharlowanshi <walkover@walkovers-Mini.localdomain>
Date: Mon, 19 Jan 2026 19:19:45 +0530
Subject: [PATCH 2/2] fix the skeleton loader

---
 .../user-management.component.html            | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/apps/proxy-auth/src/app/otp/user-management/user-management.component.html b/apps/proxy-auth/src/app/otp/user-management/user-management.component.html
index c6ddf14d..96ff1e21 100644
--- a/apps/proxy-auth/src/app/otp/user-management/user-management.component.html
+++ b/apps/proxy-auth/src/app/otp/user-management/user-management.component.html
@@ -30,20 +30,26 @@ <h2>Members</h2>
                         <ng-container *ngIf="isUsersLoading && !skipSkeletonLoading">
                             <div
                                 *ngFor="let item of [1, 2, 3, 4, 5]"
-                                class="user-item skeleton-item"
+                                class="user-item skeleton-item w-50"
                                 [ngClass]="theme === 'dark' ? 'dark-theme' : 'light-theme'"
                             >
-                                <div class="user-avatar skeleton-avatar"></div>
-                                <div class="user-info bg-light-grey">
-                                    <div class="skeleton-text skeleton-name"></div>
-                                    <div class="skeleton-text skeleton-email"></div>
-                                </div>
-                                <div class="user-role-row">
-                                    <div class="skeleton-text skeleton-role"></div>
-                                </div>
-                                <div class="user-actions">
-                                    <div class="skeleton-button"></div>
-                                    <div class="skeleton-button"></div>
+                                <div
+                                    class="item-container w-100 d-flex justify-content-between align-items-center gap-2"
+                                >
+                                    <div class="d-flex justify-content-between align-items-center gap-2 w-35">
+                                        <div class="user-avatar skeleton-avatar"></div>
+                                        <div class="user-info bg-light-grey">
+                                            <div class="skeleton-text skeleton-name"></div>
+                                            <div class="skeleton-text skeleton-email"></div>
+                                        </div>
+                                    </div>
+                                    <div class="user-role-row">
+                                        <div class="skeleton-text skeleton-role"></div>
+                                    </div>
+                                    <div class="user-actions">
+                                        <div class="skeleton-button"></div>
+                                        <div class="skeleton-button"></div>
+                                    </div>
                                 </div>
                             </div>
                         </ng-container>