revamped the code and design for permission management screen

src/app/authenticate/login/login.component.ts

@@ -96,7 +96,6 @@ export class LoginComponent {
 
   login() {
      if (this.loginForm.valid) {
-      this.ucred.porOrgacode = HiddenValues.POR_ORGACODE;
       this.ucred.password = this.loginForm.get(FormConstants.PASSWORD)?.value;
       this.ucred.userId = this.loginForm.get(FormConstants.USER_ID)?.value;
       this.authService.authenticate(this.ucred).subscribe( (res: any) => {

src/app/services/authenticate.service.ts

@@ -31,10 +31,10 @@ export class AuthenticationService {
             this.i18nService.error(ErrorMessages.ALREADY_LOGGED_IN,[]);
             return;
         }
-        this.credentialService.setPorOrgacode(uCreds.porOrgacode);
+        this.credentialService.setPorOrgacode(HiddenValues.POR_ORGACODE);
         this.credentialService.setUserId(uCreds.userId);
         this.credentialService.setPassword(uCreds.password);
-        this.storageService.setItem(FormConstants.POR_ORGACODE, uCreds.porOrgacode);
+        this.storageService.setItem(FormConstants.POR_ORGACODE, HiddenValues.POR_ORGACODE);
         this.storageService.setItem(FormConstants.USER_ID, uCreds.userId);
         this.storageService.setItem(FormConstants.PASSWORD, uCreds.password);
         this.httpService.requestPOST(URIKey.USER_LOGIN_URI, uCreds).subscribe((data: any) => {

src/app/user-permissions/user-permissions.component.html

@@ -1,95 +1,126 @@
-  <div class="page-content">
+<div class="page-content">
-    <div class="container-fluid">
+  <div class="container-fluid">
-      <div class="row mt-2 mb-2">
+
-        <div class="col-lg-6">
+    <!-- User Selection -->
-          <div class="col-6">
+    <div class="card mb-3">
-            <div class="mt-0 mb-2 d-sm-flex align-items-center justify-content-between font-edit-13">
+      <div class="card-body">
-                <h5 class="text-muted fw-bold mt-3">{{'permissionManagement' | translate}}</h5>
+        <form [formGroup]="permission">
-            </div>
+
-        </div>
+          <div class="row mb-2 align-items-center">
-        <div class="card">
+            <label class="col-sm-2 col-form-label pe-1">
-            <div class="card-body">
+              {{ 'userCode' | translate }}
-             <form [formGroup]="permission">
+            </label>
-                
+
-                <div class="form-group row mb-2">
+            <div class="col-sm-4">
-                    <label for="userCode" class="form-label font-edit-13">{{ 'userCode' |
+              <select
-                        translate
+                class="form-select"
-                        }}</label>
+                formControlName="userCode"
-                    <div class="input-group">
+                (change)="onUserChange()">
-                        <select class="form-select" id="userCode" formControlName="userCode" (change)="onUserChange()">
+                <option value="" disabled selected>
-                            <option selected disabled value="">{{ 'choose' |
+                  {{ 'choose' | translate }}
-                                translate }}
+                </option>
-                            </option>
+                <option *ngFor="let user of users" [value]="user.userId">
-                            <option *ngFor="let user of users" [value]="user.userId">
+                  {{ user.userName }}
-                                {{user.userName}}
+                </option>
-                            </option>
+              </select>
-                        </select>
-                    </div>
-                 
-                </div> 
-                
-             </form> 
-            </div>
-          </div>
-          <div class="card" *ngIf="showPermissions">
-            <div class="card-body">
-                <h4 class="card-title">{{ 'permissions' | translate}}</h4>
-                <hr>
-                <ul>
-                    <li *ngFor="let node of permissions">
-                      <input 
-                        type="checkbox" 
-                        [checked]="node.checked" 
-                        (change)="toggleNode(node, $event)">
-                        {{node.name | translate}}
-                      <span (click)="toggleExpand(node)">
-                        <span *ngIf="node.children && node.children.length">
-                          <span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
-                          <span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
-                        </span>
-                      </span>
-                      <ul *ngIf="node.children && node.children.length > 0 && node.expanded">
-                        <ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.children }"></ng-container>
-                      </ul>
-                      <ul *ngIf="node.buttons && node.buttons.length > 0 && node.expanded">
-                        <ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.buttons }"></ng-container>
-                      </ul>
-                    </li>
-                </ul>
-                  
-                  <ng-template #treeTemplate let-nodes>
-                    <ul>
-                      <li *ngFor="let node of nodes">
-                        <input 
-                          type="checkbox" 
-                          [checked]="node.checked" 
-                          (change)="toggleNode(node, $event)">
-                          {{node.name | translate}}
-                        <span (click)="toggleExpand(node)">
-                            <span *ngIf="node.children && node.children.length">
-                              <span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
-                              <span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
-                            </span>
-                            <span *ngIf="node.buttons && node.buttons.length">
-                              <span *ngIf="node.expanded"><i class="bx bx-chevron-down"></i></span>
-                              <span *ngIf="!node.expanded"><i class="bx bx-chevron-right"></i></span>
-                            </span>
-                          </span>
-                        <ul *ngIf="node.children && node.children.length > 0 && node.expanded">
-                          <ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.children }"></ng-container>
-                        </ul>
-                        <ul *ngIf="node.buttons && node.buttons.length > 0 && node.expanded">
-                          <ng-container *ngTemplateOutlet="treeTemplate; context: { $implicit: node.buttons }"></ng-container>
-                        </ul>
-                      </li>
-                    </ul>
-                  </ng-template>
-                  <div class="row float-end me-4 mb-3 mt-2 font-edit-13">
-                    <button type="button" class="btn btn-primary font-edit-13 px-3 btn-sm" (click)="savePermissions()">{{ 'save' | translate }}</button>
-                  </div>
             </div>
           </div>
+
+        </form>
+      </div>
+    </div>
+
+    <!-- Permission Table -->
+    <div class="card" *ngIf="showPermissions">
+      <div class="card-body">
+
+        <h4 class="card-title">
+          {{ 'permissions' | translate }}
+        </h4>
+        <hr>
+
+        <table class="table table-bordered table-sm align-middle permission-table">
+          <thead class="table-light">
+            <tr>
+              <th style="width: 40px;"></th>
+              <th>{{ 'Permissions' | translate }}</th>
+              <th style="width: 120px;" class="text-center">
+                {{ 'allow' | translate }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <ng-container
+              *ngTemplateOutlet="permissionRow; context: { nodes: permissions, level: 0 }">
+            </ng-container>
+          </tbody>
+        </table>
+
+        <div class="text-end mt-3">
+          <button
+            class="btn btn-primary btn-sm px-4"
+            (click)="savePermissions()">
+            {{ 'save' | translate }}
+          </button>
         </div>
+
       </div>
     </div>
-  </div>
+
+  </div>
+</div>
+
+<!-- Recursive Permission Rows -->
+<ng-template #permissionRow let-nodes="nodes" let-level="level">
+  <ng-container *ngFor="let node of nodes">
+
+    <tr>
+      <!-- Expand / Collapse -->
+      <td class="text-center">
+        <span
+          *ngIf="node.children?.length || node.buttons?.length"
+          class="expand-icon"
+          (click)="toggleExpand(node)">
+          <i
+            class="bx"
+            [ngClass]="node.expanded ? 'bx-chevron-down' : 'bx-chevron-right'">
+          </i>
+        </span>
+      </td>
+
+      <!-- Permission Name -->
+      <td
+        class="permission-cell"
+        [style.--level]="level">
+        {{ node.name | translate }}
+      </td>
+
+      <!-- Checkbox -->
+      <td class="text-center">
+        <input
+          type="checkbox"
+          [checked]="node.checked"
+          (change)="toggleNode(node, $event)">
+      </td>
+    </tr>
+
+    <!-- Children -->
+    <ng-container *ngIf="node.expanded">
+
+      <ng-container *ngIf="node.children?.length">
+        <ng-container
+          *ngTemplateOutlet="permissionRow; context: { nodes: node.children, level: level + 1 }">
+        </ng-container>
+      </ng-container>
+
+      <ng-container *ngIf="node.buttons?.length">
+        <ng-container
+          *ngTemplateOutlet="permissionRow; context: { nodes: node.buttons, level: level + 1 }">
+        </ng-container>
+      </ng-container>
+
+    </ng-container>
+
+  </ng-container>
+</ng-template>

src/app/user-permissions/user-permissions.component.scss

@@ -1,19 +1,43 @@
- 
+.permission-table td {
-  li {
+  vertical-align: middle;
-    margin: 5px 0;
+}
-  }
 
-  ul {
+.expand-icon {
-    list-style-type: none;
+  cursor: pointer;
-    margin: 0;
+  color: #1e40af;
-    padding-left: 10px; /* Reduce overall left padding */
+}
-  }
 
-  ul ul {
+.permission-cell {
-    padding-left: 5px;  /* Reduce space for nested items */
+  position: relative;
-    margin-left: 5px;
+  padding-left: calc(var(--level) * 22px + 14px);
-  }
+  font-weight: 500;
+  background-color: rgba(30, 64, 175, calc(var(--level) * 0.08));
+  color: #1f2937;
+}
 
-  li {
+.permission-cell::before {
-    margin-bottom: 3px;  /* Add slight vertical spacing between items */
+  content: '';
-  }
+  position: absolute;
+  left: calc(var(--level) * 22px);
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background-color: #9ca3af;
+}
+
+.permission-cell {
+  font-size: calc(14px - var(--level) * 0.5px);
+}
+
+.permission-table tbody tr:hover {
+  background-color: #e5e7eb;
+}
+
+.permission-table thead th {
+  background-color: #e5e7eb;
+  color: #111827;
+}
+
+.permission-table td:last-child {
+  text-align: center;
+}

src/app/user-permissions/user-permissions.component.ts

@@ -154,6 +154,7 @@ export class UserPermissionsComponent {
         this.permission.reset();
         this.permission.get('userCode')?.setValue("");
         this.showPermissions = false;
+        this.collapseAll(this.permissions)
       }
     })
   }
@@ -177,4 +178,19 @@ export class UserPermissionsComponent {
       }
     }
   }
+
+  collapseAll(nodes: PermissionNode[]): void {
+    nodes.forEach(node => {
+      node.expanded = false;
+
+      if (node.children) {
+        this.collapseAll(node.children);
+      }
+
+      if (node.buttons) {
+        this.collapseAll(node.buttons);
+      }
+    });
+  }
+
 }

src/assets/data/sideMenu.json

@@ -200,7 +200,7 @@
     ]
   },
   {
-    "name": "PermissionManager",
+    "name": "permissions",
     "route": "/home/permissions",
     "checked": false,
     "expanded": false,

src/assets/i18n/Arabic.json

@@ -230,5 +230,6 @@
     "deleteUser": "حذف حساب المستخدم",
     "permissionManagement": "إدارة الأذونات",
     "userCode": "مستخدم",
-    "choose" : "يختار"
+    "choose" : "يختار",
+    "allow": "يسمح"
 }

src/assets/i18n/English.json

@@ -229,5 +229,6 @@
     "deleteUser": "Delete User",
     "permissionManagement": "Permission Managment",
     "userCode": "User",
-    "choose" : "Choose"
+    "choose" : "Choose",
+    "allow": "Allow"
 }