CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

WEB-529 Fix layout for Transfer details page (#2940)

Browse Source
This commit is contained in:
Soni Jay
2025-12-28 12:19:37 -06:00
committed by GitHub
parent 20198d4839
commit 7b2fe03e90
4 changed files with 179 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/account-transfers/view-account-transfer/view-account-transfer.component-theme.scss
+40
View File
@@ -0,0 +1,40 @@
@use '@angular/material' as mat;
@use 'sass:map';
@mixin view-account-transfer-component-theme($theme) {
$is-dark: map.get($theme, is-dark);
$foreground: map.get($theme, foreground);
$primary: map.get($theme, primary);
mifosx-view-account-transfer {
.section-title {
color: mat.m2-get-color-from-palette($foreground, text);
}
.info-label {
color: mat.m2-get-color-from-palette($foreground, secondary-text);
}
.info-value {
color: mat.m2-get-color-from-palette($foreground, text);
a {
color: mat.m2-get-color-from-palette($primary, 500);
&:hover {
text-decoration: underline;
}
}
}
.status-indicator {
&.active {
background-color: #4caf50;
}
&.undo {
background-color: #f44336;
}
}
}
}
src/app/account-transfers/view-account-transfer/view-account-transfer.component.html
+78 -68
View File
@@ -11,88 +11,98 @@
<mat-card>
<mat-card-content>
<div class="layout-row-wrap responsive-column">
<div class="flex-100" [ngClass]="transactionColor()"></div>
<div class="transfer-container">
<div class="status-indicator" [ngClass]="transactionColor()"></div>
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transaction Details' | translate }}</h3>
<!-- Transaction Details Section -->
<section class="transfer-section">
<h3 class="section-title">{{ 'labels.heading.Transaction Details' | translate }}</h3>
<mat-divider></mat-divider>
<mat-divider [inset]="true"></mat-divider>
<div class="info-grid">
<div class="info-row">
<span class="info-label">{{ 'labels.inputs.Transaction Amount' | translate }}:</span>
<span class="info-value">
{{ viewAccountTransferData.currency?.displaySymbol }}
{{ viewAccountTransferData.transferAmount | formatNumber }} ({{
viewAccountTransferData.currency?.code
}})
</span>
</div>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Transaction Amount' | translate }}:</span>
<span class="flex-60"
>{{ viewAccountTransferData.currency.displaySymbol }}
{{ viewAccountTransferData.transferAmount | formatNumber }} ({{
viewAccountTransferData.currency.code
}})</span
>
</div>
<div class="info-row">
<span class="info-label">{{ 'labels.inputs.Transaction Date' | translate }}:</span>
<span class="info-value">{{ viewAccountTransferData.transferDate | dateFormat }}</span>
</div>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Transaction Date' | translate }}:</span>
<span class="flex-60">{{ viewAccountTransferData.transferDate | dateFormat }}</span>
</div>
<div class="info-row">
<span class="info-label">{{ 'labels.inputs.Destination' | translate }}:</span>
<span class="info-value">{{ viewAccountTransferData.transferDescription }}</span>
</div>
</div>
</section>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Destination' | translate }}:</span>
<span class="flex-60">{{ viewAccountTransferData.transferDescription }}</span>
</div>
<section class="transfer-section">
<h3 class="section-title">{{ 'labels.heading.Transferred From' | translate }}</h3>
<mat-divider></mat-divider>
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transferred From' | translate }}</h3>
<div class="info-grid">
<div class="info-row">
<span class="info-label">{{ 'labels.inputs.Office' | translate }}:</span>
<span class="info-value">{{ viewAccountTransferData.fromOffice?.name }}</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div class="info-row">
<span class="info-label">{{ 'labels.inputs.Client' | translate }}:</span>
<span class="info-value">{{ viewAccountTransferData.fromClient?.displayName }}</span>
</div>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Office' | translate }}:</span>
<span class="flex-60">{{ viewAccountTransferData.fromOffice.name }}</span>
</div>
<div class="info-row">
<span class="info-label">{{ 'labels.inputs.Account Type' | translate }}:</span>
<span class="info-value">{{ viewAccountTransferData.fromAccountType?.value }}</span>
</div>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Client' | translate }}:</span>
<span class="flex-60">{{ viewAccountTransferData.fromClient.displayName }}</span>
</div>
<div class="info-row">
<span class="info-label">{{ 'labels.inputs.Account No' | translate }}:</span>
<span class="info-value">{{ viewAccountTransferData.fromAccount?.accountNo }}</span>
</div>
</div>
</section>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Account Type' | translate }}:</span>
<span class="flex-60">{{ viewAccountTransferData.fromAccountType.value }}</span>
</div>
<section class="transfer-section">
<h3 class="section-title">{{ 'labels.heading.Transferred To' | translate }}</h3>
<mat-divider></mat-divider>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Account No' | translate }}:</span>
<span class="flex-60">{{ viewAccountTransferData.fromAccount.accountNo }}</span>
</div>
<div class="info-grid">
<div class="info-row">
<span class="info-label">{{ 'labels.inputs.Office' | translate }}:</span>
<span class="info-value">{{ viewAccountTransferData.toOffice?.name }}</span>
</div>
<h3 class="mat-h3 flex-fill">{{ 'labels.heading.Transferred To' | translate }}</h3>
<div class="info-row">
<span class="info-label">{{ 'labels.inputs.Client' | translate }}:</span>
<span class="info-value">
<a [href]="transferToClient(viewAccountTransferData.toClient)">
{{ viewAccountTransferData.toClient?.displayName }}
</a>
</span>
</div>
<mat-divider [inset]="true"></mat-divider>
<div class="info-row">
<span class="info-label">{{ 'labels.inputs.Account Type' | translate }}:</span>
<span class="info-value">{{ viewAccountTransferData.toAccountType?.value }}</span>
</div>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Office' | translate }}:</span>
<span class="flex-60">{{ viewAccountTransferData.toOffice.name }}</span>
</div>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Client' | translate }}:</span>
<span class="flex-60"
><a [href]="transferToClient(viewAccountTransferData.toClient)">
{{ viewAccountTransferData.toClient.displayName }}</a
>
</span>
</div>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Account Type' | translate }}:</span>
<span class="flex-60">{{ viewAccountTransferData.toAccountType.value }}</span>
</div>
<div class="flex-fill">
<span class="flex-40">{{ 'labels.inputs.Account No' | translate }}:</span>
<span class="flex-60"
><a [href]="transferToAccount(viewAccountTransferData.toClient, viewAccountTransferData.toAccount)">
{{ viewAccountTransferData.toAccount.accountNo }}</a
>
</span>
</div>
<div class="info-row">
<span class="info-label">{{ 'labels.inputs.Account No' | translate }}:</span>
<span class="info-value">
<a [href]="transferToAccount(viewAccountTransferData.toClient, viewAccountTransferData.toAccount)">
{{ viewAccountTransferData.toAccount?.accountNo }}
</a>
</span>
</div>
</div>
</section>
</div>
</mat-card-content>
src/app/account-transfers/view-account-transfer/view-account-transfer.component.scss
+58 -5
View File
@@ -1,12 +1,65 @@
h3 {
.transfer-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
padding-left: 20px;
}
.status-indicator {
position: absolute;
top: 0;
left: -16px;
width: 4px;
height: 100%;
border-radius: 2px;
}
.transfer-section {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.section-title {
margin: 0;
font-size: 1.125rem;
font-weight: 500;
}
span {
margin: 0.5em 0;
mat-divider {
margin-bottom: 0.5rem;
}
mat-divider {
margin: 0 0 0.5em;
.info-grid {
display: grid;
gap: 0.75rem;
}
.info-row {
display: grid;
grid-template-columns: minmax(150px, 200px) auto;
gap: 1rem;
align-items: start;
@media (width <= 768px) {
grid-template-columns: 100%;
gap: 0.25rem;
}
}
.info-label {
font-weight: 500;
@media (width <= 768px) {
font-size: 0.875rem;
}
}
.info-value {
word-break: break-word;
a {
text-decoration: none;
}
}
src/theme/mifosx-theme.scss
+3
View File
@@ -8,6 +8,7 @@
@use '../app/centers/centers-view/centers-view.component-theme.scss' as *;
@use '../app/home/dashboard/dashboard.component-theme.scss' as *;
@use '../app/shares/shares-account-view/shares-account-view.component-theme.scss' as *;
@use '../app/account-transfers/view-account-transfer/view-account-transfer.component-theme.scss' as *;
@use 'content' as *;
@use 'dark_content' as *;
@@ -61,6 +62,7 @@ $mifosx-app-theme: mat.m2-define-light-theme(
@include dashboard-component-theme($mifosx-app-theme);
@include shares-account-view-component-theme($mifosx-app-theme);
@include account-view-component-theme($mifosx-app-theme);
@include view-account-transfer-component-theme($mifosx-app-theme);
/* ################################## Dark theme ################################### */
@@ -83,4 +85,5 @@ $mifosx-app-dark-theme: mat.m2-define-dark-theme(
@include dashboard-component-theme($mifosx-app-dark-theme);
@include shares-account-view-component-theme($mifosx-app-dark-theme);
@include account-view-component-dark-theme($mifosx-app-dark-theme);
@include view-account-transfer-component-theme($mifosx-app-dark-theme);
}