src/app/app.routes.ts

@@ -68,6 +68,14 @@ export const routes: Routes = [
                         m => m.LoggingComponent
                     )
             },
+            {
+                path: 'transactionLogs',
+                canActivate: [ActivityGuard],
+                loadComponent: () =>
+                    import('./transaction-logs/transaction-logs.component').then(
+                        m => m.TransactionLogsComponent
+                    )
+            },
             {
                 path: 'analysis',
                 canActivate: [ActivityGuard],

src/app/shared/components/side-nav/side-nav.component.html

@@ -47,7 +47,13 @@
                             <span> {{ 'loggerManager' | translate }}</span>
                         </a>
                     </li>
+                    <li *ngIf="permissions.transactionLogs || authService.isAdminUser()">
+                    <a routerLink="/home/transactionLogs" routerLinkActive="mm-active">
+                        <span>{{ 'transactionLogs' | translate }}</span>
+                    </a>
+                </li>
                 </ul>
+                
             </li>
             <li *ngIf="permissions.SMSBanking || authService.isAdminUser()">
                 <a href="javascript:void(0);" class="has-arrow waves-effect" (click)="toggleMenu($event)">

src/app/shared/services/transaction-log.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { map, Observable } from 'rxjs';
+import { URIKey } from '../../utils/uri-enums';
+import { HttpErrorResponse, HttpParams } from '@angular/common/http';
+import { HttpURIService } from '../../app.http.uri.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TransactionLogService {
+
+  constructor(private httpUriService: HttpURIService) { }
+
+  getTransactionLogs(): Observable<any[]> {
+    const params = new HttpParams();
+    return this.httpUriService.requestGET(URIKey.TRANSACTION_LOGS, params).pipe(map((response: any) => {
+      if (!(response instanceof HttpErrorResponse)) {
+        return Array.isArray(response) ? response : [];
+      }
+      return [];
+    })
+    );
+  }
+}

src/app/transaction-logs/transaction-logs.component.html

@@ -0,0 +1,81 @@
+<div id="layout-wrapper">
+  <div class="inner-pg-sp">
+    <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>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+      <div class="col-xl-12 mt-4">
+        <div class="card border">
+          <div class="card-body">
+            <div class="table-section">
+              <div class="row">
+                <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">
+                        {{'transactionLogs' | translate}}
+                        
+                      </div>
+
+                      <div class="card-body">
+                        <div *ngIf="isLoading" class="text-center text-muted">
+                          <p>{{'loadingTransactionLogs' | translate}}</p>
+                        </div>
+
+                        <div *ngIf="!isLoading && logs.length === 0" class="text-center text-muted">
+                          <p>{{'noTransactionLogsFound' | translate}}</p>
+                        </div>
+
+                        <div *ngIf="errorMessage" class="alert alert-danger">
+                          {{ errorMessage }}
+                        </div>
+
+                        <div *ngIf="!isLoading && logs.length > 0" class="table-responsive">
+                          <table class="table mb-0 border">
+                            <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>{{'paymentMode' | translate}}</th>
+                                <th>{{'date' | translate}}</th>
+                                <th>{{'channel' | translate}}</th>
+                                <th>{{'createdAt' | translate}}</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr *ngFor="let log of logs">
+                                <td>{{ log.logId }}</td>
+                                <td>{{ log.porOrgacode }}</td>
+                                <td>{{ log.transactionID }}</td>
+                                <td>{{ log.drMbmbkmsnumber || '-' }}</td>
+                                <td>{{ log.crMbmbkmsnumber || '-' }}</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>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/transaction-logs/transaction-logs.component.spec.ts

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

src/app/transaction-logs/transaction-logs.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import { TransactionLogService } from '../shared/services/transaction-log.service';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+
+interface TransactionLog {
+  logId: number;
+  porOrgacode: string;
+  drMbmbkmsnumber: string;
+  crMbmbkmsnumber: string;
+  crPcaglacode: string;
+  drPcaGlacode: string;
+  ppmPymdcode: string;
+  sgtGntrdate: string;
+  sgtGntrcreateat: string;
+  channelCode: string;
+  transactionID: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+@Component({
+  selector: 'app-transaction-logs',
+  templateUrl: './transaction-logs.component.html',
+  providers: [TransactionLogService],
+  imports:[CommonModule, TranslateModule]
+})
+export class TransactionLogsComponent implements OnInit {
+
+  logs: TransactionLog[] = [];
+  isLoading = false;
+  errorMessage: string = '';
+
+  constructor(private transactionLogService: TransactionLogService) {}
+
+  ngOnInit(): void {
+    this.loadLogs();
+  }
+
+  loadLogs() {
+    this.isLoading = true;
+    this.errorMessage = '';
+    
+    this.transactionLogService.getTransactionLogs().subscribe({
+      next: (res) => {
+        this.logs = res;
+        this.isLoading = false;
+      },
+      error: (err) => {
+        console.error('Failed to load transaction logs', err);
+        this.errorMessage = 'Failed to load transaction logs. Please try again.';
+        this.isLoading = false;
+      }
+    });
+  }
+}

src/app/utils/uri-enums.ts

@@ -11,5 +11,6 @@ export enum URIKey {
     GET_ALL_USER_URI = "GET_ALL_USER_URI",
     RESET_PASSWORD_URI = "RESET_PASSWORD_URI",
     CHANGE_PASSWORD_URI = "CHANGE_PASSWORD_URI",
-    THIRD_PARTY_REGISTER_URI = "THIRD_PARTY_REGISTER_URI"
+    THIRD_PARTY_REGISTER_URI = "THIRD_PARTY_REGISTER_URI",
+    TRANSACTION_LOGS = "TRANSACTION_LOGS"
 }

src/assets/data/app.uri.json

@@ -66,6 +66,11 @@
                         "Id" : "ENTITY_THIRD_PARTY_REGISTER_URI",
                         "URI": "/user/thirdPartyRegisteration",
                         "UUID": "THIRD_PARTY_REGISTER_URI"
+                    },
+                     {
+                        "Id": "ENTITY_TRANSACTION_LOGS",
+                        "URI": "/transaction/logs",
+                        "UUID": "TRANSACTION_LOGS"
                     }
                 ]
             }

src/assets/i18n/Arabic.json

@@ -188,6 +188,19 @@
     "purpdescPlaceholder": "أدخل وصف الغرض",
     "transactionDetails": "تفاصيل المعاملة",
     "lengthExceed":" الطول تجاوز ",
+    "transactionLogs": "سجلات المعاملات",
+    "loadingTransactionLogs": "جاري تحميل سجلات المعاملات...",
+    "noTransactionLogsFound": "لم يتم العثور على سجلات معاملات.",
+    "logID": "معرف السجل",
+    "organization": "المنظمة",
+    "transactionID": "معرف المعاملة",
+    "drAccount": "حساب المدين",
+    "crAccount": "حساب الدائن",
+    "paymentMode": "وسيلة الدفع",
+    "channel": "القناة",
+    "createdAt": "تم الإنشاء في",
+    "refresh": "تحديث",
+    "loading": "جاري التحميل",
     "invalidField": "ادخال غير صحيح",
     "action": "اجراء",
     "confirmDelete":"هل أنت متأكد أنك تريد حذف؟",

src/assets/i18n/English.json

@@ -188,6 +188,19 @@
     "transactionDetails": "Transaction Details",
     "invalidField": "Invalid Input",
 	"lengthExceed": "Length exceeded",
+    "transactionLogs": "Transaction Logs",
+    "loadingTransactionLogs": "Loading transaction logs...",
+    "noTransactionLogsFound": "No transaction logs found.",
+    "logID": "Log ID",
+    "organization": "Organization",
+    "transactionID": "Transaction ID",
+    "drAccount": "DR Account",
+    "crAccount": "CR Account",
+    "paymentMode": "Payment Mode",
+    "channel": "Channel",
+    "createdAt": "Created At",
+    "refresh": "Refresh",
+    "loading": "Loading",
     "action": "Action",
     "recordNotFound": "Record not found",
     "confirmDelete":"Are you sure you want to delete?",

src/styles.scss

@@ -12,6 +12,13 @@
     border-style: dotted;
     opacity: 0.5;
   }
+    .table-light {
+  
+      th {
+        background-color: #155183 !important;
+  
+      }
+    }
 
   table {
     width: 100% !important;