Merge branch 'User_Role_Override' of https://git.sentientgeeks.us/ranjit/Hospital_Management into AppointmentModule_Modified

# Conflicts:
#	angular/package.json

angular/package.json

@@ -20,7 +20,7 @@
     "@abp/ng.setting-management": "~9.0.2",
     "@abp/ng.tenant-management": "~9.0.2",
     "@abp/ng.theme.lepton-x": "~4.0.3",
-    "@abp/ng.theme.shared": "~9.0.2",
+    "@abp/ng.theme.shared": "^9.0.4",
     "@angular/animations": "~18.1.0",
     "@angular/common": "~18.1.0",
     "@angular/compiler": "~18.1.0",
@@ -34,7 +34,7 @@
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
-    "bootstrap-icons": "~1.8.0",
+"@swimlane/ngx-datatable": "^20.1.0",    "bootstrap-icons": "~1.8.0",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primeng": "^17.18.0",

angular/src/app/app-routing.module.ts

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { CustomUsersComponent } from './modules/custom-identity/custom-users/custom-users.component';
+import { CustomRolesComponent } from './modules/custom-identity/custom-roles/custom-roles.component';
 
 const routes: Routes = [
   {
@@ -11,10 +13,12 @@ const routes: Routes = [
     path: 'account',
     loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()),
   },
-  {
-    path: 'identity',
-    loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy()),
-  },
+  { path: 'identity/users', component: CustomUsersComponent },
+  { path: 'identity/roles', component: CustomRolesComponent },
+  // {
+  //   path: 'identity',
+  //   loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy()),
+  // },
   {
     path: 'tenant-management',
     loadChildren: () =>

angular/src/app/modules/custom-identity/custom-identity.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IdentityModule } from '@abp/ng.identity';
+import { TableModule } from 'primeng/table';
+import { ButtonModule } from 'primeng/button';
+import { CustomRolesComponent } from './custom-roles/custom-roles.component';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    IdentityModule,
+    TableModule, 
+    ButtonModule,
+    CustomRolesComponent
+  ],
+  exports:[
+    CustomRolesComponent
+  ]
+})
+export class CustomIdentityModule { }

angular/src/app/modules/custom-identity/custom-roles/custom-roles.component.html

@@ -0,0 +1,125 @@
+<abp-page [title]="'AbpIdentity::Roles' | abpLocalization" [toolbar]="data.items">
+    <div id="identity-roles-wrapper" class="card">
+      <div class="card-body">
+        <!-- <abp-extensible-table
+          [data]="data.items"
+          [recordsTotal]="data.totalCount"
+          [list]="list"
+        ></abp-extensible-table> -->
+        <div class="flex justify-content-between align-items-center mb-3">
+          <button pButton icon="pi pi-plus" label="Add Roles" class="p-button-success" (click)="add()"></button>
+        </div>
+        <p-table [value]="data.items" [paginator]="true" [rows]="5" responsiveLayout="scroll">
+          <ng-template pTemplate="header">
+            <tr>
+              <th pSortableColumn="name">Role name <p-sortIcon field="name"></p-sortIcon></th>
+     
+              <th>Actions</th>
+            </tr>
+          </ng-template>
+        
+          <ng-template pTemplate="body" let-role>
+            <tr>
+              <td>{{ role.name }}</td>
+            
+
+              <td>
+                <button pButton icon="pi pi-pencil" class="p-button-text p-button-primary" (click)="edit(role.id)"></button>
+                <button pButton icon="pi pi-trash" class="p-button-text p-button-danger" (click)="delete(role.id,role.name)"></button>
+                <button pButton icon="pi pi-lock" class="p-button-text p-button-success" (click)="openPermissionsModal(role.name)"></button>
+
+              </td>
+            </tr>
+          </ng-template>
+        </p-table>
+      </div>
+    </div>
+  
+    <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+      <ng-template #abpHeader>
+        <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
+      </ng-template>
+  
+      <!-- <ng-template #abpBody>
+        <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
+          <abp-extensible-form [selectedRecord]="selected"></abp-extensible-form>
+        </form>
+      </ng-template> -->
+
+      <ng-template #abpBody>
+        <form #roleForm="ngForm" (ngSubmit)="save()" validateOnSubmit>
+          <!-- Name Field -->
+          <div class="form-group">
+            <label for="name">Name</label>
+            <input
+              id="name"
+              type="text"
+              class="form-control"
+              [(ngModel)]="selected.name"
+              name="name"
+              required
+              #nameCtrl="ngModel"
+            />
+            <small class="text-danger" *ngIf="nameCtrl.invalid && nameCtrl.touched">Name is required</small>
+          </div>
+      
+          <!-- Is Default Checkbox -->
+          <div class="form-check">
+            <input
+              id="isDefault"
+              type="checkbox"
+              class="form-check-input"
+              [(ngModel)]="selected.isDefault"
+              name="isDefault"
+            />
+            <label for="isDefault" class="form-check-label">Default</label>
+          </div>
+      
+          <!-- Is Public Checkbox -->
+          <div class="form-check">
+            <input
+              id="isPublic"
+              type="checkbox"
+              class="form-check-input"
+              [(ngModel)]="selected.isPublic"
+              name="isPublic"
+            />
+            <label for="isPublic" class="form-check-label">Public</label>
+          </div>
+      <br>
+          <abp-button iconClass="fa fa-check" [disabled]="roleForm.invalid" (click)="save()">{{
+            'AbpIdentity::Save' | abpLocalization
+            }}</abp-button>
+        </form>
+      </ng-template>
+      
+      <ng-template #abpFooter>
+        <button type="button" class="btn btn-outline-primary" abpClose>
+          {{ 'AbpIdentity::Cancel' | abpLocalization }}
+        </button>
+        <!-- <abp-button iconClass="fa fa-check" [disabled]="roleForm?.invalid" (click)="save()">{{
+          'AbpIdentity::Save' | abpLocalization
+          }}</abp-button> -->
+      </ng-template>
+    </abp-modal>
+  
+    <abp-permission-management
+      #abpPermissionManagement="abpPermissionManagement"
+      *abpReplaceableTemplate="
+      {
+        inputs: {
+          providerName: { value: 'R' },
+          providerKey: { value: providerKey },
+          visible: { value: visiblePermissions, twoWay: true },
+          hideBadges: { value: true }
+        },
+        outputs: { visibleChange: onVisiblePermissionChange },
+        componentKey: permissionManagementKey
+      };
+      let init = initTemplate
+    "
+      (abpInit)="init(abpPermissionManagement)"
+    >
+    </abp-permission-management>
+  </abp-page>
+  

angular/src/app/modules/custom-identity/custom-roles/custom-roles.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomRolesComponent } from './custom-roles.component';
+
+describe('CustomRolesComponent', () => {
+  let component: CustomRolesComponent;
+  let fixture: ComponentFixture<CustomRolesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CustomRolesComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CustomRolesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/modules/custom-identity/custom-roles/custom-roles.component.ts

@@ -0,0 +1,213 @@
+import {
+  ExtensibleModule,
+  EXTENSIONS_IDENTIFIER,
+  FormPropData,
+  generateFormFromProps,
+} from '@abp/ng.components/extensible';
+import { PageModule } from '@abp/ng.components/page';
+import {
+  CoreModule,
+  ListResultDto,
+  ListService,
+  LocalizationModule,
+  PagedAndSortedResultRequestDto,
+  PagedResultDto,
+} from '@abp/ng.core';
+import { IdentityRoleCreateDto, IdentityRoleDto, IdentityRoleService, IdentityRoleUpdateDto } from '@abp/ng.identity/proxy';
+import {
+  ThemeSharedModule,
+  ConfirmationService,
+  ToasterService,
+  Confirmation,
+} from '@abp/ng.theme.shared';
+import { CommonModule } from '@angular/common';
+import { Component, inject, Injector, OnInit } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, UntypedFormGroup, Validators } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { TableModule } from 'primeng/table';
+import { finalize } from 'rxjs';
+import { ePermissionManagementComponents } from '@abp/ng.permission-management';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { eIdentityComponents } from '@abp/ng.identity';
+import { PermissionManagementModule } from '@abp/ng.permission-management';
+import {  NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { MenuItem } from 'primeng/api';
+import { Dropdown, DropdownModule } from 'primeng/dropdown';
+
+@Component({
+  selector: 'app-custom-roles',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    TableModule,
+    ButtonModule,
+    PageModule,
+    LocalizationModule,
+    ThemeSharedModule,
+    NgxDatatableModule,
+    ExtensibleModule,
+    PermissionManagementModule,
+    CoreModule,
+    NgbNavModule,
+    DropdownModule
+  ],
+  templateUrl: './custom-roles.component.html',
+  providers: [
+    ListService,
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: eIdentityComponents.Roles,
+    },
+  ],
+  styleUrl: './custom-roles.component.scss',
+})
+export class CustomRolesComponent implements OnInit {
+  protected readonly list = inject(ListService<PagedAndSortedResultRequestDto>);
+  protected readonly confirmationService = inject(ConfirmationService);
+  protected readonly toasterService = inject(ToasterService);
+  private readonly injector = inject(Injector);
+  protected readonly service = inject(IdentityRoleService);
+
+  data: PagedResultDto<IdentityRoleDto> = { items: [], totalCount: 0 };
+
+  form!: UntypedFormGroup;
+
+  selected?: IdentityRoleDto;
+
+  isModalVisible!: boolean;
+
+  visiblePermissions = false;
+
+  providerKey?: string;
+
+  modalBusy = false;
+
+  permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
+
+  onVisiblePermissionChange = (event: boolean) => {
+    this.visiblePermissions = event;
+  };
+
+  ngOnInit() {
+   
+    this.hookToQuery();
+  }
+
+  // buildForm() {
+  //   const data = new FormPropData(this.injector, this.selected);
+  //   this.form = generateFormFromProps(data);
+  // }
+  buildForm() {
+    this.form = new FormGroup({
+      name: new FormControl(this.selected?.name || '', Validators.required),
+      isDefault: new FormControl(this.selected?.isDefault || false),
+      isPublic: new FormControl(this.selected?.isPublic || false)
+    });
+  
+  }
+   
+  openModal() {
+    this.buildForm();
+    this.isModalVisible = true;
+  }
+
+  add() {
+    debugger
+    // this.selected = {} as IdentityRoleDto;
+    // this.openModal();
+    this.selected = { name: '', isDefault: false, isPublic: false } as IdentityRoleDto;
+    this.isModalVisible = true;
+  }
+
+  edit(id: string) {
+    debugger
+    // this.service.get(id).subscribe(res => {
+    //   this.selected = res;
+    //   this.openModal();
+    // });
+    this.service.get(id).subscribe(res => {
+      this.selected = res;
+      this.isModalVisible = true;
+    });
+  }
+
+  // save() {
+  //   debugger
+  //   if (!this.form.valid) return;
+  //   this.modalBusy = true;
+
+  //   const { id } = this.selected || {};
+  //   (id
+  //     ? this.service.update(id, { ...this.selected, ...this.form.value })
+  //     : this.service.create(this.form.value)
+  //   )
+  //     .pipe(finalize(() => (this.modalBusy = false)))
+  //     .subscribe(() => {
+  //       this.isModalVisible = false;
+  //       this.toasterService.success('AbpUi::SavedSuccessfully');
+  //       this.list.get();
+  //     });
+  // }
+  save() {
+    debugger
+    if (!this.selected?.name) {
+      return;
+    }
+  
+    this.modalBusy = true;
+  
+    const { id, name, isDefault, isPublic, concurrencyStamp } = this.selected;
+  
+    const roleDto = {
+      name,
+      isDefault,
+      isPublic,
+      concurrencyStamp
+    };
+  
+    const saveObservable = id
+      ? this.service.update(id, roleDto)  // Update call
+      : this.service.create(roleDto);    // Create call
+  
+    saveObservable
+      .pipe(finalize(() => (this.modalBusy = false)))  
+      .subscribe(() => {
+        this.isModalVisible = false;
+        this.toasterService.success('AbpUi::SavedSuccessfully');
+        this.list.get();
+      });
+  }
+  
+  
+  
+  delete(id: string, name: string) {
+    this.confirmationService
+      .warn('AbpIdentity::RoleDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', {
+        messageLocalizationParams: [name],
+      })
+      .subscribe((status: Confirmation.Status) => {
+        if (status === Confirmation.Status.confirm) {
+          this.toasterService.success('AbpUi::DeletedSuccessfully');
+          this.service.delete(id).subscribe(() => this.list.get());
+        }
+      });
+  }
+
+  private hookToQuery() {
+    this.list.hookToQuery(query => this.service.getList(query)).subscribe(res => (this.data = res));
+  }
+
+  openPermissionsModal(providerKey: string) {
+    this.providerKey = providerKey;
+    setTimeout(() => {
+      this.visiblePermissions = true;
+    }, 0);
+  }
+
+  sort(data: any) {
+    const { prop, dir } = data.sorts[0];
+    this.list.sortKey = prop;
+    this.list.sortOrder = dir;
+  }
+}

angular/src/app/modules/custom-identity/custom-users/custom-users.component.html

@@ -0,0 +1,332 @@
+<!-- <div>
+  <h3>Total Users: {{ data.totalCount }}</h3>
+  <ul>
+    <li *ngFor="let user of data.items">
+      <strong>{{ user.userName }}</strong> ({{ user.email }})
+    </li>
+  </ul>
+</div> -->
+
+<abp-page [title]="'AbpIdentity::Users' | abpLocalization" [toolbar]="data.items">
+  <div id="identity-roles-wrapper" class="card">
+    <div class="card-body">
+      <div id="data-tables-table-filter" class="data-tables-filter mb-3">
+        <div class="flex justify-content-between align-items-center mb-3">
+          <button
+            pButton
+            icon="pi pi-plus"
+            label="Add User"
+            class="p-button-success"
+            (click)="add()"
+          ></button>
+        </div>
+        <div class="input-group">
+          <input
+            type="search"
+            class="form-control"
+            [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
+            [(ngModel)]="list.filter"
+          />
+        </div>
+      </div>
+
+      <!--   
+        <abp-extensible-table
+        
+          [data]="data.items"
+          [recordsTotal]="data.totalCount"
+          [list]="list"
+          
+        ></abp-extensible-table> -->
+      <p-table
+        [value]="data.items"
+        [tableStyle]="{ 'min-width': '60rem' }"
+        [paginator]="true"
+        [rows]="5"
+        responsiveLayout="scroll"
+      >
+        <ng-template pTemplate="header">
+          <tr>
+            <th pSortableColumn="userName">Username <p-sortIcon field="userName"></p-sortIcon></th>
+            <th pSortableColumn="name">First Name <p-sortIcon field="name"></p-sortIcon></th>
+            <th pSortableColumn="surname">Last Name <p-sortIcon field="surname"></p-sortIcon></th>
+            <th pSortableColumn="email">Email <p-sortIcon field="email"></p-sortIcon></th>
+            <th pSortableColumn="Phone">Phone No <p-sortIcon field="Phone"></p-sortIcon></th>
+            <th>Status</th>
+            <th>Actions</th>
+          </tr>
+        </ng-template>
+
+        <ng-template pTemplate="body" let-user>
+          <tr>
+            <td>{{ user.userName }}</td>
+            <td>{{ user.name }}</td>
+            <td>{{ user.surname }}</td>
+            <td>{{ user.email }}</td>
+            <td>{{ user.phoneNumber }}</td>
+            <td>
+              <p-tag
+                [value]="user.isActive ? 'Active' : 'Inactive'"
+                [severity]="user.isActive ? 'success' : 'danger'"
+              ></p-tag>
+            </td>
+            <td>
+              <div class="btn-group" dropdown placement="bottom left" container="body">
+                <p-splitButton
+                  label="Actions"
+                  icon="pi pi-cog"
+                  class="p-button-sm p-button-primary"
+                  [model]="actionItems"
+                  (onClick)="editUser(user.id)"
+                >
+                </p-splitButton>
+              </div>
+              <!-- <button
+                pButton
+                icon="pi pi-pencil"
+                class="p-button-text p-button-primary"
+                (click)="edit(user.id)"
+              ></button>
+              <button
+                pButton
+                icon="pi pi-trash"
+                class="p-button-text p-button-danger"
+                (click)="delete(user.id, user.userName)"
+              ></button>
+              <button
+                pButton
+                icon="pi pi-lock"
+                class="p-button-text p-button-success"
+                (click)="openPermissionsModal(user.id, user.userName)"
+              ></button> -->
+              <!-- <div class="btn-group" dropdown placement="bottom left" container="body">
+                <button
+                  id="dropdownButton"
+                  type="button"
+                  class="btn btn-primary btn-sm dropdown-toggle"
+                  dropdownToggle
+                  aria-controls="dropdownMenu"
+                  (click)="toggleDropdown()"
+                >
+                  <i class="fa fa-cog"></i>
+                  <span class="caret"></span>
+                  Actions
+                </button>
+                <ul
+                  id="dropdownMenu"
+                  #dropdownMenu
+                  class="dropdown-menu"
+                  role="menu"
+                  aria-labelledby="dropdownButton"
+
+                >
+                  <li role="menuitem" tabindex="0">
+                    <a
+                      #firstDropdownItem
+                      class="dropdown-item"
+                      href="javascript:;"
+                      (click)="edit(user.id)"
+                    >
+                      Edit
+                    </a>
+                  </li>
+                 
+                </ul>
+              </div> -->
+            </td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </div>
+  </div>
+
+  <abp-modal [(visible)]="isModalVisible" [busy]="modalBusy">
+    <ng-template #abpHeader>
+      <h3>
+        {{ (selected?.id ? 'AbpIdentity::EditUser' : 'AbpIdentity::NewUser') | abpLocalization }}
+      </h3>
+    </ng-template>
+
+    <ng-template #abpBody>
+      <form #userForm="ngForm" (ngSubmit)="save(userForm)">
+        <!-- User Information Tab -->
+        <ul ngbNav #nav="ngbNav" class="nav-tabs">
+          <li ngbNavItem>
+            <a ngbNavLink>{{ 'AbpIdentity::UserInformations' | abpLocalization }}</a>
+            <ng-template ngbNavContent>
+              <div class="form-group">
+                <label for="userName">{{ 'User Name' | abpLocalization }}</label>
+                <input
+                  id="userName"
+                  type="text"
+                  class="form-control"
+                  [(ngModel)]="selected.userName"
+                  name="userName"
+                  required
+                  #userName="ngModel"
+                />
+                <div *ngIf="userName.invalid && userName.touched" class="text-danger">
+                  User Name is required
+                </div>
+              </div>
+
+              <!-- Password -->
+              <div class="form-group" *ngIf="!selected.id">
+                <label for="password">Password</label>
+                <input
+                  id="password"
+                  type="password"
+                  class="form-control"
+                  [(ngModel)]="password"
+                  name="password"
+                  required
+                  #passwordField="ngModel"
+                />
+                <div *ngIf="passwordField.invalid && passwordField.touched" class="text-danger">
+                  Password is required
+                </div>
+              </div>
+
+              <!-- Name -->
+              <div class="form-group">
+                <label for="name">{{ 'Name' | abpLocalization }}</label>
+                <input
+                  id="name"
+                  type="text"
+                  class="form-control"
+                  [(ngModel)]="selected.name"
+                  name="name"
+                  #name="ngModel"
+                />
+              </div>
+
+              <!-- Surname -->
+              <div class="form-group">
+                <label for="surname">{{ 'Surname' | abpLocalization }}</label>
+                <input
+                  id="surname"
+                  type="text"
+                  class="form-control"
+                  [(ngModel)]="selected.surname"
+                  name="surname"
+                  #surname="ngModel"
+                />
+              </div>
+
+              <!-- Email -->
+              <div class="form-group">
+                <label for="email">{{ 'Email' | abpLocalization }}</label>
+                <input
+                  id="email"
+                  type="email"
+                  class="form-control"
+                  [(ngModel)]="selected.email"
+                  name="email"
+                  required
+                  #email="ngModel"
+                />
+                <div *ngIf="email.invalid && email.touched" class="text-danger">
+                  Valid Email is required
+                </div>
+              </div>
+
+              <!-- Phone Number -->
+              <div class="form-group">
+                <label for="phoneNumber">{{ 'Phone Number' | abpLocalization }}</label>
+                <input
+                  id="phoneNumber"
+                  type="text"
+                  class="form-control"
+                  [(ngModel)]="selected.phoneNumber"
+                  name="phoneNumber"
+                  #phoneNumber="ngModel"
+                />
+              </div>
+
+              <!-- Active Account (Checkbox) -->
+              <div class="form-check">
+                <input
+                  id="isActive"
+                  type="checkbox"
+                  class="form-check-input"
+                  [(ngModel)]="selected.isActive"
+                  name="isActive"
+                />
+                <label for="isActive" class="form-check-label">{{
+                  'Active' | abpLocalization
+                }}</label>
+              </div>
+
+              <!-- Lockout Enabled (Checkbox) -->
+              <div class="form-check">
+                <input
+                  id="lockoutEnabled"
+                  type="checkbox"
+                  class="form-check-input"
+                  [(ngModel)]="selected.lockoutEnabled"
+                  name="lockoutEnabled"
+                />
+                <label for="lockoutEnabled" class="form-check-label">{{
+                  'Lockout Enabled' | abpLocalization
+                }}</label>
+              </div>
+            </ng-template>
+          </li>
+
+          <!-- Roles Tab -->
+          <li ngbNavItem>
+            <a ngbNavLink>{{ 'AbpIdentity::Roles' | abpLocalization }}</a>
+            <ng-template ngbNavContent>
+              <div *ngFor="let role of roles; let i = index">
+                <div class="form-check mb-2">
+                  <label class="form-check-label">
+                    <input
+                      type="checkbox"
+                      class="form-check-input"
+                      [(ngModel)]="role.selected"
+                      name="role-{{ i }}"
+                    />
+                    {{ role.name }}
+                  </label>
+                </div>
+              </div>
+            </ng-template>
+          </li>
+        </ul>
+        <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
+
+        <div class="mt-3">
+          <button type="submit" class="btn btn-primary" [disabled]="userForm.invalid">Save</button>
+        </div>
+      </form>
+    </ng-template>
+
+    <ng-template #abpFooter>
+      <button type="button" class="btn btn-outline-primary" abpClose>
+        {{ 'AbpIdentity::Cancel' | abpLocalization }}
+      </button>
+      <!-- <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">{{
+          'AbpIdentity::Save' | abpLocalization
+        }}</abp-button> -->
+    </ng-template>
+  </abp-modal>
+
+  <abp-permission-management
+    #abpPermissionManagement="abpPermissionManagement"
+    *abpReplaceableTemplate="
+      {
+        inputs: {
+          providerName: { value: 'U' },
+          providerKey: { value: providerKey },
+          visible: { value: visiblePermissions, twoWay: true }
+        },
+        outputs: { visibleChange: onVisiblePermissionChange },
+        componentKey: permissionManagementKey
+      };
+      let init = initTemplate
+    "
+    [entityDisplayName]="entityDisplayName"
+    (abpInit)="init(abpPermissionManagement)"
+  >
+  </abp-permission-management>
+</abp-page>

angular/src/app/modules/custom-identity/custom-users/custom-users.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomUsersComponent } from './custom-users.component';
+
+describe('CustomUsersComponent', () => {
+  let component: CustomUsersComponent;
+  let fixture: ComponentFixture<CustomUsersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CustomUsersComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CustomUsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/modules/custom-identity/custom-users/custom-users.component.ts

@@ -0,0 +1,395 @@
+import {
+  FormPropData,
+  EXTENSIONS_IDENTIFIER,
+  generateFormFromProps,
+  ExtensibleModule,
+} from '@abp/ng.components/extensible';
+import { PageModule } from '@abp/ng.components/page';
+import {
+  CoreModule,
+  ListResultDto,
+  ListService,
+  LocalizationModule,
+  PagedResultDto,
+} from '@abp/ng.core';
+import { eIdentityComponents } from '@abp/ng.identity';
+import {
+  GetIdentityUsersInput,
+  IdentityRoleDto,
+  IdentityUserDto,
+  IdentityUserService,
+  IdentityUserUpdateDto,
+} from '@abp/ng.identity/proxy';
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  ElementRef,
+  HostListener,
+  inject,
+  Injector,
+  OnInit,
+  TemplateRef,
+  TrackByFunction,
+  ViewChild,
+} from '@angular/core';
+import {
+  AbstractControl,
+  FormsModule,
+  NgForm,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+} from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { TableModule } from 'primeng/table';
+import {
+  Confirmation,
+  eFormComponets,
+  ThemeSharedModule,
+  ToasterService,
+  ConfirmationService,
+} from '@abp/ng.theme.shared';
+import { finalize, switchMap, tap } from 'rxjs';
+import {
+  ePermissionManagementComponents,
+  PermissionManagementModule,
+} from '@abp/ng.permission-management';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { PaginatorModule } from 'primeng/paginator';
+import { TagModule } from 'primeng/tag'; // For active/inactive status
+import { SplitButtonModule } from 'primeng/splitbutton';
+
+@Component({
+  selector: 'app-custom-users',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    TableModule,
+    ButtonModule,
+    PageModule,
+    LocalizationModule,
+    ThemeSharedModule,
+    NgxDatatableModule,
+    ExtensibleModule,
+    PermissionManagementModule,
+    CoreModule,
+    NgbNavModule,
+    PaginatorModule,
+    TagModule,SplitButtonModule
+  ],
+  templateUrl: './custom-users.component.html',
+  providers: [
+    ListService,
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: eIdentityComponents.Users,
+    },
+  ],
+  styleUrl: './custom-users.component.scss',
+})
+export class CustomUsersComponent implements OnInit {
+  protected readonly list = inject(ListService<GetIdentityUsersInput>);
+  protected readonly confirmationService = inject(ConfirmationService);
+  protected readonly service = inject(IdentityUserService);
+  protected readonly toasterService = inject(ToasterService);
+  private readonly fb = inject(UntypedFormBuilder);
+  private readonly injector = inject(Injector);
+  @ViewChild('firstDropdownItem') firstDropdownItem: ElementRef;
+
+  data: PagedResultDto<IdentityUserDto> = { items: [], totalCount: 0 };
+
+  @ViewChild('modalContent', { static: false })
+  modalContent!: TemplateRef<any>;
+
+  form!: UntypedFormGroup;
+  password:string;
+  selected?: IdentityUserDto;
+
+  selectedUserRoles?: IdentityRoleDto[];
+
+  // roles?: IdentityRoleDto[];
+  roles: (IdentityRoleDto & { selected: boolean })[] = []; // Use intersection type to add 'selected'
+
+  visiblePermissions = false;
+
+  providerKey?: string;
+
+  isModalVisible?: boolean;
+
+  modalBusy = false;
+
+  permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
+
+  entityDisplayName: string;
+
+  inputKey = eFormComponets.FormCheckboxComponent;
+
+  trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
+  isDropdownOpen = false;
+
+  toggleDropdown() {
+    this.isDropdownOpen = !this.isDropdownOpen;
+
+    // After the dropdown is shown, focus the first item in the dropdown
+    setTimeout(() => {
+      if (this.firstDropdownItem) {
+        this.firstDropdownItem.nativeElement.focus();
+      }
+    }, 100); // Delay to ensure dropdown is rendered
+  }
+
+  closeDropdown() {
+    this.isDropdownOpen = false;
+  }
+  actionItems = [
+    { label: 'Edit', icon: 'pi pi-pencil', command: () => this.edit("") },
+    { label: 'Delete', icon: 'pi pi-trash', command: () => this.delete("","") },
+  //  { label: 'Permissions', icon: 'pi pi-shield', command: () => this.openPermissionsModal("") },
+  ];
+
+
+
+  onVisiblePermissionChange = (event: boolean) => {
+    debugger
+    this.visiblePermissions = event;
+  };
+
+  get roleGroups(): UntypedFormGroup[] {
+    return ((this.form.get('roleNames') as UntypedFormArray)?.controls as UntypedFormGroup[]) || [];
+  }
+
+  ngOnInit() {
+    this.hookToQuery();
+  }
+  formValid() {
+    return true;
+  }
+  // buildForm() {
+  //   debugger
+  //   const data = new FormPropData(this.injector, this.selected);
+  //   this.form = generateFormFromProps(data);
+
+  //   this.service.getAssignableRoles().subscribe(({ items }) => {
+  //     this.roles = items;
+  //     if (this.roles) {
+  //       this.form.addControl(
+  //         'roleNames',
+  //         this.fb.array(
+  //           this.roles.map(role =>
+  //             this.fb.group({
+  //               [role.name as string]: [
+  //                 this.selected?.id
+  //                   ? !!this.selectedUserRoles?.find(userRole => userRole.id === role.id)
+  //                   : role.isDefault,
+  //               ],
+  //             }),
+  //           ),
+  //         ),
+  //       );
+  //     }
+  //   });
+  // }
+
+  // openModal() {
+  //   this.buildForm();
+  //   this.isModalVisible = true;
+  // }
+
+  // add() {
+  //   debugger
+  //   this.selected = {} as IdentityUserDto;
+  //   this.selectedUserRoles = [] as IdentityRoleDto[];
+  //   this.openModal();
+  // }
+
+  // edit(id: string) {
+  //   debugger
+  //   this.service
+  //     .get(id)
+  //     .pipe(
+  //       tap(user => (this.selected = user)),
+  //       switchMap(() => this.service.getRoles(id)),
+  //     )
+  //     .subscribe(userRole => {
+  //   debugger
+
+  //       this.selectedUserRoles = userRole.items || [];
+  //       this.openModal();
+  //     });
+  // }
+
+  // save() {
+  //   if (!this.form.valid || this.modalBusy) return;
+  //   this.modalBusy = true;
+
+  //   const { roleNames = [] } = this.form.value;
+  //   const mappedRoleNames =
+  //     roleNames
+  //       .filter((role: { [key: string]: any }) => !!role[Object.keys(role)[0]])
+  //       .map((role: { [key: string]: any }) => Object.keys(role)[0]) || [];
+
+  //   const { id } = this.selected || {};
+
+  //   (id
+  //     ? this.service.update(id, {
+  //         ...this.selected,
+  //         ...this.form.value,
+  //         roleNames: mappedRoleNames,
+  //       })
+  //     : this.service.create({ ...this.form.value, roleNames: mappedRoleNames })
+  //   )
+  //     .pipe(finalize(() => (this.modalBusy = false)))
+  //     .subscribe(() => {
+  //       this.isModalVisible = false;
+  //       this.toasterService.success('AbpUi::SavedSuccessfully');
+  //       this.list.get();
+  //     });
+  // }
+  buildForm() {
+    this.service.getAssignableRoles().subscribe(({ items }) => {
+      this.roles = items.map(role => ({
+        ...role,
+        selected: this.selectedUserRoles.some(userRole => userRole.id === role.id),
+      }));
+
+      // Initialize the selected roles based on existing data for selected user
+      if (this.selected?.id) {
+        this.roles.forEach(role => {
+          role.selected = this.selectedUserRoles.some(userRole => userRole.id === role.id);
+        });
+      } else {
+        // Default values when creating a new user
+        this.roles.forEach(role => {
+          role.selected = role.isDefault;
+        });
+      }
+    });
+  }
+
+  openModal() {
+    this.loadRoles(); // Load roles when modal opens
+    this.isModalVisible = true;
+  }
+  loadRoles() {
+    this.service.getAssignableRoles().subscribe(({ items }) => {
+      this.roles = items.map(role => ({
+        ...role, // spread IdentityRoleDto properties
+        selected: false, // Initially no role is selected
+      }));
+    });
+  }
+  add() {
+    this.selected = {} as IdentityUserDto;
+    this.selectedUserRoles = [] as IdentityRoleDto[];
+    this.password = ''; // Store password separately
+
+    this.openModal();
+  }
+
+  edit(id: string) {
+    this.service
+      .get(id)
+      .pipe(finalize(() => this.buildForm()))
+      .subscribe(user => {
+        this.selected = user;
+        this.service.getRoles(id).subscribe(userRoles => {
+          this.selectedUserRoles = userRoles.items || [];
+        });
+      });
+    this.openModal();
+  }
+
+  // Save user data (either create or update)
+  save(form: NgForm) {
+    debugger;
+    if (this.modalBusy || form.invalid) return;
+
+    this.modalBusy = true;
+
+    // Prepare roleNames array
+ // Prepare roleNames array
+ const selectedRoleNames = this.roles
+ .filter(role => role.selected) // Only include selected roles
+ .map(role => role.name); // Extract role names
+
+    // Create user payload
+
+    const userPayload: any = {
+      userName: this.selected.userName,
+      name: this.selected.name,
+      surname: this.selected.surname,
+      email: this.selected.email,
+      phoneNumber: this.selected.phoneNumber,
+      isActive: this.selected.isActive,
+      lockoutEnabled: this.selected.lockoutEnabled,
+      roleNames: selectedRoleNames, // Include selected roles
+
+    };
+  
+    // Only include password if creating a new user
+    if (!this.selected.id && this.password) {
+      userPayload.password = this.password;
+    }
+    // Handle create or update
+    const saveObservable = this.selected.id
+      ? this.service.update(this.selected.id, userPayload) // Update if id exists
+      : this.service.create(userPayload); // Create if no id
+
+    saveObservable.pipe(finalize(() => (this.modalBusy = false))).subscribe(() => {
+      this.isModalVisible = false;
+      this.toasterService.success('AbpUi::SavedSuccessfully');
+      this.list.get(); // Reload the list if needed
+    });
+  }
+
+  private getRoleNames() {
+    return this.roles.filter(role => role.selected).map(role => role.name);
+  }
+
+  delete(id: string, userName: string) {
+    this.confirmationService
+      .warn('AbpIdentity::UserDeletionConfirmationMessage', 'AbpIdentity::AreYouSure', {
+        messageLocalizationParams: [userName],
+      })
+      .subscribe((status: Confirmation.Status) => {
+        if (status === Confirmation.Status.confirm) {
+          this.service.delete(id).subscribe(() => {
+            this.toasterService.success('AbpUi::DeletedSuccessfully');
+            this.list.get();
+          });
+        }
+      });
+  }
+
+  sort(data: any) {
+    const { prop, dir } = data.sorts[0];
+    this.list.sortKey = prop;
+    this.list.sortOrder = dir;
+  }
+
+  // private hookToQuery() {
+  //   this.list.hookToQuery(query => this.service.getList(query)).subscribe(res => (this.data = res));
+  // }
+  private hookToQuery() {
+    this.list
+      .hookToQuery(query => {
+        console.log('Query:', query); // Log the query
+        return this.service.getList(query);
+      })
+      .subscribe(res => {
+        debugger;
+        this.data = res;
+      });
+  }
+
+  openPermissionsModal(providerKey: string, entityDisplayName?: string) {
+    debugger;
+    this.providerKey = providerKey;
+    this.entityDisplayName = entityDisplayName;
+    setTimeout(() => {
+      this.visiblePermissions = true;
+    }, 0);
+  }
+}

angular/src/app/route.provider.ts

@@ -7,6 +7,7 @@ export const APP_ROUTE_PROVIDER = [
 
 function configureRoutes(routesService: RoutesService) {
   return () => {
+ 
     routesService.add([
       {
         path: '/',
@@ -15,6 +16,7 @@ function configureRoutes(routesService: RoutesService) {
         order: 1,
         layout: eLayoutType.application,
       },
+  
       {
         path: '/appointment',
         name: 'Appointments',