diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.html
index bb6ef0c0..fe6cc195 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/access/access/access.component.html
@@ -8,39 +8,23 @@
             <nz-form-item>
               <nz-form-label nzFor="groupName">{{ 'mxk.groups.name' | i18n }}</nz-form-label>
               <nz-form-control>
-                <input
-                  nz-input
-                  [(ngModel)]="groupQuery.params.groupName"
-                  [ngModelOptions]="{ standalone: true }"
-                  name="groupName"
-                  placeholder=""
-                  id="groupName"
-                />
+                <input nz-input [(ngModel)]="groupQuery.params.groupName" [ngModelOptions]="{ standalone: true }"
+                  name="groupName" placeholder="" id="groupName" />
               </nz-form-control>
             </nz-form-item>
           </div>
           <div nz-col [nzSpan]="8" [class.text-right]="groupQuery.expandForm">
             <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="groupQuery.submitLoading">{{
               'mxk.text.query' | i18n
-            }}</button>
+              }}</button>
           </div>
         </form>
       </nz-card>
-      <nz-table
-        #dynamicTable
-        nzTableLayout="auto"
-        nzSize="small"
-        nzBordered
-        nzShowSizeChanger
-        [nzData]="groupQuery.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="groupQuery.results.records"
-        [nzPageSizeOptions]="groupQuery.params.pageSizeOptions"
-        [nzPageSize]="groupQuery.params.pageSize"
-        [nzPageIndex]="groupQuery.params.pageNumber"
-        [nzLoading]="this.groupQuery.tableLoading"
-        (nzQueryParams)="onGroupQueryParamsChange($event)"
-      >
+      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
+        [nzData]="groupQuery.results.rows" [nzFrontPagination]="false" [nzTotal]="groupQuery.results.records"
+        [nzPageSizeOptions]="groupQuery.params.pageSizeOptions" [nzPageSize]="groupQuery.params.pageSize"
+        [nzPageIndex]="groupQuery.params.pageNumber" [nzLoading]="this.groupQuery.tableLoading"
+        (nzQueryParams)="onGroupQueryParamsChange($event)">
         <thead>
           <tr>
             <th></th>
@@ -51,11 +35,8 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of groupQuery.results.rows">
-            <td
-              [nzChecked]="groupQuery.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"
-            ></td>
+            <td [nzChecked]="groupQuery.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"></td>
             <td nzAlign="left" style="display: none">
               <span>{{ data.id }}</span>
             </td>
@@ -74,37 +55,26 @@
             <div nz-col nzMd="10" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="roleName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
-                <input
-                  nz-input
-                  [(ngModel)]="query.params.groupName"
-                  [ngModelOptions]="{ standalone: true }"
-                  readonly
-                  placeholder=""
-                  disabled
-                />
+                <input nz-input [(ngModel)]="query.params.groupName" [ngModelOptions]="{ standalone: true }" readonly
+                  placeholder="" disabled />
               </nz-form-item>
             </div>
             <div nz-col nzMd="10" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="name">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
                 <nz-form-control>
-                  <input
-                    nz-input
-                    [(ngModel)]="query.params.appName"
-                    [ngModelOptions]="{ standalone: true }"
-                    name="appName"
-                    placeholder=""
-                    id="appName"
-                  />
+                  <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }"
+                    name="appName" placeholder="" id="appName" />
                 </nz-form-control>
               </nz-form-item>
             </div>
             <div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
-              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-              <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query'
+                | i18n }}</button>
+              <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset'
+                | i18n }}</button>
               <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-              >
+                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
             </div>
           </div>
         </form>
@@ -112,46 +82,25 @@
       <nz-card [nzBordered]="false">
         <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
           <div nz-col [nzSpan]="24" class="table-list-toolbar">
-            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-            <button
-              nz-button
-              type="button"
-              nz-popconfirm
-              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-              nzPopconfirmPlacement="left"
+            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n
+              }}</button>
+            <button nz-button type="button" nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
               [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-              (nzOnConfirm)="onBatchDelete()"
-              [nzType]="'primary'"
-              nzDanger
-              class="mx-sm"
-              >{{ 'mxk.text.delete' | i18n }}</button
-            >
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()"
+              [nzType]="'primary'" nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
           </div>
 
           <div nz-col nzMd="24" nzSm="24">
-            <nz-table
-              #dynamicTable
-              nzTableLayout="auto"
-              nzSize="small"
-              nzBordered
-              nzShowSizeChanger
-              [nzData]="query.results.rows"
-              [nzFrontPagination]="false"
-              [nzTotal]="query.results.records"
-              [nzPageSizeOptions]="query.params.pageSizeOptions"
-              [nzPageSize]="query.params.pageSize"
-              [nzPageIndex]="query.params.pageNumber"
-              [nzLoading]="this.query.tableLoading"
-              (nzQueryParams)="onQueryParamsChange($event)"
-            >
+            <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
+              [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
+              [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
+              [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+              (nzQueryParams)="onQueryParamsChange($event)">
               <thead>
                 <tr>
-                  <th
-                    [nzChecked]="query.checked"
-                    [nzIndeterminate]="query.indeterminate"
-                    (nzCheckedChange)="onTableAllChecked($event)"
-                  ></th>
+                  <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+                    (nzCheckedChange)="onTableAllChecked($event)"></th>
                   <th nzAlign="center" style="display: none">Id</th>
                   <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
                   <th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
@@ -162,11 +111,8 @@
               </thead>
               <tbody>
                 <tr *ngFor="let data of query.results.rows">
-                  <td
-                    [nzChecked]="query.tableCheckedId.has(data.id)"
-                    [nzDisabled]="data.disabled"
-                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-                  ></td>
+                  <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
                   <td nzAlign="left"> {{ data.groupName }}</td>
                   <td nzAlign="center"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
                   <td nzAlign="left"> {{ data.appName }}</td>
@@ -202,18 +148,11 @@
                   </td>
                   <td nzAlign="center" nzBreakWord="false">
                     <div nz-col>
-                      <button
-                        nz-button
-                        type="button"
-                        nz-popconfirm
-                        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-                        nzPopconfirmPlacement="left"
+                      <button nz-button type="button" nz-popconfirm
+                        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
                         [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-                        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-                        (nzOnConfirm)="onDelete(data.id)"
-                        nzDanger
-                        >{{ 'mxk.text.delete' | i18n }}</button
-                      >
+                        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)"
+                        nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
                     </div>
                   </td>
                 </tr>
@@ -224,4 +163,4 @@
       </nz-card>
     </div>
   </div>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html
index 6f6ec2dc..c9178d77 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/accounts/accounts.component.html
@@ -8,18 +8,12 @@
           <nz-form-label nzFor="appName">{{ 'mxk.accounts.appName' | i18n }}</nz-form-label>
           <nz-form-control>
             <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
-              <input
-                nz-input
-                [(ngModel)]="query.params.appName"
-                [ngModelOptions]="{ standalone: true }"
-                name="appName"
-                readonly
-                placeholder=""
-                id="appName"
-              />
+              <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" name="appName"
+                readonly placeholder="" id="appName" />
             </nz-input-group>
             <ng-template #suffixButton>
-              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n }}</button>
+              <button nz-button nzType="primary" (click)="onSelect($event)" nzSearch>{{ 'mxk.text.select' | i18n
+                }}</button>
             </ng-template>
           </nz-form-control>
         </nz-form-item>
@@ -28,24 +22,18 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.accounts.username' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.username"
-              [ngModelOptions]="{ standalone: true }"
-              name="username"
-              placeholder=""
-              id="username"
-            />
+            <input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }" name="username"
+              placeholder="" id="username" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
         <button nz-button type="reset" (click)="onReset()" class="mx-sm">{{ 'mxk.text.reset' | i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -53,39 +41,19 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button
-      nz-button
-      type="button"
-      nz-popconfirm
-      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-      nzPopconfirmPlacement="left"
-      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-      (nzOnConfirm)="onBatchDelete()"
-      [nzType]="'primary'"
-      nzDanger
-      class="mx-sm"
-      >{{ 'mxk.text.delete' | i18n }}</button
-    >
+    <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+      nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+    [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)">
     <thead>
       <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
         <th nzAlign="center" style="display: none">Id</th>
         <th nzAlign="center">{{ 'mxk.accounts.username' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.accounts.displayName' | i18n }}</th>
@@ -96,11 +64,8 @@
     </thead>
     <tbody>
       <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
+        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
         <td nzAlign="left" style="display: none">
           <span>{{ data.id }}</span>
         </td>
@@ -111,21 +76,14 @@
 
         <td nzAlign="center" nzBreakWord="false">
           <div nz-col>
-            <button
-              nz-button
-              type="button"
-              nz-popconfirm
-              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-              nzPopconfirmPlacement="left"
+            <button nz-button type="button" nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
               [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-              (nzOnConfirm)="onDelete(data.id)"
-              nzDanger
-              >{{ 'mxk.text.delete' | i18n }}</button
-            >
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)" nzDanger>{{
+              'mxk.text.delete' | i18n }}</button>
           </div>
         </td>
       </tr>
     </tbody>
   </nz-table>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html
index 6c829c4f..b4a9867b 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/apps/apps.component.html
@@ -7,14 +7,8 @@
         <nz-form-item>
           <nz-form-label nzFor="appName">{{ 'mxk.apps.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.appName"
-              [ngModelOptions]="{ standalone: true }"
-              name="appName"
-              placeholder=""
-              id="appName"
-            />
+            <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" name="appName"
+              placeholder="" id="appName" />
           </nz-form-control>
         </nz-form-item>
       </div>
@@ -40,11 +34,12 @@
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
         <nz-form-item>
-          <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-          <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+          <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+            i18n }}</button>
+          <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+            i18n }}</button>
           <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-            {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-          >
+            {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
         </nz-form-item>
       </div>
     </div>
@@ -54,42 +49,21 @@
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" (click)="onAddSelectProtocol($event)" [nzType]="'primary'" class="mx-sm">{{
       'mxk.text.add' | i18n
-    }}</button>
+      }}</button>
 
-    <button
-      nz-button
-      type="button"
-      nz-popconfirm
-      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-      nzPopconfirmPlacement="left"
-      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-      (nzOnConfirm)="onBatchDelete()"
-      [nzType]="'primary'"
-      nzDanger
-      class="mx-sm"
-      >{{ 'mxk.text.delete' | i18n }}</button
-    >
+    <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+      nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+    [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
       <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
 
         <th nzAlign="center">{{ 'mxk.apps.icon' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.text.id' | i18n }}</th>
@@ -103,11 +77,8 @@
     </thead>
     <tbody>
       <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
+        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
 
         <td nzAlign="center"><img height="30" border="0px" src="{{ data.iconBase64 }}" /></td>
         <td nzAlign="left"> {{ data.id }} </td>
@@ -144,15 +115,18 @@
           <div *ngIf="data.category == '1912'">{{ 'mxk.apps.category.1912' | i18n }}</div>
         </td>
         <td nzAlign="left"> {{ data.sortIndex }}</td>
-        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+            style="color: green"></i></td>
         <td nzAlign="center" nzBreakWord="false">
           <div nz-col>
-            <button nz-button type="button" (click)="onEdit($event, data.id, data.protocol)">{{ 'mxk.text.edit' | i18n }}</button>
+            <button nz-button type="button" (click)="onEdit($event, data.id, data.protocol)">{{ 'mxk.text.edit' | i18n
+              }}</button>
 
-            <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
+            <button nz-button type="button" (click)="onDelete($event, data.id)" nzDanger>{{ 'mxk.text.delete' | i18n
+              }}</button>
           </div>
         </td>
       </tr>
     </tbody>
   </nz-table>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.html
index c8534441..4527d2ed 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/accounts-strategy/accounts-strategy.component.html
@@ -7,17 +7,19 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.accountsstrategy.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input nz-input [(ngModel)]="query.params.name" [ngModelOptions]="{ standalone: true }" name="name" placeholder="" id="name" />
+            <input nz-input [(ngModel)]="query.params.name" [ngModelOptions]="{ standalone: true }" name="name"
+              placeholder="" id="name" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -25,84 +27,54 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button
-      nz-button
-      type="button"
-      nz-popconfirm
-      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-      nzPopconfirmPlacement="left"
-      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-      (nzOnConfirm)="onBatchDelete()"
-      [nzType]="'primary'"
-      nzDanger
-      class="mx-sm"
-      >{{ 'mxk.text.delete' | i18n }}</button
-    >
+    <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+      nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+    [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
       <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
         <th nzAlign="center" style="display: none">Id</th>
         <th nzAlign="center">{{ 'mxk.accountsstrategy.name' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.accountsstrategy.appIcon' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.accountsstrategy.appName' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.accountsstrategy.createType' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.text.status' | i18n }}</th>
-        <th nzAlign="center"
-          ><a>{{ 'mxk.text.action' | i18n }}</a></th
-        >
+        <th nzAlign="center"><a>{{ 'mxk.text.action' | i18n }}</a></th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
+        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
         <td nzAlign="left" style="display: none">
           <span>{{ data.id }}</span>
         </td>
         <td nzAlign="left"> {{ data.name }}</td>
         <td nzAlign="center"><img height="30" border="0px" src="{{ data.appIconBase64 }}" /></td>
         <td nzAlign="left"> {{ data.appName }}</td>
-        <td nzAlign="center">{{ data.createType == 'manual' ? ('mxk.text.manual' | i18n) : ('mxk.text.manual' | i18n) }} </td>
-        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+        <td nzAlign="center">{{ data.createType == 'manual' ? ('mxk.text.manual' | i18n) : ('mxk.text.manual' | i18n) }}
+        </td>
+        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+            style="color: green"></i></td>
         <td nzAlign="left" nzBreakWord="false">
           <div nz-col>
-            <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">{{ 'mxk.text.edit' | i18n }}</button>
-            <button
-              nz-button
-              type="button"
-              nz-popconfirm
-              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-              nzPopconfirmPlacement="left"
+            <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">{{ 'mxk.text.edit' |
+              i18n }}</button>
+            <button nz-button type="button" nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
               [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-              (nzOnConfirm)="onDelete(data.id)"
-              nzDanger
-              >{{ 'mxk.text.delete' | i18n }}</button
-            >
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)" nzDanger>{{
+              'mxk.text.delete' | i18n }}</button>
           </div>
         </td>
       </tr>
     </tbody>
   </nz-table>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.html
index afee300f..828f2d3c 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/adapters/adapters.component.html
@@ -7,17 +7,19 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.adapters.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input nz-input [(ngModel)]="query.params.name" [ngModelOptions]="{ standalone: true }" name="name" placeholder="" id="name" />
+            <input nz-input [(ngModel)]="query.params.name" [ngModelOptions]="{ standalone: true }" name="name"
+              placeholder="" id="name" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -25,57 +27,31 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button
-      nz-button
-      type="button"
-      nz-popconfirm
-      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-      nzPopconfirmPlacement="left"
-      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-      (nzOnConfirm)="onBatchDelete()"
-      [nzType]="'primary'"
-      nzDanger
-      class="mx-sm"
-      >{{ 'mxk.text.delete' | i18n }}</button
-    >
+    <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+      nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+    [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
       <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
         <th nzAlign="center" style="display: none">Id</th>
         <th nzAlign="center">{{ 'mxk.adapters.name' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.adapters.protocol' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.text.sortIndex' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.text.description' | i18n }}</th>
-        <th nzAlign="center"
-          ><a>{{ 'mxk.text.action' | i18n }}</a></th
-        >
+        <th nzAlign="center"><a>{{ 'mxk.text.action' | i18n }}</a></th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
+        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
         <td nzAlign="left" style="display: none">
           <span>{{ data.id }}</span>
         </td>
@@ -85,22 +61,16 @@
         <td nzAlign="left">{{ data.description }}</td>
         <td nzAlign="left" nzBreakWord="false">
           <div nz-col>
-            <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">{{ 'mxk.text.edit' | i18n }}</button>
-            <button
-              nz-button
-              type="button"
-              nz-popconfirm
-              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-              nzPopconfirmPlacement="left"
+            <button nz-button type="button" (click)="onEdit($event, data.id)" style="float: left">{{ 'mxk.text.edit' |
+              i18n }}</button>
+            <button nz-button type="button" nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
               [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-              (nzOnConfirm)="onDelete(data.id)"
-              nzDanger
-              >{{ 'mxk.text.delete' | i18n }}</button
-            >
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)" nzDanger>{{
+              'mxk.text.delete' | i18n }}</button>
           </div>
         </td>
       </tr>
     </tbody>
   </nz-table>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html
index 7a176f41..d850d1d7 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/connectors/connectors.component.html
@@ -7,24 +7,19 @@
         <nz-form-item>
           <nz-form-label nzFor="connName">{{ 'mxk.connectors.connName' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.connName"
-              [ngModelOptions]="{ standalone: true }"
-              name="connName"
-              placeholder=""
-              id="connName"
-            />
+            <input nz-input [(ngModel)]="query.params.connName" [ngModelOptions]="{ standalone: true }" name="connName"
+              placeholder="" id="connName" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -32,40 +27,19 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button
-      nz-button
-      type="button"
-      nz-popconfirm
-      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-      nzPopconfirmPlacement="left"
-      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-      (nzOnConfirm)="onBatchDelete()"
-      [nzType]="'primary'"
-      nzDanger
-      class="mx-sm"
-      >{{ 'mxk.text.delete' | i18n }}</button
-    >
+    <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+      nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+    [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
       <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
         <th nzAlign="center" style="display: none">Id</th>
         <th nzAlign="center">{{ 'mxk.connectors.connName' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.connectors.justInTime' | i18n }}</th>
@@ -75,11 +49,8 @@
     </thead>
     <tbody>
       <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
+        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
         <td nzAlign="left" style="display: none">
           <span>{{ data.id }}</span>
         </td>
@@ -87,25 +58,19 @@
         <td nzAlign="left"> {{ data.connName }}</td>
         <td nzAlign="center" *ngIf="data.justInTime == 1">{{ 'mxk.text.yes' | i18n }}</td>
         <td nzAlign="center" *ngIf="data.justInTime == 0">{{ 'mxk.text.no' | i18n }}</td>
-        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+            style="color: green"></i></td>
         <td nzAlign="center" nzBreakWord="false">
           <div nz-col>
             <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
-            <button
-              nz-button
-              type="button"
-              nz-popconfirm
-              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-              nzPopconfirmPlacement="left"
+            <button nz-button type="button" nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
               [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-              (nzOnConfirm)="onDelete(data.id)"
-              nzDanger
-              >{{ 'mxk.text.delete' | i18n }}</button
-            >
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)" nzDanger>{{
+              'mxk.text.delete' | i18n }}</button>
           </div>
         </td>
       </tr>
     </tbody>
   </nz-table>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html
index 6fdcd862..cb66e3aa 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/socials-provider/socials-provider.component.html
@@ -7,24 +7,19 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.socialsproviders.providerName' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.providerName"
-              [ngModelOptions]="{ standalone: true }"
-              name="providerName"
-              placeholder=""
-              id="providerName"
-            />
+            <input nz-input [(ngModel)]="query.params.providerName" [ngModelOptions]="{ standalone: true }"
+              name="providerName" placeholder="" id="providerName" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -32,40 +27,19 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button
-      nz-button
-      type="button"
-      nz-popconfirm
-      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-      nzPopconfirmPlacement="left"
-      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-      (nzOnConfirm)="onBatchDelete()"
-      [nzType]="'primary'"
-      nzDanger
-      class="mx-sm"
-      >{{ 'mxk.text.delete' | i18n }}</button
-    >
+    <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+      nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+    [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
       <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
         <th nzAlign="center" style="display: none">Id</th>
         <th nzAlign="center">{{ 'mxk.socialsproviders.icon' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.socialsproviders.provider' | i18n }}</th>
@@ -80,11 +54,8 @@
     </thead>
     <tbody>
       <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
+        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
         <td nzAlign="left" style="display: none">
           <span>{{ data.id }}</span>
         </td>
@@ -92,28 +63,24 @@
         <td nzAlign="left"> {{ data.provider }}</td>
         <td nzAlign="left"> {{ data.providerName }}</td>
         <td nzAlign="center"> {{ data.sortIndex }}</td>
-        <td nzAlign="center"> <i *ngIf="data.display == 'true'" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
-        <td nzAlign="center"> <i *ngIf="data.scanCode == 'true'" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+        <td nzAlign="center"> <i *ngIf="data.display == 'true'" nz-icon nzType="check-circle" nzTheme="fill"
+            style="color: green"></i></td>
+        <td nzAlign="center"> <i *ngIf="data.scanCode == 'true'" nz-icon nzType="check-circle" nzTheme="fill"
+            style="color: green"></i></td>
 
-        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+            style="color: green"></i></td>
         <td nzAlign="center" nzBreakWord="false">
           <div nz-col>
             <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
-            <button
-              nz-button
-              type="button"
-              nz-popconfirm
-              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-              nzPopconfirmPlacement="left"
+            <button nz-button type="button" nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
               [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-              (nzOnConfirm)="onDelete(data.id)"
-              nzDanger
-              >{{ 'mxk.text.delete' | i18n }}</button
-            >
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)" nzDanger>{{
+              'mxk.text.delete' | i18n }}</button>
           </div>
         </td>
       </tr>
     </tbody>
   </nz-table>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html
index 3196aa7e..6b5dcb8b 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/config/synchronizers/synchronizers.component.html
@@ -7,17 +7,19 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.synchronizers.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input nz-input [(ngModel)]="query.params.name" [ngModelOptions]="{ standalone: true }" name="name" placeholder="" id="name" />
+            <input nz-input [(ngModel)]="query.params.name" [ngModelOptions]="{ standalone: true }" name="name"
+              placeholder="" id="name" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -25,40 +27,19 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button
-      nz-button
-      type="button"
-      nz-popconfirm
-      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-      nzPopconfirmPlacement="left"
-      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-      (nzOnConfirm)="onBatchDelete()"
-      [nzType]="'primary'"
-      nzDanger
-      class="mx-sm"
-      >{{ 'mxk.text.delete' | i18n }}</button
-    >
+    <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+      nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+    [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
       <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
         <th nzAlign="center" style="display: none">Id</th>
         <th nzAlign="center">{{ 'mxk.synchronizers.name' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.synchronizers.scheduler' | i18n }}</th>
@@ -68,37 +49,28 @@
     </thead>
     <tbody>
       <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
+        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
         <td nzAlign="left" style="display: none">
           <span>{{ data.id }}</span>
         </td>
 
         <td nzAlign="left"> {{ data.name }}</td>
         <td nzAlign="left"> {{ data.scheduler }}</td>
-        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+        <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+            style="color: green"></i></td>
         <td nzAlign="center" nzBreakWord="false">
           <div nz-col>
             <button nz-button type="button" (click)="onSynchr($event, data.id)">{{ 'mxk.text.synchr' | i18n }}</button>
             <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
-            <button
-              nz-button
-              type="button"
-              nz-popconfirm
-              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-              nzPopconfirmPlacement="left"
+            <button nz-button type="button" nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
               [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-              (nzOnConfirm)="onDelete(data.id)"
-              nzDanger
-              >{{ 'mxk.text.delete' | i18n }}</button
-            >
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)" nzDanger>{{
+              'mxk.text.delete' | i18n }}</button>
           </div>
         </td>
       </tr>
     </tbody>
   </nz-table>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.html
index 526fc2c5..126d4d9f 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/group-members/group-members.component.html
@@ -8,39 +8,23 @@
             <nz-form-item>
               <nz-form-label nzFor="groupName">{{ 'mxk.groups.name' | i18n }}</nz-form-label>
               <nz-form-control>
-                <input
-                  nz-input
-                  [(ngModel)]="groupQuery.params.groupName"
-                  [ngModelOptions]="{ standalone: true }"
-                  name="groupName"
-                  placeholder=""
-                  id="groupName"
-                />
+                <input nz-input [(ngModel)]="groupQuery.params.groupName" [ngModelOptions]="{ standalone: true }"
+                  name="groupName" placeholder="" id="groupName" />
               </nz-form-control>
             </nz-form-item>
           </div>
           <div nz-col [nzSpan]="8" [class.text-right]="groupQuery.expandForm">
             <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="groupQuery.submitLoading">{{
               'mxk.text.query' | i18n
-            }}</button>
+              }}</button>
           </div>
         </form>
       </nz-card>
-      <nz-table
-        #dynamicTable
-        nzTableLayout="auto"
-        nzSize="small"
-        nzBordered
-        nzShowSizeChanger
-        [nzData]="groupQuery.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="groupQuery.results.records"
-        [nzPageSizeOptions]="groupQuery.params.pageSizeOptions"
-        [nzPageSize]="groupQuery.params.pageSize"
-        [nzPageIndex]="groupQuery.params.pageNumber"
-        [nzLoading]="this.groupQuery.tableLoading"
-        (nzQueryParams)="onGroupQueryParamsChange($event)"
-      >
+      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
+        [nzData]="groupQuery.results.rows" [nzFrontPagination]="false" [nzTotal]="groupQuery.results.records"
+        [nzPageSizeOptions]="groupQuery.params.pageSizeOptions" [nzPageSize]="groupQuery.params.pageSize"
+        [nzPageIndex]="groupQuery.params.pageNumber" [nzLoading]="this.groupQuery.tableLoading"
+        (nzQueryParams)="onGroupQueryParamsChange($event)">
         <thead>
           <tr>
             <th></th>
@@ -51,11 +35,8 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of groupQuery.results.rows">
-            <td
-              [nzChecked]="groupQuery.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"
-            ></td>
+            <td [nzChecked]="groupQuery.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onGroupTableItemChecked(data.id, data.groupName, $event)"></td>
             <td nzAlign="left" style="display: none">
               <span>{{ data.id }}</span>
             </td>
@@ -74,37 +55,25 @@
             <div nz-col nzMd="8" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="groupName">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
-                <input
-                  nz-input
-                  [(ngModel)]="query.params.groupName"
-                  [ngModelOptions]="{ standalone: true }"
-                  readonly
-                  disabled
-                  placeholder=""
-                />
+                <input nz-input [(ngModel)]="query.params.groupName" [ngModelOptions]="{ standalone: true }" readonly
+                  disabled placeholder="" />
               </nz-form-item>
             </div>
             <div nz-col nzMd="8" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="name">{{ 'mxk.users.username' | i18n }}</nz-form-label>
                 <nz-form-control>
-                  <input
-                    nz-input
-                    [(ngModel)]="query.params.username"
-                    [ngModelOptions]="{ standalone: true }"
-                    name="username"
-                    placeholder=""
-                    id="username"
-                  />
+                  <input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }"
+                    name="username" placeholder="" id="username" />
                 </nz-form-control>
               </nz-form-item>
             </div>
             <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query'
+                | i18n }}</button>
               <button nz-button type="reset" (click)="onReset()" class="mx-sm">{{ 'mxk.text.reset' | i18n }}</button>
               <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-              >
+                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
             </div>
           </div>
         </form>
@@ -112,46 +81,25 @@
       <nz-card [nzBordered]="false">
         <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
           <div nz-col [nzSpan]="24" class="table-list-toolbar">
-            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-            <button
-              nz-button
-              type="button"
-              nz-popconfirm
-              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-              nzPopconfirmPlacement="left"
+            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n
+              }}</button>
+            <button nz-button type="button" nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
               [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-              (nzOnConfirm)="onBatchDelete()"
-              [nzType]="'primary'"
-              nzDanger
-              class="mx-sm"
-              >{{ 'mxk.text.delete' | i18n }}</button
-            >
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()"
+              [nzType]="'primary'" nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
           </div>
 
           <div nz-col nzMd="24" nzSm="24">
-            <nz-table
-              #dynamicTable
-              nzTableLayout="auto"
-              nzSize="small"
-              nzBordered
-              nzShowSizeChanger
-              [nzData]="query.results.rows"
-              [nzFrontPagination]="false"
-              [nzTotal]="query.results.records"
-              [nzPageSizeOptions]="query.params.pageSizeOptions"
-              [nzPageSize]="query.params.pageSize"
-              [nzPageIndex]="query.params.pageNumber"
-              [nzLoading]="this.query.tableLoading"
-              (nzQueryParams)="onQueryParamsChange($event)"
-            >
+            <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
+              [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
+              [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
+              [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+              (nzQueryParams)="onQueryParamsChange($event)">
               <thead>
                 <tr>
-                  <th
-                    [nzChecked]="query.checked"
-                    [nzIndeterminate]="query.indeterminate"
-                    (nzCheckedChange)="onTableAllChecked($event)"
-                  ></th>
+                  <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+                    (nzCheckedChange)="onTableAllChecked($event)"></th>
                   <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
                   <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
                   <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
@@ -163,32 +111,22 @@
               </thead>
               <tbody>
                 <tr *ngFor="let data of query.results.rows">
-                  <td
-                    [nzChecked]="query.tableCheckedId.has(data.id)"
-                    [nzDisabled]="data.disabled"
-                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-                  ></td>
+                  <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
                   <td nzAlign="left"> {{ data.groupName }}</td>
                   <td nzAlign="left"> {{ data.username }}</td>
                   <td nzAlign="left"> {{ data.displayName }}</td>
                   <td nzAlign="left"> {{ data.department }}</td>
                   <td nzAlign="left"> {{ data.jobTitle }}</td>
-                  <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' | i18n) }}</td>
+                  <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) :
+                    ('mxk.users.gender.male' | i18n) }}</td>
                   <td nzAlign="center" nzBreakWord="false">
                     <div nz-col>
-                      <button
-                        *ngIf="data.category == 'static'"
-                        nz-button
-                        type="button"
-                        nz-popconfirm
-                        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-                        nzPopconfirmPlacement="left"
+                      <button *ngIf="data.category == 'static'" nz-button type="button" nz-popconfirm
+                        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
                         [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-                        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-                        (nzOnConfirm)="onDelete(data.id)"
-                        nzDanger
-                        >{{ 'mxk.text.delete' | i18n }}</button
-                      >
+                        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)"
+                        nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
                     </div>
                   </td>
                 </tr>
@@ -199,4 +137,4 @@
       </nz-card>
     </div>
   </div>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.html
index ffccb059..51fd50b6 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/groups/groups.component.html
@@ -7,24 +7,19 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.groups.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.groupName"
-              [ngModelOptions]="{ standalone: true }"
-              name="groupName"
-              placeholder=""
-              id="groupName"
-            />
+            <input nz-input [(ngModel)]="query.params.groupName" [ngModelOptions]="{ standalone: true }"
+              name="groupName" placeholder="" id="groupName" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -32,40 +27,19 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button
-      nz-button
-      type="button"
-      nz-popconfirm
-      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-      nzPopconfirmPlacement="left"
-      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-      (nzOnConfirm)="onBatchDelete()"
-      [nzType]="'primary'"
-      nzDanger
-      class="mx-sm"
-      >{{ 'mxk.text.delete' | i18n }}</button
-    >
+    <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+      nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+    [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
       <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
         <th nzAlign="center" style="display: none">Id</th>
         <th nzAlign="center">{{ 'mxk.groups.name' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.groups.category' | i18n }}</th>
@@ -75,11 +49,8 @@
     </thead>
     <tbody>
       <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
+        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
         <td nzAlign="left" style="display: none">
           <span>{{ data.id }}</span>
         </td>
@@ -98,20 +69,16 @@
 
             <nz-dropdown-menu #menuMoreAction="nzDropdownMenu">
               <ul nz-menu>
-                <li nz-menu-item (click)="onMembers($event, data.id, data.groupName)">{{ 'mxk.groups.member' | i18n }} </li>
-                <li nz-menu-item (click)="onPermissions($event, data.id, data.groupName)">{{ 'mxk.groups.permissions' | i18n }}</li>
-                <li
-                  nz-menu-item
+                <li nz-menu-item (click)="onMembers($event, data.id, data.groupName)">{{ 'mxk.groups.member' | i18n }}
+                </li>
+                <li nz-menu-item (click)="onPermissions($event, data.id, data.groupName)">{{ 'mxk.groups.permissions' |
+                  i18n }}</li>
+                <li nz-menu-item
                   *ngIf="data.roleCode != 'ROLE_ADMINISTRATORS' && data.roleCode != 'ROLE_ALL_USER' && data.roleCode != 'ROLE_MANAGERS'"
-                  nz-popconfirm
-                  nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-                  nzPopconfirmPlacement="left"
-                  [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-                  [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-                  (nzOnConfirm)="onDelete(data.id)"
-                  nzDanger
-                  >{{ 'mxk.text.delete' | i18n }}</li
-                >
+                  nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+                  nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+                  [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)" nzDanger>{{
+                  'mxk.text.delete' | i18n }}</li>
               </ul>
             </nz-dropdown-menu>
           </div>
@@ -119,4 +86,4 @@
       </tr>
     </tbody>
   </nz-table>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.html
index 507a1dd3..e1bd8df7 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/organizations/organizations.component.html
@@ -7,23 +7,18 @@
         <nz-form-item>
           <nz-form-label nzFor="orgName">{{ 'mxk.organizations.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.orgName"
-              [ngModelOptions]="{ standalone: true }"
-              name="orgName"
-              placeholder=""
-              id="orgName"
-            />
+            <input nz-input [(ngModel)]="query.params.orgName" [ngModelOptions]="{ standalone: true }" name="orgName"
+              placeholder="" id="orgName" />
           </nz-form-control>
         </nz-form-item>
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -32,31 +27,14 @@
   <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
     <div nz-col [nzSpan]="24" class="table-list-toolbar">
       <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-      <button
-        nz-button
-        type="button"
-        nz-popconfirm
-        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-        nzPopconfirmPlacement="left"
-        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-        (nzOnConfirm)="onBatchDelete()"
-        [nzType]="'primary'"
-        nzDanger
-        class="mx-sm"
-        >{{ 'mxk.text.delete' | i18n }}</button
-      >
+      <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+        nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+        nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
     </div>
     <div nz-col nzMd="6" nzSm="24" class="grid-border">
-      <nz-tree
-        nzShowLine="false"
-        [nzCheckable]="treeNodes.checkable"
-        nzBlockNode
-        [nzData]="treeNodes.nodes"
-        (nzClick)="activeNode($event)"
-        (nzDblClick)="openFolder($event)"
-        [nzTreeTemplate]="nzTreeTemplate"
-      ></nz-tree>
+      <nz-tree nzShowLine="false" [nzCheckable]="treeNodes.checkable" nzBlockNode [nzData]="treeNodes.nodes"
+        (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
       <ng-template #nzTreeTemplate let-node let-origin="origin">
         <span class="custom-node">
           <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
@@ -77,24 +55,14 @@
       </nz-dropdown-menu>
     </div>
     <div nz-col nzMd="18" nzSm="24" class="grid-border">
-      <nz-table
-        #dynamicTable
-        nzBordered
-        nzShowSizeChanger
-        nzSize="small"
-        [nzData]="query.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="query.results.records"
-        [nzPageSizeOptions]="query.params.pageSizeOptions"
-        [nzPageSize]="query.params.pageSize"
-        [nzPageIndex]="query.params.pageNumber"
-        [nzLoading]="this.query.tableLoading"
-        (nzQueryParams)="onQueryParamsChange($event)"
-        nzWidth="100%"
-      >
+      <nz-table #dynamicTable nzBordered nzShowSizeChanger nzSize="small" [nzData]="query.results.rows"
+        [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+        [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber"
+        [nzLoading]="this.query.tableLoading" (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
         <thead>
           <tr>
-            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+              (nzCheckedChange)="onTableAllChecked($event)"></th>
             <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.organizations.code' | i18n }}</th>
             <th nzAlign="center" class="table_cell_action_2">{{ 'mxk.organizations.name' | i18n }}</th>
             <th nzAlign="center" class="table_cell_action_1">{{ 'mxk.organizations.type' | i18n }}</th>
@@ -105,22 +73,21 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of query.results.rows">
-            <td
-              [nzChecked]="query.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-            ></td>
+            <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
             <td nzAlign="left">
               <span>{{ data.orgCode }}</span>
             </td>
             <td nzAlign="left"> {{ data.orgName }}</td>
             <td nzAlign="center" *ngIf="data.type == 'company'"> {{ 'mxk.organizations.type.company' | i18n }}</td>
             <td nzAlign="center" *ngIf="data.type == 'division'"> {{ 'mxk.organizations.type.division' | i18n }}</td>
-            <td nzAlign="center" *ngIf="data.type == 'department'"> {{ 'mxk.organizations.type.department' | i18n }} </td>
+            <td nzAlign="center" *ngIf="data.type == 'department'"> {{ 'mxk.organizations.type.department' | i18n }}
+            </td>
             <td nzAlign="center" *ngIf="data.type == 'entity'"> {{ 'mxk.organizations.type.entity' | i18n }}</td>
             <td nzAlign="center" *ngIf="data.type == 'virtual'"> {{ 'mxk.organizations.type.virtual' | i18n }}</td>
             <td nzAlign="center"> {{ data.sortIndex }}</td>
-            <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+            <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+                style="color: green"></i></td>
             <td nzAlign="center" nzBreakWord="false">
               <div nz-col>
                 <button nz-button type="button" (click)="onEdit($event, data.id)">
@@ -128,17 +95,11 @@
                 </button>
                 <button
                   *ngIf="data.parentId != null && data.parentId != '-1' && data.parentId != '0' && data.id != data.instId"
-                  nz-button
-                  type="button"
-                  nz-popconfirm
-                  nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-                  nzPopconfirmPlacement="left"
+                  nz-button type="button" nz-popconfirm
+                  nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
                   [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-                  [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-                  (nzOnConfirm)="onDelete(data.id)"
-                  nzDanger
-                  >{{ 'mxk.text.delete' | i18n }}</button
-                >
+                  [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)" nzDanger>{{
+                  'mxk.text.delete' | i18n }}</button>
               </div>
             </td>
           </tr>
@@ -146,4 +107,4 @@
       </nz-table>
     </div>
   </div>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.html
index 4c8078fd..7fa6cbaf 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/idm/users/users.component.html
@@ -7,23 +7,18 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.users.username' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.username"
-              [ngModelOptions]="{ standalone: true }"
-              name="username"
-              placeholder=""
-              id="username"
-            />
+            <input nz-input [(ngModel)]="query.params.username" [ngModelOptions]="{ standalone: true }" name="username"
+              placeholder="" id="username" />
           </nz-form-control>
         </nz-form-item>
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -37,32 +32,16 @@
       <button nz-button type="button" [nzType]="'primary'" (click)="changePassword($event)">
         {{ 'mxk.text.changepassword' | i18n }}
       </button>
-      <button
-        nz-button
-        type="button"
-        nz-popconfirm
-        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-        nzPopconfirmPlacement="left"
-        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-        (nzOnConfirm)="onBatchDelete()"
-        [nzType]="'primary'"
-        nzDanger
-        class="mx-sm"
-      >
-        {{ 'mxk.text.delete' | i18n }}
+      <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+        nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+        nzDanger class="mx-sm">
+        {{ 'mxk.text.batchDelete' | i18n }}
       </button>
     </div>
     <div nz-col [nzSpan]="6" class="grid-border">
-      <nz-tree
-        nzShowLine="false"
-        [nzCheckable]="treeNodes.checkable"
-        nzBlockNode
-        [nzData]="treeNodes.nodes"
-        (nzClick)="activeNode($event)"
-        (nzDblClick)="openFolder($event)"
-        [nzTreeTemplate]="nzTreeTemplate"
-      ></nz-tree>
+      <nz-tree nzShowLine="false" [nzCheckable]="treeNodes.checkable" nzBlockNode [nzData]="treeNodes.nodes"
+        (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
       <ng-template #nzTreeTemplate let-node let-origin="origin">
         <span class="custom-node">
           <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
@@ -83,26 +62,15 @@
       </nz-dropdown-menu>
     </div>
     <div nz-col nzMd="18" nzSm="24" class="grid-border">
-      <nz-table
-        #dynamicTable
-        nzTableLayout="auto"
-        nzSize="small"
-        nzBordered
-        sizeChanger="true"
-        nzShowSizeChanger
-        [nzData]="query.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="query.results.records"
-        [nzPageSizeOptions]="query.params.pageSizeOptions"
-        [nzPageSize]="query.params.pageSize"
-        [nzPageIndex]="query.params.pageNumber"
-        [nzLoading]="this.query.tableLoading"
-        (nzQueryParams)="onQueryParamsChange($event)"
-        nzWidth="100%"
-      >
+      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered sizeChanger="true" nzShowSizeChanger
+        [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
+        [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
+        [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+        (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
         <thead>
           <tr>
-            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+              (nzCheckedChange)="onTableAllChecked($event)"></th>
             <th nzAlign="center" style="display: none">{{ 'mxk.text.id' | i18n }}</th>
             <th nzAlign="center">{{ 'mxk.users.username' | i18n }}</th>
             <th nzAlign="center">{{ 'mxk.users.displayName' | i18n }}</th>
@@ -116,11 +84,8 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of query.results.rows">
-            <td
-              [nzChecked]="query.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-            ></td>
+            <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
             <td nzAlign="left" style="display: none">
               <span>{{ data.id }}</span>
             </td>
@@ -129,7 +94,8 @@
             <td nzAlign="left"> {{ data.employeeNumber }}</td>
             <td nzAlign="left"> {{ data.department }}</td>
             <td nzAlign="left"> {{ data.jobTitle }}</td>
-            <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' | i18n) }}</td>
+            <td nzAlign="center"> {{ data.gender == 1 ? ('mxk.users.gender.female' | i18n) : ('mxk.users.gender.male' |
+              i18n) }}</td>
             <td nzAlign="center">
               <a title="{{ 'mxk.users.status.active' | i18n }}" *ngIf="data.status == 1">
                 <i nz-icon nzType="check-circle" nzTheme="fill" style="color: green"> </i>
@@ -162,36 +128,31 @@
                 </button>
                 <nz-dropdown-menu #menuMoreAction="nzDropdownMenu">
                   <ul nz-menu>
-                    <li nz-menu-item *ngIf="data.status == 1" (click)="onNavToUrl($event, data.id, data.username, 'groups')">{{
+                    <li nz-menu-item *ngIf="data.status == 1"
+                      (click)="onNavToUrl($event, data.id, data.username, 'groups')">{{
                       'mxk.text.groups' | i18n
-                    }}</li>
+                      }}</li>
                     <li nz-menu-item *ngIf="data.status == 1" (click)="changePasswordById($event, data.id)">{{
                       'mxk.text.changepassword' | i18n
-                    }}</li>
-                    <li nz-menu-item *ngIf="data.status == 1" (click)="onUpdateStatus($event, data.id, 5)">{{ 'mxk.text.lock' | i18n }}</li>
+                      }}</li>
+                    <li nz-menu-item *ngIf="data.status == 1" (click)="onUpdateStatus($event, data.id, 5)">{{
+                      'mxk.text.lock' | i18n }}</li>
                     <li nz-menu-item *ngIf="data.status == 1" (click)="onUpdateStatus($event, data.id, 4)">{{
                       'mxk.text.disable' | i18n
-                    }}</li>
+                      }}</li>
                     <li nz-menu-item *ngIf="data.status == 2" (click)="onUpdateStatus($event, data.id, 1)">{{
                       'mxk.text.enable' | i18n
-                    }}</li>
+                      }}</li>
                     <li nz-menu-item *ngIf="data.status == 4" (click)="onUpdateStatus($event, data.id, 1)">{{
                       'mxk.text.enable' | i18n
-                    }}</li>
+                      }}</li>
                     <li nz-menu-item *ngIf="data.status == 5" (click)="onUpdateStatus($event, data.id, 1)">{{
                       'mxk.text.unlock' | i18n
-                    }}</li>
-                    <li
-                      nz-menu-item
-                      nz-popconfirm
-                      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-                      nzPopconfirmPlacement="left"
-                      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-                      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-                      (nzOnConfirm)="onDelete(data.id)"
-                      nzDanger
-                      >{{ 'mxk.text.delete' | i18n }}</li
-                    >
+                      }}</li>
+                    <li nz-menu-item nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+                      nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+                      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)"
+                      nzDanger>{{ 'mxk.text.delete' | i18n }}</li>
                   </ul>
                 </nz-dropdown-menu>
               </div>
@@ -201,4 +162,4 @@
       </nz-table>
     </div>
   </div>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html
index d7f97b82..94ed1895 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/resources/resources.component.html
@@ -6,30 +6,26 @@
       <div nz-col nzMd="10" nzSm="24">
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.resources.appName' | i18n }}</nz-form-label>
-          <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" disabled placeholder="" />
+          <input nz-input [(ngModel)]="query.params.appName" [ngModelOptions]="{ standalone: true }" disabled
+            placeholder="" />
         </nz-form-item>
       </div>
       <div nz-col nzMd="10" nzSm="24">
         <nz-form-item>
           <nz-form-label nzFor="resourceName">{{ 'mxk.resources.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.resourceName"
-              [ngModelOptions]="{ standalone: true }"
-              name="resourceName"
-              placeholder=""
-              id="resourceName"
-            />
+            <input nz-input [(ngModel)]="query.params.resourceName" [ngModelOptions]="{ standalone: true }"
+              name="resourceName" placeholder="" id="resourceName" />
           </nz-form-control>
         </nz-form-item>
       </div>
       <div nz-col [nzSpan]="query.expandForm ? 24 : 4" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -38,31 +34,14 @@
   <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
     <div nz-col [nzSpan]="24" class="table-list-toolbar">
       <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-      <button
-        nz-button
-        type="button"
-        nz-popconfirm
-        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-        nzPopconfirmPlacement="left"
-        [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-        (nzOnConfirm)="onBatchDelete()"
-        [nzType]="'primary'"
-        nzDanger
-        class="mx-sm"
-        >{{ 'mxk.text.delete' | i18n }}</button
-      >
+      <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+        nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+        nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
     </div>
     <div nz-col nzMd="6" nzSm="24" class="grid-border">
-      <nz-tree
-        nzShowLine="false"
-        [nzCheckable]="treeNodes.checkable"
-        nzBlockNode
-        [nzData]="treeNodes.nodes"
-        (nzClick)="activeNode($event)"
-        (nzDblClick)="openFolder($event)"
-        [nzTreeTemplate]="nzTreeTemplate"
-      ></nz-tree>
+      <nz-tree nzShowLine="false" [nzCheckable]="treeNodes.checkable" nzBlockNode [nzData]="treeNodes.nodes"
+        (nzClick)="activeNode($event)" (nzDblClick)="openFolder($event)" [nzTreeTemplate]="nzTreeTemplate"></nz-tree>
       <ng-template #nzTreeTemplate let-node let-origin="origin">
         <span class="custom-node">
           <span *ngIf="!node.isLeaf" (contextmenu)="contextMenu($event, menu)">
@@ -83,25 +62,15 @@
       </nz-dropdown-menu>
     </div>
     <div nz-col nzMd="18" nzSm="24" class="grid-border">
-      <nz-table
-        #dynamicTable
-        nzTableLayout="auto"
-        nzSize="small"
-        nzBordered
-        nzShowSizeChanger
-        [nzData]="query.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="query.results.records"
-        [nzPageSizeOptions]="query.params.pageSizeOptions"
-        [nzPageSize]="query.params.pageSize"
-        [nzPageIndex]="query.params.pageNumber"
-        [nzLoading]="this.query.tableLoading"
-        (nzQueryParams)="onQueryParamsChange($event)"
-        nzWidth="100%"
-      >
+      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
+        [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
+        [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
+        [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+        (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
         <thead>
           <tr>
-            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+            <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+              (nzCheckedChange)="onTableAllChecked($event)"></th>
             <th nzAlign="center">{{ 'mxk.resources.appName' | i18n }}</th>
             <th nzAlign="center">{{ 'mxk.resources.name' | i18n }}</th>
             <th nzAlign="center">{{ 'mxk.resources.resourceType' | i18n }}</th>
@@ -112,33 +81,24 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of query.results.rows">
-            <td
-              [nzChecked]="query.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-            ></td>
+            <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
             <td nzAlign="center">
               {{ data.appName }}
             </td>
             <td nzAlign="left"> {{ data.resourceName }}</td>
             <td nzAlign="left"> {{ data.resourceType }}</td>
             <td nzAlign="center"> {{ data.sortIndex }}</td>
-            <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill" style="color: green"></i></td>
+            <td nzAlign="center"> <i *ngIf="data.status == 1" nz-icon nzType="check-circle" nzTheme="fill"
+                style="color: green"></i></td>
             <td nzAlign="center" nzBreakWord="false">
               <div nz-col>
                 <button nz-button type="button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
-                <button
-                  nz-button
-                  type="button"
-                  nz-popconfirm
-                  nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-                  nzPopconfirmPlacement="left"
+                <button nz-button type="button" nz-popconfirm
+                  nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
                   [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-                  [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-                  (nzOnConfirm)="onDelete(data.id)"
-                  nzDanger
-                  >{{ 'mxk.text.delete' | i18n }}</button
-                >
+                  [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)" nzDanger>{{
+                  'mxk.text.delete' | i18n }}</button>
               </div>
             </td>
           </tr>
@@ -146,4 +106,4 @@
       </nz-table>
     </div>
   </div>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.html
index 0a62bb8c..97520c32 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/role-members/role-members.component.html
@@ -18,26 +18,16 @@
             <div nz-col [nzSpan]="leftQuery.expandForm ? 24 : 6" [class.text-right]="leftQuery.expandForm">
               <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="leftQuery.submitLoading">{{
                 'mxk.text.query' | i18n
-              }}</button>
+                }}</button>
             </div>
           </div>
         </form>
       </nz-card>
-      <nz-table
-        #dynamicTable
-        nzTableLayout="auto"
-        nzSize="small"
-        nzBordered
-        nzShowSizeChanger
-        [nzData]="leftQuery.results.rows"
-        [nzFrontPagination]="false"
-        [nzTotal]="leftQuery.results.records"
-        [nzPageSizeOptions]="leftQuery.params.pageSizeOptions"
-        [nzPageSize]="leftQuery.params.pageSize"
-        [nzPageIndex]="leftQuery.params.pageNumber"
-        [nzLoading]="this.leftQuery.tableLoading"
-        (nzQueryParams)="onLeftQueryParamsChange($event)"
-      >
+      <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
+        [nzData]="leftQuery.results.rows" [nzFrontPagination]="false" [nzTotal]="leftQuery.results.records"
+        [nzPageSizeOptions]="leftQuery.params.pageSizeOptions" [nzPageSize]="leftQuery.params.pageSize"
+        [nzPageIndex]="leftQuery.params.pageNumber" [nzLoading]="this.leftQuery.tableLoading"
+        (nzQueryParams)="onLeftQueryParamsChange($event)">
         <thead>
           <tr>
             <!--<th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
@@ -49,11 +39,8 @@
         </thead>
         <tbody>
           <tr *ngFor="let data of leftQuery.results.rows">
-            <td
-              [nzChecked]="leftQuery.tableCheckedId.has(data.id)"
-              [nzDisabled]="data.disabled"
-              (nzCheckedChange)="onLeftTableItemChecked(data.id, data.roleName, $event)"
-            ></td>
+            <td [nzChecked]="leftQuery.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+              (nzCheckedChange)="onLeftTableItemChecked(data.id, data.roleName, $event)"></td>
             <td nzAlign="left" style="width: 300px">{{ data.id }}</td>
             <td nzAlign="left" nzBreakWord="false">{{ data.roleName }}</td>
           </tr>
@@ -67,29 +54,25 @@
             <div nz-col nzMd="8" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="name">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
-                <input nz-input [(ngModel)]="query.params.selectRoleName" [ngModelOptions]="{ standalone: true }" disabled />
+                <input nz-input [(ngModel)]="query.params.selectRoleName" [ngModelOptions]="{ standalone: true }"
+                  disabled />
               </nz-form-item>
             </div>
             <div nz-col nzMd="8" nzSm="24">
               <nz-form-item>
                 <nz-form-label nzFor="name">{{ 'mxk.roles.member' | i18n }}</nz-form-label>
                 <nz-form-control>
-                  <input
-                    nz-input
-                    [(ngModel)]="query.params.memberName"
-                    [ngModelOptions]="{ standalone: true }"
-                    name="memberName"
-                    placeholder=""
-                  />
+                  <input nz-input [(ngModel)]="query.params.memberName" [ngModelOptions]="{ standalone: true }"
+                    name="memberName" placeholder="" />
                 </nz-form-control>
               </nz-form-item>
             </div>
             <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
+              <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query'
+                | i18n }}</button>
               <button nz-button type="reset" (click)="onReset()" class="mx-sm">{{ 'mxk.text.reset' | i18n }}</button>
               <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-              >
+                {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
             </div>
           </div>
         </form>
@@ -97,46 +80,25 @@
       <nz-card [nzBordered]="false">
         <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
           <div nz-col [nzSpan]="24" class="table-list-toolbar">
-            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-            <button
-              nz-button
-              type="button"
-              nz-popconfirm
-              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-              nzPopconfirmPlacement="left"
+            <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n
+              }}</button>
+            <button nz-button type="button" nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
               [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-              (nzOnConfirm)="onBatchDelete()"
-              [nzType]="'primary'"
-              nzDanger
-              class="mx-sm"
-              >{{ 'mxk.text.delete' | i18n }}</button
-            >
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()"
+              [nzType]="'primary'" nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
           </div>
 
           <div nz-col nzMd="24" nzSm="24">
-            <nz-table
-              #dynamicTable
-              nzTableLayout="auto"
-              nzSize="small"
-              nzBordered
-              nzShowSizeChanger
-              [nzData]="query.results.rows"
-              [nzFrontPagination]="false"
-              [nzTotal]="query.results.records"
-              [nzPageSizeOptions]="query.params.pageSizeOptions"
-              [nzPageSize]="query.params.pageSize"
-              [nzPageIndex]="query.params.pageNumber"
-              [nzLoading]="this.query.tableLoading"
-              (nzQueryParams)="onQueryParamsChange($event)"
-            >
+            <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger
+              [nzData]="query.results.rows" [nzFrontPagination]="false" [nzTotal]="query.results.records"
+              [nzPageSizeOptions]="query.params.pageSizeOptions" [nzPageSize]="query.params.pageSize"
+              [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+              (nzQueryParams)="onQueryParamsChange($event)">
               <thead>
                 <tr>
-                  <th
-                    [nzChecked]="query.checked"
-                    [nzIndeterminate]="query.indeterminate"
-                    (nzCheckedChange)="onTableAllChecked($event)"
-                  ></th>
+                  <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+                    (nzCheckedChange)="onTableAllChecked($event)"></th>
                   <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
                   <th nzAlign="center">{{ 'mxk.roles.type' | i18n }}</th>
                   <th nzAlign="center">{{ 'mxk.roles.member' | i18n }}</th>
@@ -148,14 +110,12 @@
               </thead>
               <tbody>
                 <tr *ngFor="let data of query.results.rows">
-                  <td
-                    [nzChecked]="query.tableCheckedId.has(data.id)"
-                    [nzDisabled]="data.disabled"
-                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-                  ></td>
+                  <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+                    (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
                   <td nzAlign="left"> {{ data.roleName }}</td>
                   <td nzAlign="center" *ngIf="data.type == 'USER'"> {{ 'mxk.roles.type.user' | i18n }}</td>
-                  <td nzAlign="center" *ngIf="data.type == 'USER-DYNAMIC'"> {{ 'mxk.roles.type.user-dynamic' | i18n }} </td>
+                  <td nzAlign="center" *ngIf="data.type == 'USER-DYNAMIC'"> {{ 'mxk.roles.type.user-dynamic' | i18n }}
+                  </td>
                   <td nzAlign="center" *ngIf="data.type == 'POST'"> {{ 'mxk.roles.type.post' | i18n }}</td>
                   <td nzAlign="left"> {{ data.memberName }}</td>
                   <td nzAlign="left"> {{ data.jobTitle }}</td>
@@ -166,19 +126,11 @@
                   <td nzAlign="left"> {{ data.department }}</td>
                   <td nzAlign="center" nzBreakWord="false">
                     <div nz-col>
-                      <button
-                        *ngIf="data.type != 'USER-DYNAMIC'"
-                        nz-button
-                        type="button"
-                        nz-popconfirm
-                        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-                        nzPopconfirmPlacement="left"
+                      <button *ngIf="data.type != 'USER-DYNAMIC'" nz-button type="button" nz-popconfirm
+                        nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
                         [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-                        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-                        (nzOnConfirm)="onDelete(data.id)"
-                        nzDanger
-                        >{{ 'mxk.text.delete' | i18n }}</button
-                      >
+                        [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)"
+                        nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
                     </div>
                   </td>
                 </tr>
@@ -189,4 +141,4 @@
       </nz-card>
     </div>
   </div>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.html b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.html
index b2ac23cf..32ba26b1 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.html
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/app/routes/permissions/roles/roles.component.html
@@ -7,24 +7,19 @@
         <nz-form-item>
           <nz-form-label nzFor="name">{{ 'mxk.roles.name' | i18n }}</nz-form-label>
           <nz-form-control>
-            <input
-              nz-input
-              [(ngModel)]="query.params.roleName"
-              [ngModelOptions]="{ standalone: true }"
-              name="roleName"
-              placeholder=""
-              id="roleName"
-            />
+            <input nz-input [(ngModel)]="query.params.roleName" [ngModelOptions]="{ standalone: true }" name="roleName"
+              placeholder="" id="roleName" />
           </nz-form-control>
         </nz-form-item>
       </div>
 
       <div nz-col [nzSpan]="query.expandForm ? 24 : 8" [class.text-right]="query.expandForm">
-        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' | i18n }}</button>
-        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' | i18n }}</button>
+        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="query.submitLoading">{{ 'mxk.text.query' |
+          i18n }}</button>
+        <button nz-button type="reset" (click)="onReset()" class="mx-sm" style="display: none">{{ 'mxk.text.reset' |
+          i18n }}</button>
         <button nz-button (click)="query.expandForm = !query.expandForm" class="mx-sm" style="display: none">
-          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button
-        >
+          {{ query.expandForm ? ('mxk.text.collapse' | i18n) : ('mxk.text.expand' | i18n) }}</button>
       </div>
     </div>
   </form>
@@ -32,40 +27,19 @@
 <nz-card>
   <div nz-col [nzSpan]="24" class="table-list-toolbar">
     <button nz-button type="button" [nzType]="'primary'" (click)="onAdd($event)">{{ 'mxk.text.add' | i18n }}</button>
-    <button
-      nz-button
-      type="button"
-      nz-popconfirm
-      nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-      nzPopconfirmPlacement="left"
-      [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-      (nzOnConfirm)="onBatchDelete()"
-      [nzType]="'primary'"
-      nzDanger
-      class="mx-sm"
-      >{{ 'mxk.text.delete' | i18n }}</button
-    >
+    <button nz-button type="button" nz-popconfirm nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
+      nzPopconfirmPlacement="left" [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
+      [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onBatchDelete()" [nzType]="'primary'"
+      nzDanger class="mx-sm">{{ 'mxk.text.batchDelete' | i18n }}</button>
   </div>
-  <nz-table
-    #dynamicTable
-    nzTableLayout="auto"
-    nzSize="small"
-    nzBordered
-    nzShowSizeChanger
-    [nzData]="query.results.rows"
-    [nzFrontPagination]="false"
-    [nzTotal]="query.results.records"
-    [nzPageSizeOptions]="query.params.pageSizeOptions"
-    [nzPageSize]="query.params.pageSize"
-    [nzPageIndex]="query.params.pageNumber"
-    [nzLoading]="this.query.tableLoading"
-    (nzQueryParams)="onQueryParamsChange($event)"
-    nzWidth="100%"
-  >
+  <nz-table #dynamicTable nzTableLayout="auto" nzSize="small" nzBordered nzShowSizeChanger [nzData]="query.results.rows"
+    [nzFrontPagination]="false" [nzTotal]="query.results.records" [nzPageSizeOptions]="query.params.pageSizeOptions"
+    [nzPageSize]="query.params.pageSize" [nzPageIndex]="query.params.pageNumber" [nzLoading]="this.query.tableLoading"
+    (nzQueryParams)="onQueryParamsChange($event)" nzWidth="100%">
     <thead>
       <tr>
-        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate" (nzCheckedChange)="onTableAllChecked($event)"></th>
+        <th [nzChecked]="query.checked" [nzIndeterminate]="query.indeterminate"
+          (nzCheckedChange)="onTableAllChecked($event)"></th>
         <th nzAlign="center" style="display: none">Id</th>
         <th nzAlign="center">{{ 'mxk.roles.name' | i18n }}</th>
         <th nzAlign="center">{{ 'mxk.roles.category' | i18n }}</th>
@@ -75,11 +49,8 @@
     </thead>
     <tbody>
       <tr *ngFor="let data of query.results.rows">
-        <td
-          [nzChecked]="query.tableCheckedId.has(data.id)"
-          [nzDisabled]="data.disabled"
-          (nzCheckedChange)="onTableItemChecked(data.id, $event)"
-        ></td>
+        <td [nzChecked]="query.tableCheckedId.has(data.id)" [nzDisabled]="data.disabled"
+          (nzCheckedChange)="onTableItemChecked(data.id, $event)"></td>
         <td nzAlign="left" style="display: none">
           <span>{{ data.id }}</span>
         </td>
@@ -91,26 +62,20 @@
         <td nzAlign="center" nzBreakWord="false" width="350px">
           <div nz-col>
             <button nz-button type=" button" (click)="onEdit($event, data.id)">{{ 'mxk.text.edit' | i18n }}</button>
-            <button nz-button type="button" (click)="onMembers($event, data.id, data.roleName)">{{ 'mxk.roles.member' | i18n }}</button>
+            <button nz-button type="button" (click)="onMembers($event, data.id, data.roleName)">{{ 'mxk.roles.member' |
+              i18n }}</button>
             <button nz-button type="button" (click)="onPermissions($event, data.id, data.roleName)">{{
               'mxk.roles.permissions' | i18n
-            }}</button>
-            <button
-              nz-button
-              type="button"
-              nz-popconfirm
-              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}"
-              nzPopconfirmPlacement="left"
+              }}</button>
+            <button nz-button type="button" nz-popconfirm
+              nzPopconfirmTitle="{{ 'mxk.text.delete.popconfirm.title' | i18n }}" nzPopconfirmPlacement="left"
               [nzCancelText]="'mxk.text.delete.popconfirm.cancelText' | i18n"
-              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n"
-              (nzOnConfirm)="onDelete(data.id)"
+              [nzOkText]="'mxk.text.delete.popconfirm.okText' | i18n" (nzOnConfirm)="onDelete(data.id)"
               *ngIf="data.roleCode != 'ROLE_ADMINISTRATORS' && data.roleCode != 'ROLE_ALL_USER' && data.roleCode != 'ROLE_MANAGERS'"
-              nzDanger
-              >{{ 'mxk.text.delete' | i18n }}</button
-            >
+              nzDanger>{{ 'mxk.text.delete' | i18n }}</button>
           </div>
         </td>
       </tr>
     </tbody>
   </nz-table>
-</nz-card>
+</nz-card>
\ No newline at end of file
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json
index e04ccc25..2dfe73f8 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/en-US.json
@@ -737,11 +737,12 @@
 			"add": "Add",
 			"edit": "Edit",
 			"delete": "Delete",
-      "delete.popconfirm":{
-        "title":"Are you sure you want to delete it?",
-        "cancelText":"Cancel",
-        "okText":"Confirm"
-      },
+			"batchDelete": "Batch Delete",
+			"delete.popconfirm":{
+				"title":"Are you sure you want to delete it?",
+				"cancelText":"Cancel",
+				"okText":"Confirm"
+			},
 			"test": "Test",
 			"select": "Select",
 			"confirm": "Confirm",
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json
index 1f61167b..8b9650ee 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-CN.json
@@ -734,11 +734,12 @@
 			"add": "新增",
 			"edit": "编辑",
 			"delete": "删除",
-      "delete.popconfirm":{
-        "title":"请确定要删除吗？",
-        "cancelText":"取消",
-        "okText":"确定"
-      },
+			"batchDelete": "批量删除",
+			"delete.popconfirm":{
+				"title":"请确定要删除吗？",
+				"cancelText":"取消",
+				"okText":"确定"
+			},
 			"test": "测试",
 			"select": "选择",
 			"confirm": "确定",
diff --git a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json
index fb6bd92f..cb29d307 100644
--- a/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json
+++ b/maxkey-web-frontend/maxkey-web-mgt-app/src/assets/i18n/zh-TW.json
@@ -735,11 +735,12 @@
 			"add": "新增",
 			"edit": "編輯",
 			"delete": "刪除",
-      "delete.popconfirm":{
-        "title":"请确定要删除吗？",
-        "cancelText":"取消",
-        "okText":"确定"
-      },
+			"batchDelete": "批量删除",
+			"delete.popconfirm":{
+				"title":"请确定要删除吗？",
+				"cancelText":"取消",
+				"okText":"确定"
+			},
 			"test": "測試",
 			"select": "選擇",
 			"confirm": "確定",