From 69cb52694e7d19dc5f0ab5df53924a57744ac885 Mon Sep 17 00:00:00 2001 From: Naeem Ullah Date: Thu, 22 Jan 2026 14:19:10 +0500 Subject: [PATCH] Enhance transaction logs and user permissions UI Added new fields (crPcaglacode, drPcaGlacode, amount, paymentMode) to the TransactionLog model and updated the transaction logs table to display these fields. Improved user permissions UI with better styling, scrollable tables, and enhanced ng-select options. Updated user setup to use a more descriptive placeholder and added a confirmation dialog for user deletion. Also improved i18n translations for new fields and cleaned up validation and error messages. --- package.json | 2 +- .../authenticate/login/login.component.html | 1 - src/app/models/user.ts | 6 +- .../transaction-logs.component.html | 202 ++++++++++++------ .../setup-user/setup-user.component.html | 17 +- .../setup-user/setup-user.component.ts | 12 +- .../user-permissions.component.html | 121 +++++------ .../user-permissions.component.scss | 83 +++++-- src/assets/i18n/English.json | 2 + 9 files changed, 284 insertions(+), 162 deletions(-) diff --git a/package.json b/package.json index a5d4d50..eb16ccc 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "watch:dev": "ng build --watch --configuration=development", "watch:test": "ng build --watch --configuration=test", "test": "ng test", - "serve:ssr": "node dist/aconnect-ux/server/main.js" + "serve:ssr": "node dist/aconnect-ux/server/main.js" }, "private": true, "dependencies": { diff --git a/src/app/authenticate/login/login.component.html b/src/app/authenticate/login/login.component.html index a543a1c..0e5e07d 100644 --- a/src/app/authenticate/login/login.component.html +++ b/src/app/authenticate/login/login.component.html @@ -32,7 +32,6 @@
{{"userNameRequired" | translate}} - {{"userNamePattterenError" | translate}}
diff --git a/src/app/models/user.ts b/src/app/models/user.ts index 46ca9e1..c217c28 100644 --- a/src/app/models/user.ts +++ b/src/app/models/user.ts @@ -18,7 +18,11 @@ export interface TransactionLog { porOrgacode: string; transactionID: string; drMbmbkmsnumber: string; - crMbmbkmsnumber: string; + crMbmbkmsnumber: string; + crPcaglacode: string; + drPcaGlacode: string; + amount: number; + paymentMode: string; ppmPymdcode: string; sgtGntrdate: string; channelCode: string; diff --git a/src/app/transaction-logs/transaction-logs.component.html b/src/app/transaction-logs/transaction-logs.component.html index adf4e53..a51fa7b 100644 --- a/src/app/transaction-logs/transaction-logs.component.html +++ b/src/app/transaction-logs/transaction-logs.component.html @@ -3,9 +3,9 @@
-
- -
+
@@ -19,21 +19,40 @@
-
- {{'transactionLogs' | translate}} - +
+ {{ "transactionLogs" | translate }} +
- +
-
- -
- - - +
+ +
+ + + @@ -43,76 +62,136 @@
- -
+
-

{{'loadingTransactionLogs' | translate}}

+

{{ "loadingTransactionLogs" | translate }}

-
-

{{'noTransactionLogsFound' | translate}}

+
+

{{ "noTransactionLogsFound" | translate }}

{{ errorMessage }}
-
+
- - - - - - - - - + + + + + + + + + + + - + *ngFor=" + let log of ( + allItems + | tableFilter + : searchText + : [ + 'logID', + 'organization', + 'transactionID', + 'drAccount', + 'drPcaGlacode', + 'crPcaglacode', + 'crAccount', + 'paymentMode', + 'date', + 'channel', + 'createdAt', + ] + ).slice( + (currentPage - 1) * itemsPerPage, + currentPage * itemsPerPage + ) + " + > - - + + + + - + - +
{{'logID' | translate}}{{'organization' | translate}}{{'transactionID' | translate}}{{'drAccount' | translate}}{{'crAccount' | translate}}{{'paymentMode' | translate}}{{'date' | translate}}{{'channel' | translate}}{{'createdAt' | translate}}{{ "logID" | translate }}{{ "organization" | translate }}{{ "transactionID" | translate }}{{ "drAccount" | translate }}{{ "crAccount" | translate }}{{ "drPcaGlacode" | translate }}{{ "crPcaglacode" | translate }}{{ "paymentMode" | translate }}{{ "date" | translate }}{{ "channel" | translate }}{{ "createdAt" | translate }}
{{ log.logId }} {{ log.porOrgacode }} {{ log.transactionID }}{{ log.drMbmbkmsnumber || '-' }}{{ log.crMbmbkmsnumber || '-' }}{{ log.drMbmbkmsnumber || "-" }}{{ log.crMbmbkmsnumber || "-" }}{{ log.drPcaGlacode || "-" }}{{ log.crPcaglacode || "-" }} {{ log.ppmPymdcode }}{{ log.sgtGntrdate | date: 'MMM dd, yyyy' }} + {{ log.sgtGntrdate | date: "MMM dd, yyyy" }} + {{ log.channelCode }}{{ log.createdAt | date: 'MMM dd, yyyy HH:mm' }} + {{ + log.createdAt | date: "MMM dd, yyyy HH:mm" + }} +
-
- - -
+ class="d-flex justify-content-between align-items-center mt-3" + > +
+ + +
-
- {{ 'page' | translate }} {{ currentPage }} {{ 'of' | translate }} {{ totalPages() }} ({{ totalCount }} {{ 'totalItems' | translate }}) -
+
+ {{ "page" | translate }} {{ currentPage }} + {{ "of" | translate }} {{ totalPages() }} ({{ + totalCount + }} + {{ "totalItems" | translate }}) +
-
- - -
-
+
+ + +
+
@@ -127,7 +206,10 @@
-
-

{{'noTransactionLogsFound' | translate}}

-
- \ No newline at end of file +
+

{{ "noTransactionLogsFound" | translate }}

+
+ diff --git a/src/app/user-management/setup-user/setup-user.component.html b/src/app/user-management/setup-user/setup-user.component.html index 7b8dc27..4948ea6 100644 --- a/src/app/user-management/setup-user/setup-user.component.html +++ b/src/app/user-management/setup-user/setup-user.component.html @@ -80,7 +80,7 @@ formControlName="userFullname" name="userFullname" maxlength="500" - placeholder="{{ 'userName' | translate }}" appNoWhitespaces + placeholder="{{ 'Full Name' | translate }}" rows="3" />
@@ -98,12 +98,6 @@ "> {{'nameMinLength' | translate }}
-
- {{'emptySpaceRestriction' | translate}} -
@@ -259,11 +253,10 @@ - - +
diff --git a/src/app/user-management/setup-user/setup-user.component.ts b/src/app/user-management/setup-user/setup-user.component.ts index 28bf7fd..ddbe116 100644 --- a/src/app/user-management/setup-user/setup-user.component.ts +++ b/src/app/user-management/setup-user/setup-user.component.ts @@ -14,7 +14,7 @@ import { HttpErrorResponse, HttpParams } from '@angular/common/http'; import { HttpURIService } from '../../app.http.uri.service'; import { I18NService } from '../../services/i18n.service'; import { SuccessMessages } from '../../utils/enums'; - +import { ToastrService, ActiveToast, ToastRef } from 'ngx-toastr'; @Component({ @@ -124,6 +124,13 @@ export class SetupUserComponent implements OnInit { toggleTableCard(): void { this.userSetupDataExpanded = !this.userSetupDataExpanded; } + +confirmDelete(userId: string) { + const confirmed = window.confirm('Are you sure you want to delete this user?'); + if (confirmed) { + this.onDelete(userId); + } +} ngOnInit(): void { @@ -138,8 +145,7 @@ ngOnInit(): void { ], userFullname: ['', [ Validators.required, - Validators.minLength(5), - Validators.pattern(/^\S+$/) + Validators.minLength(5) ] ], defaultPassword: ['', [ diff --git a/src/app/user-permissions/user-permissions.component.html b/src/app/user-permissions/user-permissions.component.html index 536512d..79f11b4 100644 --- a/src/app/user-permissions/user-permissions.component.html +++ b/src/app/user-permissions/user-permissions.component.html @@ -1,59 +1,60 @@
- -
+ +
-
- -
- - -
- - - -
+ + + + +
+ +
- -
+ +
-

- {{ 'permissions' | translate }} -

-
- - - - - - - - - - - - - - -
{{ 'Permissions' | translate }} - {{ 'allow' | translate }} -
+

{{ 'permissions' | translate }}

+ +
+ + + + + + + + + + + + +
{{ 'Permissions' | translate }}{{ 'allow' | translate }}
+
-
@@ -69,50 +70,30 @@ - - - - + + - - + {{ node.name | translate }} - - + - - - - + - - - + - diff --git a/src/app/user-permissions/user-permissions.component.scss b/src/app/user-permissions/user-permissions.component.scss index f1a34aa..5d3ba3a 100644 --- a/src/app/user-permissions/user-permissions.component.scss +++ b/src/app/user-permissions/user-permissions.component.scss @@ -1,18 +1,58 @@ -.permission-table td { - vertical-align: middle; +/* Card styling */ +.card { + border-radius: 0.5rem; + border: none; + box-shadow: 0 2px 6px rgba(0,0,0,0.08); } +/* Scrollable table wrapper */ +.scrollable-table { + max-height: 450px; /* adjustable */ + overflow-y: auto; + border-radius: 0.5rem; +} + +/* Table styles */ +.permission-table { + min-width: 100%; + border-radius: 0.5rem; +} + +.permission-table thead th { + background-color: #f3f4f6; + color: #1f2937; + font-weight: 600; + border-bottom: 2px solid #e5e7eb; +} + +.permission-table tbody tr:hover { + background-color: #eef2ff; +} + +.permission-table td:last-child { + text-align: center; +} + +/* Expand / collapse icon */ .expand-icon { cursor: pointer; - color: #1e40af; + color: #3b82f6; + transition: transform 0.2s; +} + +.expand-icon:hover { + transform: scale(1.2); } +/* Recursive permission cells */ .permission-cell { position: relative; padding-left: calc(var(--level) * 22px + 14px); font-weight: 500; - background-color: rgba(30, 64, 175, calc(var(--level) * 0.08)); - color: #1f2937; + background-color: rgba(59, 130, 246, calc(var(--level) * 0.08)); + color: #111827; + font-size: calc(14px - var(--level) * 0.5px); + transition: background-color 0.2s; } .permission-cell::before { @@ -25,19 +65,34 @@ background-color: #9ca3af; } -.permission-cell { - font-size: calc(14px - var(--level) * 0.5px); +/* Scrollable ng-select dropdown */ +::ng-deep ng-dropdown-panel { + max-height: 250px; + overflow-y: auto; + box-shadow: 0 4px 12px rgba(0,0,0,0.1); + border-radius: 0.5rem; } -.permission-table tbody tr:hover { - background-color: #e5e7eb; +/* Button styling */ +.btn-primary { + background-color: #3b82f6; + border-color: #3b82f6; + font-weight: 500; + transition: background-color 0.2s; } -.permission-table thead th { - background-color: #e5e7eb; - color: #111827; +.btn-primary:hover { + background-color: #2563eb; + border-color: #2563eb; } -.permission-table td:last-child { - text-align: center; +/* Responsive adjustments */ +@media (max-width: 768px) { + .col-md-6 { + width: 100%; + } + .permission-table td, + .permission-table th { + font-size: 13px; + } } diff --git a/src/assets/i18n/English.json b/src/assets/i18n/English.json index c30915b..7621d51 100644 --- a/src/assets/i18n/English.json +++ b/src/assets/i18n/English.json @@ -197,6 +197,8 @@ "transactionID": "Transaction ID", "drAccount": "DR Account", "crAccount": "CR Account", + "crPcaglacode": "CR GL Account", + "drPcaGlacode": "DR GL Account", "paymentMode": "Payment Mode", "channel": "Channel", "createdAt": "Created At",