Enhance transaction logs UI and fix translations

Improved the transaction logs component with better table UI, pagination, loading/error states, and date filtering. Updated SCSS for responsive design and visual enhancements. Fixed translation keys and placeholders in user management and constants. Adjusted login direction logic and commented out duplicate login check in authentication service.
6 days ago · 6e4f1c3c58
parent 244ff1067a
commit 6e4f1c3c58
10 changed files with 829 additions and 539 deletions
--- a/src/app/authenticate/login/login.component.ts
+++ b/src/app/authenticate/login/login.component.ts
@ -87,13 +87,13 @@ export class LoginComponent {
      this.storageService.setItem('direction', this.direction);
    }
    else {
-      this.direction = directions.RTL;
+      this.direction = directions.LTR;
      this.storageService.setItem('direction', this.direction);
    }
    if (typeof document !== 'undefined') {
    document.documentElement.setAttribute('dir', this.direction);
    document.documentElement.setAttribute('lang', 
-      this.direction === directions.RTL ? 'ar' : 'en');
+      this.direction === directions.LTR ? 'ar' : 'en');
  }
  }

--- a/src/app/logging/logging.component.html
+++ b/src/app/logging/logging.component.html
@ -4,9 +4,7 @@
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
-          <div
-            class="d-sm-flex align-items-center justify-content-between navbar-header p-0"
-          ></div>
+          <div class="d-sm-flex align-items-center justify-content-between navbar-header p-0"></div>
        </div>
      </div>
    </div>
@ -21,7 +19,7 @@
            </div>

            <form [formGroup]="logsSearchForm">
-              <div class="row g-3 mb-3 ">
+              <div class="row g-3 mb-3">
                <div class="col-md-6">
                  <label>
                    {{ "fromDate" | translate }}
@ -40,7 +38,6 @@
                    *ngIf="logsSearchForm.get('fromDate')?.touched && logsSearchForm.get('fromDate')?.invalid">
                    {{ 'fieldRequired' | translate }}
                  </div>
-                  
                </div>

                <div class="col-md-6">
@ -87,9 +84,7 @@
      <div class="col-xl-12 mt-4">
        <div class="card border">
          <div class="card-body">
-          <div
-            class="card-header d-flex justify-content-between align-items-center font-edit-13-child"
-          >
+            <div class="card-header d-flex justify-content-between align-items-center font-edit-13-child">
              {{ "activityLogDetails" | translate }}

              <div class="d-flex gap-2 align-items-center" *ngIf="allItems.length">
@ -105,25 +100,33 @@
                </div>

                <div class="d-flex align-items-center gap-2">
-                <i (click)="exportDataInExcel()" id="downloadReport" class="fa fa-download"></i>
+                  <button
+                    class="btn btn-sm btn-outline-success"
+                    (click)="exportDataInExcel()"
+                    [disabled]="!filteredItems.length"
+                    title="Export to Excel"
+                  >
+                    <i class="fa fa-download"></i>
+                  </button>
                </div>
                
-              <i class="materialdesignicons" (click)="toggleTableCard()">
-                <ng-container *ngIf="logsDataExpanded; else down">
-                <i class="dripicons-chevron-up float-end"></i>
-              </ng-container>
-                
-                <ng-template #down>
-                  <i class="dripicons-chevron-down float-end"></i>
-                </ng-template>
-              </i>
+                <button
+                  class="btn btn-sm btn-outline-secondary"
+                  (click)="toggleTableCard()"
+                  [title]="(logsDataExpanded ? 'collapse' : 'expand') | translate"
+                >
+                  <i *ngIf="logsDataExpanded" class="dripicons-chevron-up"></i>
+                  <i *ngIf="!logsDataExpanded" class="dripicons-chevron-down"></i>
+                </button>
              </div>
            </div>
          </div>
+          
          <div class="card-body" *ngIf="logsDataExpanded">
            <!-- NO RECORDS -->
-            <div *ngIf="!filteredItems.length" class="text-center text-muted">
-              {{ "noLoggingDetailsFound" | translate }}
+            <div *ngIf="!filteredItems.length" class="text-center text-muted py-4">
+              <i class="fas fa-search fa-2x mb-2 opacity-50"></i>
+              <p>{{ "noLoggingDetailsFound" | translate }}</p>
            </div>

            <!-- TABLE -->
@ -152,43 +155,59 @@
                </tbody>
              </table>

-              <!-- FOOTER -->
-              <div
-                class="d-flex justify-content-between align-items-center mt-3"
-              >
+              <!-- PAGINATION FOOTER -->
+              <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap">
+                <!-- Items per page -->
+                <div class="d-flex align-items-center gap-2 mb-2 mb-md-0">
+                  <span class="text-muted small">{{ "show" | translate }}</span>
+                  <div style="width: 120px;">
                    <ng-select
+                      class="form-select-sm"
                      [items]="pageSizeOptions"
-                bindLabel="label"
                      bindValue="value"
                      [(ngModel)]="itemsPerPage"
                      (change)="itemsPerPageChanged()"
                      [searchable]="false"
-                [clearable]="false">
+                      [clearable]="false"
+                      [dropdownPosition]="'top'"
+                    >
+                      <ng-template ng-option-tmp let-item="item">
+                        {{ item.value }} {{ "entries" | translate }}
+                      </ng-template>
+
+                      <ng-template ng-label-tmp let-item="item">
+                        {{ item.value }} {{ "entries" | translate }}
+                      </ng-template>
                    </ng-select>
+                  </div>
+                </div>

-                <div class="text-muted">
+                <!-- Page info -->
+                <div class="text-muted mb-2 mb-md-0">
                  {{ "page" | translate }} {{ currentPage }}
-                  {{ "of" | translate }} {{ totalPages() }} ({{
-                    filteredItems.length
-                  }}
-                  {{ "totalItems" | translate }})
+                  {{ "of" | translate }} {{ totalPages() }}
+                  <span class="d-none d-md-inline">
+                    ({{ filteredItems.length }} {{ "totalItems" | translate }})
+                  </span>
                </div>

+                <!-- Pagination buttons -->
                <div class="btn-group">
                  <button
-                    class="btn btn-primary"
+                    class="btn btn-outline-primary btn-sm"
                    (click)="previousPage()"
                    [disabled]="currentPage === 1"
                  >
+                    <i class="fas fa-chevron-left me-1"></i>
                    {{ "previous" | translate }}
                  </button>
-
                  <button
-                    class="btn btn-primary"
+                    class="btn btn-outline-primary btn-sm"
                    (click)="nextPage()"
                    [disabled]="currentPage >= totalPages()"
                  >
                    {{ "next" | translate }}
+                    <i class="fas fa-chevron-right ms-1"></i>
                  </button>
                </div>
              </div>
--- a/src/app/services/authenticate.service.ts
+++ b/src/app/services/authenticate.service.ts
@ -24,11 +24,11 @@ export class AuthenticationService {
    constructor(private buttonManagementService: ButtonManagementService, private httpService: HttpURIService, private router: Router, private credentialService: CredentialService, private i18nService: I18NService, private storageService: StorageService) {
    }
    authenticate(uCreds: UserCredentials): Observable<any> {
-        const userJson = this.storageService.getItem('user');
-    if (this.storageService.getItem('user') != null) {
-        this.i18nService.error(ErrorMessages.ALREADY_LOGGED_IN, []);
-        return new Observable(); // empty
-    }
+    //     const userJson = this.storageService.getItem('user');
+    // if (this.storageService.getItem('user') != null) {
+    //     this.i18nService.error(ErrorMessages.ALREADY_LOGGED_IN, []);
+    //     return new Observable(); // empty
+    // }

    this.credentialService.setPorOrgacode(HiddenValues.POR_ORGACODE);
    this.credentialService.setUserId(uCreds.userId);
--- a/src/app/transaction-logs/transaction-logs.component.html
+++ b/src/app/transaction-logs/transaction-logs.component.html
@ -3,9 +3,7 @@
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
-          <div
-            class="d-sm-flex align-items-center justify-content-between navbar-header p-0"
-          ></div>
+          <div class="d-sm-flex align-items-center justify-content-between navbar-header p-0"></div>
        </div>
      </div>
    </div>
@ -19,9 +17,7 @@
                <div class="col-lg-12">
                  <div class="card-body mt-2 p-0">
                    <div class="card mb-0 mt-2">
-                      <div
-                        class="card-header font-edit-13-child d-flex justify-content-between align-items-center"
-                      >
+                      <div class="card-header font-edit-13-child d-flex justify-content-between align-items-center">
                        {{ "transactionLogs" | translate }}

                        <div class="d-flex align-items-center gap-2">
@ -32,169 +28,164 @@
                              [(ngModel)]="searchText"
                              (ngModelChange)="onSearch($event)"
                              placeholder="{{ 'search' | translate }}"
+                              [disabled]="isLoading"
                            />
                            <i class="fas fa-search search-icon"></i>
                          </div>
+                          
                          <div class="d-flex align-items-center gap-2">
-                            <i
+                            <button
+                              class="btn btn-sm btn-outline-success"
                              (click)="exportDataInExcel()"
-                              id="downloadReport"
-                              class="fa fa-download"
-                            ></i>
+                              [disabled]="isLoading || transactionLog.length === 0"
+                              title="Export to Excel"
+                            >
+                              <i class="fa fa-download"></i>
+                            </button>
                          </div>

-                          <i
-                            class="materialdesignicons"
+                          <button
+                            class="btn btn-sm btn-outline-secondary"
                            (click)="toggleTableCard()"
+                            [title]="(transactionDataExpanded ? 'collapse' : 'expand') | translate"
                          >
-                            <ng-container
-                              *ngIf="
-                                transactionDataExpanded;
-                                else collapsedIcon
-                              "
-                            >
-                              <i class="dripicons-chevron-up float-end"></i>
-                            </ng-container>
-                            <ng-template #collapsedIcon>
-                              <i class="dripicons-chevron-down float-end"></i>
-                            </ng-template>
-                          </i>
+                            <i *ngIf="transactionDataExpanded" class="dripicons-chevron-up"></i>
+                            <i *ngIf="!transactionDataExpanded" class="dripicons-chevron-down"></i>
+                          </button>
                        </div>
                      </div>

                      <div
                        class="card-body"
-                        *ngIf="
-                          transactionDataExpanded && allItems.length;
-                          else noRecordsFound
-                        "
+                        *ngIf="transactionDataExpanded; else collapsedTable"
                      >
-                        <div *ngIf="isLoading" class="text-center text-muted">
-                          <p>{{ "loadingTransactionLogs" | translate }}</p>
+                        <!-- Loading State -->
+                        <div *ngIf="isLoading" class="text-center py-5">
+                          <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">Loading...</span>
                          </div>
-
-                        <div
-                          *ngIf="!isLoading && transactionLog.length === 0"
-                          class="text-center text-muted"
-                        >
-                          <p>{{ "noTransactionLogsFound" | translate }}</p>
+                          <p class="text-muted mt-2">{{ "loadingTransactionLogs" | translate }}</p>
                        </div>

-                        <div *ngIf="errorMessage" class="alert alert-danger">
+                        <!-- Error Message -->
+                        <div *ngIf="!isLoading && errorMessage" class="alert alert-danger alert-dismissible fade show" role="alert">
                          {{ errorMessage }}
+                          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" (click)="errorMessage = ''"></button>
                        </div>

-                        <div
-                          *ngIf="!isLoading && transactionLog.length > 0"
-                          class="table-responsive"
-                        >
-                          <table class="table mb-0 border">
+                        <!-- No Data Found -->
+                        <div *ngIf="!isLoading && !errorMessage && transactionLog.length === 0" class="text-center py-5 text-muted">
+                          <i class="fas fa-database fa-3x mb-3 opacity-50"></i>
+                          <h5>{{ "noTransactionLogsFound" | translate }}</h5>
+                        </div>
+
+                        <!-- Data Table -->
+                        <div *ngIf="!isLoading && !errorMessage && transactionLog.length > 0" class="table-responsive">
+                          <table class="table table-hover table-bordered mb-0">
                            <thead class="table-light">
                              <tr>
-                                <th>{{ "logID" | translate }}</th>
-                                <th>{{ "organization" | translate }}</th>
-                                <th>{{ "transactionID" | translate }}</th>
-                                <th>{{ "drAccount" | translate }}</th>
-                                <th>{{ "crAccount" | translate }}</th>
-                                <th>{{ "drPcaGlacode" | translate }}</th>
-                                <th>{{ "crPcaglacode" | translate }}</th>
-                                <th>{{ "transactionUri" | translate }}</th>
-                                <th>{{ "transactionCode" | translate }}</th>
-                                <th>{{ "paymentMode" | translate }}</th>
-                                <th>{{ "date" | translate }}</th>
-                                <th>{{ "channel" | translate }}</th>
-                                <th>{{ "createdAt" | translate }}</th>
+                                <th scope="col">{{ "logID" | translate }}</th>
+                                <th scope="col">{{ "organization" | translate }}</th>
+                                <th scope="col">{{ "transactionID" | translate }}</th>
+                                <th scope="col">{{ "drAccount" | translate }}</th>
+                                <th scope="col">{{ "crAccount" | translate }}</th>
+                                <th scope="col">{{ "drPcaGlacode" | translate }}</th>
+                                <th scope="col">{{ "crPcaglacode" | translate }}</th>
+                                <th scope="col">{{ "transactionUri" | translate }}</th>
+                                <th scope="col">{{ "transactionCode" | translate }}</th>
+                                <th scope="col">{{ "paymentMode" | translate }}</th>
+                                <th scope="col">{{ "date" | translate }}</th>
+                                <th scope="col">{{ "channel" | translate }}</th>
+                                <th scope="col">{{ "createdAt" | translate }}</th>
                              </tr>
                            </thead>
                            <tbody>
-                              <tr
-                                *ngFor="
-                                  let log of (
-                                    allItems
-                                    | tableFilter
-                                      : searchText
-                                      : [
-                                          'logID',
-                                          'organization',
+                              <tr *ngFor="let log of filteredItems | tableFilter: searchText: [
+                                    'logId',
+                                    'porOrgacode',
                                    'transactionID',
-                                          'drAccount',
+                                    'drMbmbkmsnumber',
+                                    'crMbmbkmsnumber',
                                    'drPcaGlacode',
                                    'crPcaglacode',
-                                          'crAccount',
                                    'transactionUri',
                                    'transactionCode',
-                                          'paymentMode',
-                                          'date',
-                                          'channel',
-                                          'createdAt',
-                                        ]
-                                  ).slice(
-                                    (currentPage - 1) * itemsPerPage,
-                                    currentPage * itemsPerPage
-                                  )
-                                "
-                              >
-                                <td>{{ log.logId }}</td>
-                                <td>{{ log.porOrgacode }}</td>
-                                <td>{{ log.transactionID }}</td>
-                                <td>{{ log.drMbmbkmsnumber || "-" }}</td>
-                                <td>{{ log.crMbmbkmsnumber || "-" }}</td>
-                                <td>{{ log.drPcaGlacode || "-" }}</td>
-                                <td>{{ log.crPcaglacode || "-" }}</td>
-                                <td>{{ log.transactionUri || "N/A"}}</td>
-                                <td>{{ log.transactionCode || "N/A"}}</td>
-                                <td>{{ log.ppmPymdcode }}</td>
-                                <td>
-                                  {{ log.sgtGntrdate | date: "MMM dd, yyyy" }}
-                                </td>
-                                <td>{{ log.channelCode }}</td>
-                                <td>
-                                  {{
-                                    log.createdAt | date: "MMM dd, yyyy HH:mm"
-                                  }}
-                                </td>
+                                    'ppmPymdcode',
+                                    'sgtGntrdate',
+                                    'channelCode',
+                                    'createdAt'
+                                  ]">
+                                <td><code>{{ log.logId || '-' }}</code></td>
+                                <td>{{ log.porOrgacode || '-' }}</td>
+                                <td><strong>{{ log.transactionID || '-' }}</strong></td>
+                                <td>{{ log.drMbmbkmsnumber || '-' }}</td>
+                                <td>{{ log.crMbmbkmsnumber || '-' }}</td>
+                                <td>{{ log.drPcaGlacode || '-' }}</td>
+                                <td>{{ log.crPcaglacode || '-' }}</td>
+                                <td><small class="text-muted">{{ log.transactionUri || 'N/A' }}</small></td>
+                                <td><span class="badge bg-secondary">{{ log.transactionCode || 'N/A' }}</span></td>
+                                <td>{{ log.ppmPymdcode || '-' }}</td>
+                                <td>{{ log.sgtGntrdate | date: 'MMM dd, yyyy' }}</td>
+                                <td>{{ log.channelCode || '-' }}</td>
+                                <td>{{ log.createdAt | date: 'MMM dd, yyyy HH:mm' }}</td>
                              </tr>
                            </tbody>
                          </table>

-                          <div
-                            class="d-flex justify-content-between align-items-center mt-3"
-                          >
-                            <div class="form-group mb-0">
+                          <!-- Pagination -->
+                          <div class="d-flex justify-content-between align-items-center mt-3 flex-wrap">
+                            <!-- Items per page -->
+                            <div class="d-flex align-items-center gap-2 mb-2 mb-md-0">
+                              <span class="text-muted small">{{ "show" | translate }}</span>
+                              <div style="width: 120px;">
                                <ng-select
                                  class="form-select-sm"
                                  [items]="pageSizeOptions"
-                                bindLabel="label"
                                  bindValue="value"
                                  [(ngModel)]="itemsPerPage"
                                  (change)="itemsPerPageChanged()"
                                  [searchable]="false"
                                  [clearable]="false"
                                  [dropdownPosition]="'top'"
+                                  [disabled]="isLoading"
                                >
+                                  <ng-template ng-option-tmp let-item="item">
+                                    {{ item.value }} {{ "entries" | translate }}
+                                  </ng-template>
+
+                                  <ng-template ng-label-tmp let-item="item">
+                                    {{ item.value }} {{ "entries" | translate }}
+                                  </ng-template>
                                </ng-select>
                              </div>
+                            </div>

-                            <div class="text-muted">
+                            <!-- Page info -->
+                            <div class="text-muted mb-2 mb-md-0">
                              {{ "page" | translate }} {{ currentPage }}
-                              {{ "of" | translate }} {{ totalPages() }} ({{
-                                totalCount
-                              }}
-                              {{ "totalItems" | translate }})
+                              {{ "of" | translate }} {{ totalPages() }}
+                              <span class="d-none d-md-inline">
+                                ({{ totalCount }} {{ "totalItems" | translate }})
+                              </span>
                            </div>

+                            <!-- Pagination buttons -->
                            <div class="btn-group">
                              <button
-                                class="btn btn-primary waves-effect waves-light"
+                                class="btn btn-outline-primary btn-sm"
                                (click)="previousPage()"
+                                [disabled]="currentPage === 1 || isLoading"
                              >
+                                <i class="fas fa-chevron-left me-1"></i>
                                {{ "previous" | translate }}
                              </button>
                              <button
-                                class="btn btn-primary waves-effect waves-light"
+                                class="btn btn-outline-primary btn-sm"
                                (click)="nextPage()"
+                                [disabled]="currentPage === totalPages() || isLoading"
                              >
                                {{ "next" | translate }}
+                                <i class="fas fa-chevron-right ms-1"></i>
                              </button>
                            </div>
                          </div>
@ -211,11 +202,13 @@
    </div>
  </div>
 </div>
-<ng-template #noRecordsFound>
-  <div
-    *ngIf="!isLoading && allItems.length === 0"
-    class="text-center text-muted mt-3"
-  >
-    <p>{{ "noTransactionLogsFound" | translate }}</p>
+
+<ng-template #collapsedTable>
+  <div class="card-body text-center py-4 text-muted" *ngIf="!isLoading">
+    <i class="dripicons-chevron-down fa-2x mb-2"></i>
+    <p>{{ "tableCollapsed" | translate }}</p>
+    <button class="btn btn-sm btn-outline-primary" (click)="toggleTableCard()">
+      {{ "showTable" | translate }}
+    </button>
  </div>
 </ng-template>
--- a/src/app/transaction-logs/transaction-logs.component.scss
+++ b/src/app/transaction-logs/transaction-logs.component.scss
@ -0,0 +1,125 @@
+:host {
+  display: block;
+}
+
+.card-header {
+  background-color: #f8f9fa;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.search-box {
+  position: relative;
+  min-width: 200px;
+  
+  .form-control {
+    padding-left: 2.5rem;
+    padding-right: 1rem;
+  }
+  
+  .search-icon {
+    position: absolute;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #6c757d;
+    pointer-events: none;
+  }
+}
+
+.table {
+  th {
+    font-weight: 600;
+    background-color: #f8f9fa;
+    border-bottom: 2px solid #dee2e6;
+    white-space: nowrap;
+  }
+  
+  td {
+    vertical-align: middle;
+  }
+}
+
+.btn-group-sm > .btn {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.badge {
+  font-size: 0.75em;
+}
+
+.alert-info {
+  background-color: #e7f3ff;
+  border-color: #b3d7ff;
+  color: #004085;
+  
+  .btn-close {
+    padding: 0.5rem;
+  }
+}
+
+.spinner-border {
+  width: 3rem;
+  height: 3rem;
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .card-header .d-flex {
+    flex-direction: column;
+    align-items: stretch !important;
+    gap: 0.75rem !important;
+  }
+  
+  .search-box {
+    min-width: 100%;
+  }
+  
+  .table-responsive {
+    font-size: 0.875rem;
+  }
+  
+  .d-flex.justify-content-between {
+    flex-direction: column;
+    gap: 1rem;
+    
+    > div {
+      width: 100%;
+      justify-content: center !important;
+    }
+  }
+  
+  .btn-group {
+    width: 100%;
+    
+    .btn {
+      flex: 1;
+    }
+  }
+}
+
+// Loading overlay
+.text-center.py-5 {
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+// Hover effects
+.table-hover tbody tr:hover {
+  background-color: rgba(0, 123, 255, 0.05);
+}
+
+// Date filter styles
+.form-control-sm {
+  min-width: 120px;
+}
+
+// Active state for filter buttons
+.btn-outline-primary.active {
+  background-color: #0d6efd;
+  color: white;
+  border-color: #0d6efd;
+}
--- a/src/app/transaction-logs/transaction-logs.component.ts
+++ b/src/app/transaction-logs/transaction-logs.component.ts
@ -7,20 +7,19 @@ import { pageSizeOptions } from '../utils/app.constants';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TableFilterPipe } from '../shared/pipes/table-filter.pipe';
-import {TransactionLog} from "../models/user"
+import { TransactionLog } from "../models/user";
 import { URIKey } from '../utils/uri-enums';
 import { HttpParams } from '@angular/common/http';
 import { HttpURIService } from '../app.http.uri.service';
+import { formatDate } from '@angular/common';

@Component({
  selector: 'app-transaction-logs',
  templateUrl: './transaction-logs.component.html',
-  imports: [CommonModule, TranslateModule, NgSelectModule, FormsModule, ReactiveFormsModule, TableFilterPipe ]
+  styleUrls: ['./transaction-logs.component.scss'],
+  imports: [CommonModule, TranslateModule, NgSelectModule, FormsModule, ReactiveFormsModule, TableFilterPipe]
 })
 export class TransactionLogsComponent implements OnInit {
-onPageSizeChange(arg0: number) {
-throw new Error('Method not implemented.');
-}
  currentPage: number = 1;
  totalCount: number = 0;
  renewalDataExpanded: boolean = true;
@ -32,20 +31,59 @@ throw new Error('Method not implemented.');
  errorMessage: string = '';
  searchText: string = '';
  allItems: TransactionLog[] = [];
-  transactionDataExpanded: boolean = true
+  transactionDataExpanded: boolean = true;
+  
+  // Date range properties
+  fromDate: string = '';
+  toDate: string = '';
+  maxDate: string = '';
+  showDateFilters: boolean = false;
  
  constructor(
    private excelExportService: ExcelExportService,
    private httpService: HttpURIService,
  ) {}

-
  ngOnInit(): void {
+    // Set max date to today
+    this.maxDate = formatDate(new Date(), 'yyyy-MM-dd', 'en-US');
+    
+    // Optionally set default date range (last 30 days)
+    const today = new Date();
+    const lastMonth = new Date();
+    lastMonth.setDate(today.getDate() - 30);
+    
+    this.fromDate = formatDate(lastMonth, 'yyyy-MM-dd', 'en-US');
+    this.toDate = formatDate(today, 'yyyy-MM-dd', 'en-US');
+    
    this.loadTransactionLogs();   
  }
+
  loadTransactionLogs(): void {
    this.isLoading = true;
-  const params = new HttpParams();
+    this.errorMessage = '';
+    
+    // Build query parameters
+    let params = new HttpParams();
+    
+    // Add pagination parameters
+    params = params.set('page', this.currentPage.toString());
+    params = params.set('limit', this.itemsPerPage.toString());
+    
+    // Add date filters if provided
+    if (this.fromDate) {
+      params = params.set('fromDate', this.fromDate);
+    }
+    
+    if (this.toDate) {
+      params = params.set('toDate', this.toDate);
+    }
+    
+    // Add search filter if provided
+    if (this.searchText && this.searchText.trim() !== '') {
+      params = params.set('search', this.searchText.trim());
+    }
+    
    this.httpService
      .requestGET<any>(URIKey.TRANSACTION_LOGS, params)
      .subscribe({
@ -53,54 +91,155 @@ throw new Error('Method not implemented.');
          const logs = Array.isArray(res) ? res : res?.data;
          this.transactionLog = logs ?? [];
          this.allItems = [...this.transactionLog];
+          
+          // Get total count from response
+          if (res?.total !== undefined) {
+            this.totalCount = res.total;
+          } else if (res?.pagination?.total !== undefined) {
+            this.totalCount = res.pagination.total;
+          } else if (res?.meta?.total !== undefined) {
+            this.totalCount = res.meta.total;
+          } else {
            this.totalCount = this.transactionLog.length;
+          }
          
          this.updatePagedItems();
          this.isLoading = false;
        },
        error: (err) => {
-        console.error('Error fetching logging details data:', err);
+          console.error('Error fetching transaction logs:', err);
+          this.errorMessage = err.message || 'Failed to load transaction logs. Please try again.';
          this.transactionLog = [];
+          this.allItems = [];
+          this.totalCount = 0;
+          this.pagedItems = [];
+          this.isLoading = false;
+        },
+        complete: () => {
          this.isLoading = false;
        }
      });
-}
+  }
+
+  // Date filter change handler
+  onDateFilterChange(): void {
+    // Validate date range
+    if (this.fromDate && this.toDate) {
+      const from = new Date(this.fromDate);
+      const to = new Date(this.toDate);
+      
+      if (from > to) {
+        this.errorMessage = 'From date cannot be after To date';
+        return;
+      }
+    }
+    
+    // Reset to first page and reload
+    this.currentPage = 1;
+    this.loadTransactionLogs();
+  }
+
+  // Clear date filters
+  clearDateFilters(): void {
+    this.fromDate = '';
+    this.toDate = '';
+    this.currentPage = 1;
+    this.loadTransactionLogs();
+  }
+
+  // Toggle date filter visibility
+  toggleDateFilters(): void {
+    this.showDateFilters = !this.showDateFilters;
+  }
+
+  // Apply default date range (Last 7 days)
+  applyLast7Days(): void {
+    const today = new Date();
+    const lastWeek = new Date();
+    lastWeek.setDate(today.getDate() - 7);
+    
+    this.fromDate = formatDate(lastWeek, 'yyyy-MM-dd', 'en-US');
+    this.toDate = formatDate(today, 'yyyy-MM-dd', 'en-US');
+    this.onDateFilterChange();
+  }
+
+  // Apply default date range (Last 30 days)
+  applyLast30Days(): void {
+    const today = new Date();
+    const lastMonth = new Date();
+    lastMonth.setDate(today.getDate() - 30);
+    
+    this.fromDate = formatDate(lastMonth, 'yyyy-MM-dd', 'en-US');
+    this.toDate = formatDate(today, 'yyyy-MM-dd', 'en-US');
+    this.onDateFilterChange();
+  }
+
+  // Apply default date range (This month)
+  applyThisMonth(): void {
+    const today = new Date();
+    const firstDay = new Date(today.getFullYear(), today.getMonth(), 1);
+    
+    this.fromDate = formatDate(firstDay, 'yyyy-MM-dd', 'en-US');
+    this.toDate = formatDate(today, 'yyyy-MM-dd', 'en-US');
+    this.onDateFilterChange();
+  }

  toggleTableCard(): void {
    this.transactionDataExpanded = !this.transactionDataExpanded;
-}
+  }
+
  itemsPerPageChanged(): void {
    this.currentPage = 1;
-    this.updatePagedItems();
+    this.loadTransactionLogs();
  }
+
  onSearch(value: string): void {
    this.searchText = value;
-}
+    this.currentPage = 1;
+    
+    // Debounce search to avoid too many API calls
+    clearTimeout((this as any).searchTimeout);
+    (this as any).searchTimeout = setTimeout(() => {
+      this.loadTransactionLogs();
+    }, 300);
+  }

  totalPages(): number {
-    return Math.ceil(this.allItems.length / this.itemsPerPage);
+    return Math.ceil(this.totalCount / this.itemsPerPage);
  }

  previousPage(): void {
    if (this.currentPage > 1) {
      this.currentPage--;
-      this.updatePagedItems();
+      this.loadTransactionLogs();
    }
  }
+
  updatePagedItems(): void {
+    // For client-side display with table filter pipe
    const startIndex = (this.currentPage - 1) * this.itemsPerPage;
    const endIndex = startIndex + this.itemsPerPage;
+    
+    // If using server-side pagination, use transactionLog directly
+    // If using client-side filtering with tableFilter pipe, this might not be needed
    this.pagedItems = this.allItems.slice(startIndex, endIndex);
  }

  nextPage(): void {
    if (this.currentPage < this.totalPages()) {
      this.currentPage++;
-      this.updatePagedItems();
+      this.loadTransactionLogs();
    }
  }
  
-  exportDataInExcel() {
-    this.excelExportService.exportExcel(this.transactionLog, TRANSACTION_LOGS_FILE_NAME)
+  exportDataInExcel(): void {
+    // Export filtered data
+    const dataToExport = this.allItems.length > 0 ? this.allItems : this.transactionLog;
+    this.excelExportService.exportExcel(dataToExport, TRANSACTION_LOGS_FILE_NAME);
+  }
+
+  // Get filtered items for display (used in template)
+  get filteredItems(): TransactionLog[] {
+    return this.allItems;
  }
 }
--- a/src/app/user-management/setup-user/setup-user.component.html
+++ b/src/app/user-management/setup-user/setup-user.component.html
@ -95,7 +95,7 @@
                                    for="userFullname"
                                    class="text-nowrap mt-2"
                                  >
-                                    {{ "name" | translate
+                                    {{ "userFullname" | translate
                                    }}<span class="mandatory">*</span>
                                  </label>
                                  <div
@ -107,9 +107,7 @@
                                      formControlName="userFullname"
                                      name="userFullname"
                                      maxlength="500"
-                                      placeholder="{{
-                                        'Full Name' | translate
-                                      }}"
+                                      placeholder="{{ 'userFullname' | translate }}"
                                    />

                                    <div
@ -394,10 +392,10 @@
                                    {{ "userID" | translate }}
                                  </th>
                                  <th style="width: 25%">
-                                    {{ "Name" | translate }}
+                                    {{ "userFullname" | translate }}
                                  </th>
                                  <th style="width: 25%">
-                                    {{ "Email" | translate }}
+                                    {{ "email" | translate }}
                                  </th>
                                  <th style="width: 15%">
                                    {{ "Role" | translate }}
@ -481,6 +479,13 @@
                                  [clearable]="false"
                                  [dropdownPosition]="'top'"
                                >
+                                 <ng-template ng-option-tmp let-item="item">
+                        {{ item.value }} {{ "entries" | translate }}
+                      </ng-template>
+
+                      <ng-template ng-label-tmp let-item="item">
+                        {{ item.value }} {{ "entries" | translate }}
+                      </ng-template>
                                </ng-select>
                              </div>

--- a/src/app/utils/app.constants.ts
+++ b/src/app/utils/app.constants.ts
@ -5,9 +5,9 @@ export const CONSTANTS = {
 };

 export const pageSizeOptions = [
-  { value: 10, label: '10 items' },
-  { value: 20, label: '20 items' },
-  { value: 50, label: '50 items' },
+  { value: 10, label: '10' },
+  { value: 20, label: '20' },
+  { value: 50, label: '50' },
 ];

 export const toDateAfterFromDateValidator: ValidatorFn = (
--- a/src/assets/i18n/Arabic.json
+++ b/src/assets/i18n/Arabic.json
@ -1,159 +1,159 @@
 {
-    "logintoAccount":"تسجيل الدخول إلى حسابك",
-    "userName":"اسم المستخدم",
-    "userNamePlaceHolder":"ادخل اسم المستخدم",
-    "password":"كلمة المرور",
-    "passwordPlaceHolder":"أدخل كلمة المرور",
+  "logintoAccount": "تسجيل الدخول إلى حسابك",
+  "userName": "اسم المستخدم",
+  "userNamePlaceHolder": "ادخل اسم المستخدم",
+  "password": "كلمة المرور",
+  "passwordPlaceHolder": "أدخل كلمة المرور",
  "defaultPassword": "كلمة المرور الافتراضية",
-    "rememberMe":"تذكرنى",
-    "forgotPassword":"هل نسيت كلمة السر؟",
+  "rememberMe": "تذكرنى",
+  "forgotPassword": "هل نسيت كلمة السر؟",
  "passwordTooShort": "كلمة المرور قصيرة جدًا.",
  "passwordsDoNotMatch": "كلمتا المرور غير متطابقتين.",
-    "login":"تسجيل الدخول",
-    "dashboardTitle":"لوحة القيادة",
+  "login": "تسجيل الدخول",
+  "dashboardTitle": "لوحة القيادة",
  "passwordChangeRequired": "تغيير كلمة المرور مطلوب",
-    "monthlyReqTitle":"الطلبات الشهرية",
-    "monthlySmsTitle":"الرسائل القصيرة الشهرية",
-    "Dashboard":"لوحة القيادة",
-    "UserManagement":"إدارةالمستخدم",
-    "thirdPartyRegistration":"تسجيل الطرف الثالث",
-    "setupUser":"مستخدم الإعداد",
-    "resetPassword":"إعادة تعيين كلمة مرور المستخدم",
-    "changePassword":"غير كلمة السر",
-    "Logging":"تسجيل",
-    "loggerManager":"مدير المسجل",
-    "SMSBanking":"خدمة الرسائل المصرفية",
-    "smsLogger":"مسجل الرسائل",
+  "monthlyReqTitle": "الطلبات الشهرية",
+  "monthlySmsTitle": "الرسائل القصيرة الشهرية",
+  "Dashboard": "لوحة القيادة",
+  "UserManagement": "إدارةالمستخدم",
+  "thirdPartyRegistration": "تسجيل الطرف الثالث",
+  "setupUser": "مستخدم الإعداد",
+  "resetPassword": "إعادة تعيين كلمة مرور المستخدم",
+  "changePassword": "غير كلمة السر",
+  "Logging": "تسجيل",
+  "loggerManager": "مدير المسجل",
+  "SMSBanking": "خدمة الرسائل المصرفية",
+  "smsLogger": "مسجل الرسائل",
  "smsLoggerDetails": "تفاصيل سجل الرسائل القصيرة",
-    "smsGateway":"بوابة الرسائل",
-    "ibUnblockUser":"إلغاء حظر مستخدم IB",
-    "ibSupport":"دعم IB",
-    "Permissions":"أذونات",
-    "permissions":"مدير الأذونات",
-    "TodayTotalRequests":"إجمالي الطلبات اليوم",
-    "TodayTotalSms":"مجموع الرسائل القصيرة اليوم",
-    "DescriptionUserPermission":"وصف",
-    "PermissionsUserPermission":"أذونات",
-    "SaveUserPermission":"يحفظ",
-    "UpdateUserPermission":"تحديث",
-    "DeleteUserPermission":"حذف",
-    "ViewUserPermission":"رأي",
-    "SelectUser":"اختر المستخدم",
-    "SelectAUser":"حدد مستخدمًا",
-    "loggingTitle":"تسجيل",
-    "IBChildTitle":"إلغاء حظر عن مستخدم",
-    "IBTitle":"تسجيل",
-    "loggingChildTitle":"مدير المسجل",
-    "fromDate":"من التاريخ",
+  "smsGateway": "بوابة الرسائل",
+  "ibUnblockUser": "إلغاء حظر مستخدم IB",
+  "ibSupport": "دعم IB",
+  "Permissions": "أذونات",
+  "permissions": "مدير الأذونات",
+  "TodayTotalRequests": "إجمالي الطلبات اليوم",
+  "TodayTotalSms": "مجموع الرسائل القصيرة اليوم",
+  "DescriptionUserPermission": "وصف",
+  "PermissionsUserPermission": "أذونات",
+  "SaveUserPermission": "يحفظ",
+  "UpdateUserPermission": "تحديث",
+  "DeleteUserPermission": "حذف",
+  "ViewUserPermission": "رأي",
+  "SelectUser": "اختر المستخدم",
+  "SelectAUser": "حدد مستخدمًا",
+  "loggingTitle": "تسجيل",
+  "IBChildTitle": "إلغاء حظر عن مستخدم",
+  "IBTitle": "تسجيل",
+  "loggingChildTitle": "مدير المسجل",
+  "fromDate": "من التاريخ",
  "custId": "قيمة هوية العميل",
-    "toDate":"حتي اليوم",
-    "findLogs":"البحث عن السجلات",
-    "unBlockCustomer":"إلغاء حظر العميل",
+  "toDate": "حتي اليوم",
+  "findLogs": "البحث عن السجلات",
+  "unBlockCustomer": "إلغاء حظر العميل",
  "unblockUserDetails": "إلغاء حظر تفاصيل المستخدم",
  "loggerManagerDetails": "تفاصيل مدير السجلات",
  "fetchCustomer": "ابحث عن العملاء",
-    "loggingID":"معرف",
-    "firstName":"الاسم الأول",
+  "loggingID": "معرف",
+  "firstName": "الاسم الأول",
  "lastName": "اسم العائلة",
-    "cmpCuststatus":"حالة العميل",
+  "cmpCuststatus": "حالة العميل",
  "cmpCustlastlogin": "آخر تسجيل دخول للعميل",
-    "accountNonLocked":"الحساب مغلق",
-    "lockTime":"وقت القفل",
-    "accountno":"رقم الحساب",
-    "phoneno":"رقم الهاتف",
-    "loggingRequestUri":"طلب Uri",
-    "loggingResponseCode":"رمز الاستجابة",
-    "loggingRemoteIP":"بعيد IP",
+  "accountNonLocked": "الحساب مغلق",
+  "lockTime": "وقت القفل",
+  "accountno": "رقم الحساب",
+  "phoneno": "رقم الهاتف",
+  "loggingRequestUri": "طلب Uri",
+  "loggingResponseCode": "رمز الاستجابة",
+  "loggingRemoteIP": "بعيد IP",
  "enterIdentityValue": "أدخل قيمة الهوية",
-    "loggingTimeTaken":"الوقت المستغرق",
-    "loggingDate":"تاريخ",
+  "loggingTimeTaken": "الوقت المستغرق",
+  "loggingDate": "تاريخ",
  "loggingDateTime": "التاريخ والوقت",
-    "loggingMethod":"طريقة",
-    "DataAnalysis":"تحليل البيانات",
-    "Analysis":"التحليلات",
-    "smsBankingTitle":"خدمة الرسائل المصرفية",
-    "smsBankingChildTitle":"مسجل الرسائل",
-    "smsTrackingID":"معرف تتبع",
-    "smsMessage":"رسالة",
-    "smsNo":"رقم الهاتف",
-    "smsOrgaCode":"كود المنظمة",
-    "smsDate":"تاريخ",
-    "smsStatus":"حالة",
-    "viewThirdPartyAccounts":"عرض الحسابات",
-    "ThirdPartyID":"معرف الحفلة الثالثة",
-    "name":"اسم",
-    "EnterThirdPartyName":"أدخل اسم الطرف الثالث",
-    "Email":"البريد الإلكتروني",
+  "loggingMethod": "طريقة",
+  "DataAnalysis": "تحليل البيانات",
+  "Analysis": "التحليلات",
+  "smsBankingTitle": "خدمة الرسائل المصرفية",
+  "smsBankingChildTitle": "مسجل الرسائل",
+  "smsTrackingID": "معرف تتبع",
+  "smsMessage": "رسالة",
+  "smsNo": "رقم الهاتف",
+  "smsOrgaCode": "كود المنظمة",
+  "smsDate": "تاريخ",
+  "smsStatus": "حالة",
+  "viewThirdPartyAccounts": "عرض الحسابات",
+  "ThirdPartyID": "معرف الحفلة الثالثة",
+  "name": "اسم",
+  "EnterThirdPartyName": "أدخل اسم الطرف الثالث",
+  "email": "البريد الإلكتروني",
  "invalidEmail": "أدخل بريدًا إلكترونيًا صالحًا يحتوي على @",
-    "Address":"تبوك",
-    "phoneNumber":"رقم الهاتف",
-    "PhoneNumberPlaceHolder":"أدخل رقم الهاتف",
+  "Address": "تبوك",
+  "phoneNumber": "رقم الهاتف",
+  "PhoneNumberPlaceHolder": "أدخل رقم الهاتف",
  "regPhoneNo": "يجب أن يتكون رقم الهاتف من 10 أرقام",
-    "NewNoOfAccounts":"عدد جديد من الحسابات",
-    "EnterNewNumberOfAccounts":"أدخل عددًا جديدًا من الحسابات",
-    "TotalNoOfAccounts":"العدد الإجمالي للحسابات",
-    "gridSearch":"يبحث:",
-    "gridShow":"يعرض",
-    "gridEntries":"إدخالات",
-    "gridFilter":"منقي",
-    "gridNum10":"عشرة",
-    "gridNum25":"خمسة وعشرون",
-    "gridNum50":"خمسون",
-    "gridNum100":"مائة",
-    "userID":"معرف المستخدم",
-    "userId":"معرف المستخدم",
-    "userContactNumber":"أدخل رقم اتصال المستخدم",
-    "SelectHomeBranch":"حدد الفرع الرئيسي",
-    "SelectRole":"حدد الدور",
-    "HomeBranch":"فرع المنزل",
-    "Role":"دور",
-    "ResetPassword":"إعادة تعيين كلمة المرور",
-    "enterNewPassword":"أدخل كلمة مرور جديدة",
-    "oldPassword":"كلمة المرور القديمة",
-    "newPasswordStatic":"كلمة السر الجديدة",
-    "savePassword":"يحفظ",
-    "passwordPattern":"يجب أن تكون كلمة المرور أكثر من 8 أحرف وتتضمن حرفًا كبيرًا وحرفًا صغيرًا ورقمًا وحرفًا خاصًا",
-    "SMSGatewaySelect":"اختر صنف",
+  "NewNoOfAccounts": "عدد جديد من الحسابات",
+  "EnterNewNumberOfAccounts": "أدخل عددًا جديدًا من الحسابات",
+  "TotalNoOfAccounts": "العدد الإجمالي للحسابات",
+  "gridSearch": "يبحث:",
+  "gridShow": "يعرض",
+  "gridEntries": "إدخالات",
+  "gridFilter": "منقي",
+  "gridNum10": "عشرة",
+  "gridNum25": "خمسة وعشرون",
+  "gridNum50": "خمسون",
+  "gridNum100": "مائة",
+  "userID": "معرف المستخدم",
+  "userId": "معرف المستخدم",
+  "userContactNumber": "أدخل رقم اتصال المستخدم",
+  "SelectHomeBranch": "حدد الفرع الرئيسي",
+  "SelectRole": "حدد الدور",
+  "HomeBranch": "فرع المنزل",
+  "Role": "دور",
+  "ResetPassword": "إعادة تعيين كلمة المرور",
+  "enterNewPassword": "أدخل كلمة مرور جديدة",
+  "oldPassword": "كلمة المرور القديمة",
+  "newPasswordStatic": "كلمة السر الجديدة",
+  "savePassword": "يحفظ",
+  "passwordPattern": "يجب أن تكون كلمة المرور أكثر من 8 أحرف وتتضمن حرفًا كبيرًا وحرفًا صغيرًا ورقمًا وحرفًا خاصًا",
+  "SMSGatewaySelect": "اختر صنف",
  "selectIdentValueType": "حدد نوع قيمة الهوية",
-    "selectIdentityValue" : "رقم الهوية مطلوب",
-    "IdTypeSelect":"حدد تحديد النوع",
-    "SMSGatewaySyriatel":"سيريتل",
-    "SMSGatewayTwillio":"تويليو",
-    "SMSGatewayJazz":"جاز",
-    "syriatelCredentials":"أوراق اعتماد سيريتل",
-    "twilioCredentials":"أوراق اعتماد تويليو",
-    "jazzCredentials":"أوراق اعتماد جاز",
-    "accountSID":"الحساب SID",
-    "authToken":"رمز المصادقة",
-    "fromNumber":"من الرقم",
-    "senderName":"اسم المرسل",
-    "senderNamePlaceHolder":"أدخل اسم المرسل",
+  "selectIdentityValue": "رقم الهوية مطلوب",
+  "IdTypeSelect": "حدد تحديد النوع",
+  "SMSGatewaySyriatel": "سيريتل",
+  "SMSGatewayTwillio": "تويليو",
+  "SMSGatewayJazz": "جاز",
+  "syriatelCredentials": "أوراق اعتماد سيريتل",
+  "twilioCredentials": "أوراق اعتماد تويليو",
+  "jazzCredentials": "أوراق اعتماد جاز",
+  "accountSID": "الحساب SID",
+  "authToken": "رمز المصادقة",
+  "fromNumber": "من الرقم",
+  "senderName": "اسم المرسل",
+  "senderNamePlaceHolder": "أدخل اسم المرسل",
  "message": "رسالة",
  "template": "قالب",
-    "language":"اللغة",
+  "language": "اللغة",
  "notificationType": "نوع الإشعار",
-    "sinceLastDay":"منذ اليوم الماضي",
-    "TodayTotalErrorRequest":"طلب إجمالي الخطأ اليوم",
-    "TodayTotalPendingSms":"مجموع الرسائل القصيرة المعلقة اليوم",
-    "selectTheDates":"الرجاء تحديد التواريخ",
-    "selectIdentValue":"الرجاء تحديد نوع الهوية",
-    "noLogsFound":"لم يتم العثور على سجلات بين هذه التواريخ",
-    "loginSuccess":"تم تسجيل الدخول بنجاح",
-    "passwordNotMatched":"كلمة السر غير متطابقة",
-    "passwordPatternNotMatched":"نمط كلمة المرور غير مطابق",
-    "successDeleted":"تم الحذف بنجاح",
-    "passwordNotSame":"لا يمكن أن تكون كلمة المرور هي نفسها كلمة المرور القديمة",
-    "SuccessSave":"تم الحفظ بنجاح",
-    "SuccessFind":"تجده بنجاح",
+  "sinceLastDay": "منذ اليوم الماضي",
+  "TodayTotalErrorRequest": "طلب إجمالي الخطأ اليوم",
+  "TodayTotalPendingSms": "مجموع الرسائل القصيرة المعلقة اليوم",
+  "selectTheDates": "الرجاء تحديد التواريخ",
+  "selectIdentValue": "الرجاء تحديد نوع الهوية",
+  "noLogsFound": "لم يتم العثور على سجلات بين هذه التواريخ",
+  "loginSuccess": "تم تسجيل الدخول بنجاح",
+  "passwordNotMatched": "كلمة السر غير متطابقة",
+  "passwordPatternNotMatched": "نمط كلمة المرور غير مطابق",
+  "successDeleted": "تم الحذف بنجاح",
+  "passwordNotSame": "لا يمكن أن تكون كلمة المرور هي نفسها كلمة المرور القديمة",
+  "SuccessSave": "تم الحفظ بنجاح",
+  "SuccessFind": "تجده بنجاح",
  "customerAlreadyUnblocked": "العميل تم فتح حسابه مسبقًا",
-    "SuccessUpdate":"تم التحديث بنجاح",
-    "UpdateFailed":"غير قادر على التحديث",
-    "formInvalid":"النموذج غير صالح",
-    "ServerError":"خطأ في الخادم",
-    "fieldsMissing":"الحقول المطلوبة مفقودة أو غير صالحة",
-    "selectAll":" اختر الكل " ,
-    "logoutSuccess":"تم تسجيل الخروج بنجاح",
-    "smsGateWayChanged":"تم تغيير بوابة الرسائل القصيرة بنجاح",
+  "SuccessUpdate": "تم التحديث بنجاح",
+  "UpdateFailed": "غير قادر على التحديث",
+  "formInvalid": "النموذج غير صالح",
+  "ServerError": "خطأ في الخادم",
+  "fieldsMissing": "الحقول المطلوبة مفقودة أو غير صالحة",
+  "selectAll": " اختر الكل ",
+  "logoutSuccess": "تم تسجيل الخروج بنجاح",
+  "smsGateWayChanged": "تم تغيير بوابة الرسائل القصيرة بنجاح",
  "cnic_scnic": "CNIC / SCNIC",
  "poc": "POC",
  "nicop": "S / NICOP",
@ -179,7 +179,6 @@
  "invalidEmailFormatError": "تنسيق البريد الإلكتروني غير صالح.",
  "passNotMatch": "كلمة السر غير متطابقة",

-    
  "POR_ORGACODE": "المصرف",
  "purposeSetup": "أضف غرض المعاملة",
  "purpcodeLabel": "كود الغرض",
@ -187,11 +186,11 @@
  "purpcodePlaceholder": "أدخل رمز الغرض",
  "purpdescPlaceholder": "أدخل وصف الغرض",
  "transactionDetails": "تفاصيل المعاملة",
-    "lengthExceed":" الطول تجاوز ",
+  "lengthExceed": " الطول تجاوز ",
  "transactionLogs": "سجلات المعاملات",
  "loadingTransactionLogs": "جاري تحميل سجلات المعاملات...",
  "noTransactionLogsFound": "لم يتم العثور على سجلات معاملات.",
-    "noThirdPartyRegFound":"لم يتم العثور على تفاصيل تسجيل الطرف الثالث",
+  "noThirdPartyRegFound": "لم يتم العثور على تفاصيل تسجيل الطرف الثالث",
  "logID": "معرف السجل",
  "organization": "المنظمة",
  "transactionID": "معرف المعاملة",
@ -204,19 +203,19 @@
  "loading": "جاري التحميل",
  "invalidField": "ادخال غير صحيح",
  "action": "اجراء",
-    "confirmDelete":"هل أنت متأكد أنك تريد حذف؟",
-    "confirmSave":"هل أنت متأكد أنك تريد الحفظ؟",
+  "confirmDelete": "هل أنت متأكد أنك تريد حذف؟",
+  "confirmSave": "هل أنت متأكد أنك تريد الحفظ؟",
  "2-stepAppPassword": "أدخل التحقق بخطوتين الذي تم إنشاؤه - كلمة مرور التطبيق",
  "english": "إنجليزي",
  "arabic": "عربي",
-    "userNameRequired" : "اسم المستخدم مطلوب",
+  "userNameRequired": "اسم المستخدم مطلوب",
  "userNamePattterenError": "يُسمح فقط بالأحرف الصغيرة والأرقام",
  "PasswordRequired": "كلمة المرور مطلوبة",
  "copyRightsReserved": "جميع الحقوق محفوظة © {{currentYearLong}} لشركة MFSYS Technologies.",
  "versionAndBuildNumber": "الإصدار {{versionNumber}} البناء {{buildNumber}}",
  "versionBuildDate": "+ تاريخ البناء {{date}}",
-    "dashboard":"لوحة القيادة",
-    "date" : "تاريخ",
+  "dashboard": "لوحة القيادة",
+  "date": "تاريخ",
  "logout": "تسجيل الخروج",
  "save": "يحفظ",
  "update": "تحديث",
@ -233,11 +232,11 @@
  "record": "سِجِلّ",
  "previous": "سابق",
  "next": "التالي",
-    "LOGIN_SUCCESSFULLY":"تم تسجيل الدخول بنجاح",
+  "LOGIN_SUCCESSFULLY": "تم تسجيل الدخول بنجاح",
  "RESET_PASSWORD_SUCCESS": "تمت إعادة تعيين كلمة المرور بنجاح",
  "CHANGE_PASSWORD_SUCCESS": "تم تغيير كلمة المرور بنجاح",
  "ALREADY_LOGGED_IN": "المستخدم مسجل دخوله بالفعل",
-    "ACCESS_DENIED" : "تم الرفض",
+  "ACCESS_DENIED": "تم الرفض",
  "INTERNAL_SERVER_ERROR": "خطأ في الخادم الداخلي",
  "CONNECTION_ERROR": "خطأ في الاتصال",
  "BAD_REQUEST": "اقتراح غير جيد",
@ -248,7 +247,7 @@
  "deleteUser": "حذف حساب المستخدم",
  "permissionManagement": "إدارة الأذونات",
  "userCode": "مستخدم",
-    "choose" : "يختار",
+  "choose": "يختار",
  "allow": "يسمح",
  "toDateInvalidError": "يجب أن يكون تاريخ اليوم أكبر من أو يساوي تاريخ البداية",
  "noLoggingDetailsFound": "لم يتم العثور على تفاصيل التسجيل",
@ -277,7 +276,6 @@
  "requestUri": "طلب URI",
  "method": "طريقة",
  "id": "بطاقة تعريف",
-
  "logId": "معرف السجل",
  "porOrgacode": "رمز المنظمة",
  "drMbmbkmsnumber": "رقم الحساب المدين",
@ -290,5 +288,12 @@
  "drPcaGlacode": "حساب DR GL",
  "transactionUri": "معرّف المعاملة",
  "transactionCode": "رمز المعاملة",
-    "channelCode": "رمز القناة"
+  "channelCode": "رمز القناة",
+  "userFullname": "الاسم الكامل",
+  "show": "عرض",
+  "tableCollapsed": "الجدول مطوي",
+  "showTable": "عرض الجدول",
+  "collapse": "يطوي",
+  "expand": "توسيع",
+  "entries": "إدخالات"
 }
--- a/src/assets/i18n/English.json
+++ b/src/assets/i18n/English.json
@ -83,7 +83,6 @@
    "ThirdPartyID":"Third Party ID",
    "name":"Name",
    "EnterThirdPartyName":"Enter Third Party Name",
-    "Email":"Email",
    "email":"Email",
    "Address":"Address",
    "phoneNumber":"Phone Number",
@ -166,7 +165,6 @@
    "ERR_APP_B_0004":"Session timed out",
    "ERR_APP_B_0005":"Unauthorized: {{value1}}.",
    "ERR_MDL_B_0001": "Purpose Code already exists",
-
    "feedbackSetup": "Feedback Setup",
    "credentials": "Credentials",
    "credentialsTitle": "Feedback Credentials Setup",
@ -292,6 +290,12 @@
    "sgtGntrdate": "Transaction Date",
    "sgtGntrcreateat": "Creation Date",
    "updatedAt": "Updated At",
-
-    "channelCode": "Channel Code"
+    "channelCode": "Channel Code",
+    "userFullname" : "Full Name",
+    "show": "Show",
+    "entries": "entries",
+    "tableCollapsed": "Table collapsed",
+    "showTable": "Show Table",
+    "collapse": "Collapse",
+    "expand": "Expand"
 }