55 < div class ="left triangle "> </ div >
66 < div class ="right triangle "> </ div >
77 </ div >
8- < mat-card *ngIf ="!isLoading ">
8+ < mat-card *ngIf ="!isLoading " class =" transfer-card " >
99 < mat-card-content >
10- < div class ="layout-row-wrap responsive-column ">
11- < h3 class ="mat-h3 flex-fill "> {{ 'labels.heading.Transferring From Details' | translate }}</ h3 >
12-
13- < mat-divider [inset] ="true "> </ mat-divider >
14-
15- < div class ="flex-fill ">
16- < span class ="flex-40 "> {{ 'labels.inputs.Applicant' | translate }}</ span >
17- < span class ="flex-60 "> {{ accountTransferTemplateData.fromClient.displayName }}</ span >
18- </ div >
19-
20- < div class ="flex-fill ">
21- < span class ="flex-40 "> {{ 'labels.inputs.Office' | translate }}</ span >
22- < span class ="flex-60 "> {{ accountTransferTemplateData.fromOffice.name }}</ span >
23- </ div >
24-
25- < div class ="flex-fill ">
26- < span class ="flex-40 "> {{ 'labels.inputs.From Account' | translate }}</ span >
27- < span class ="flex-60 "
28- > {{ accountTransferTemplateData.fromAccount.productName }} - #{{
29- accountTransferTemplateData.fromAccount.accountNo
30- }}</ span
31- >
32- </ div >
33-
34- < div class ="flex-fill ">
35- < span class ="flex-40 "> {{ 'labels.inputs.From Account Type' | translate }}</ span >
36- < span class ="flex-60 "> {{ accountTransferTemplateData.fromAccountType.value }}</ span >
37- </ div >
38-
39- < div class ="flex-fill ">
40- < span class ="flex-40 "> {{ 'labels.inputs.Currency' | translate }}</ span >
41- < span class ="flex-60 "> {{ accountTransferTemplateData.currency.name }}</ span >
10+ <!-- Source Account Details Section -->
11+ < div class ="section-container ">
12+ < h3 class ="section-title transfer-heading "> {{ 'labels.heading.Transferring From Details' | translate }}</ h3 >
13+
14+ < mat-divider > </ mat-divider >
15+
16+ < div class ="info-grid ">
17+ < div class ="info-row ">
18+ < div class ="info-label "> {{ 'labels.inputs.Applicant' | translate }}</ div >
19+ < div class ="info-value "> {{ accountTransferTemplateData.fromClient.displayName }}</ div >
20+ </ div >
21+
22+ < div class ="info-row ">
23+ < div class ="info-label "> {{ 'labels.inputs.Office' | translate }}</ div >
24+ < div class ="info-value "> {{ accountTransferTemplateData.fromOffice.name }}</ div >
25+ </ div >
26+
27+ < div class ="info-row ">
28+ < div class ="info-label "> {{ 'labels.inputs.From Account' | translate }}</ div >
29+ < div class ="info-value ">
30+ {{ accountTransferTemplateData.fromAccount.productName }} - #{{
31+ accountTransferTemplateData.fromAccount.accountNo
32+ }}
33+ </ div >
34+ </ div >
35+
36+ < div class ="info-row ">
37+ < div class ="info-label "> {{ 'labels.inputs.From Account Type' | translate }}</ div >
38+ < div class ="info-value "> {{ accountTransferTemplateData.fromAccountType.value }}</ div >
39+ </ div >
40+
41+ < div class ="info-row ">
42+ < div class ="info-label "> {{ 'labels.inputs.Currency' | translate }}</ div >
43+ < div class ="info-value "> {{ accountTransferTemplateData.currency.name }}</ div >
44+ </ div >
4245 </ div >
4346 </ div >
4447
45- < div *ngIf ="interbank ">
46- < div class ="flex-fill ">
47- < h3 class ="mat-h3 flex-40 align-start-center ">
48- {{ 'labels.heading.Transferred To' | translate }}
49- </ h3 >
50- < mat-form-field class ="flex-40 ">
48+ <!-- Interbank Section -->
49+ < div *ngIf ="interbank " class ="section-container ">
50+ < div class ="interbank-section ">
51+ < h3 class ="section-title transfer-heading "> {{ 'labels.heading.Transferred To' | translate }}</ h3 >
52+ < mat-form-field class ="full-width ">
5153 < mat-label > {{ 'labels.inputs.Phone Number' | translate }}</ mat-label >
5254 < input
5355 matInput
@@ -57,13 +59,15 @@ <h3 class="mat-h3 flex-40 align-start-center">
5759 [(ngModel)] ="phoneAccount "
5860 maxlength ="10 "
5961 required
60- /> <!-- formControlName="phoneNumber" -->
62+ placeholder ="Enter phone number "
63+ title ="Phone number "
64+ />
6165 < mat-hint align ="end "> {{ phoneAccount.length || 0 }}/10</ mat-hint >
6266 </ mat-form-field >
6367 </ div >
6468
65- < mat-card-actions *ngIf ="!interbankTransferForm " class ="layout-row align-center gap-5px responsive-column ">
66- < button type ="button " mat-raised-button [routerLink] ="['../..'] ">
69+ < mat-card-actions *ngIf ="!interbankTransferForm " class ="action-buttons ">
70+ < button type ="button " mat-raised-button [routerLink] ="['../..'] " class =" cancel-button " >
6771 {{ 'labels.buttons.Cancel' | translate }}
6872 </ button >
6973 < button
@@ -73,17 +77,21 @@ <h3 class="mat-h3 flex-40 align-start-center">
7377 (click) ="searchAccountByNumber() "
7478 *mifosxHasPermission ="'CREATE_ACCOUNTTRANSFER' "
7579 id ="search-button "
80+ class ="primary-button "
7681 >
7782 {{ 'labels.buttons.Search' | translate }}
7883 </ button >
7984 </ mat-card-actions >
8085 </ div >
8186
82- < mat-divider [inset] ="true "> </ mat-divider >
87+ < mat-divider *ngIf ="!interbank "> </ mat-divider >
88+
89+ <!-- Transfer Form Section -->
90+ < form *ngIf ="!interbank " [formGroup] ="makeAccountTransferForm " class ="transfer-form ">
91+ < h3 class ="section-title transfer-heading "> {{ 'labels.heading.Transfer Details' | translate }}</ h3 >
8392
84- < form *ngIf ="!interbank " [formGroup] ="makeAccountTransferForm ">
85- < div class ="layout-row-wrap gap-2px responsive-column ">
86- < mat-form-field class ="flex-98 " (click) ="transferDatePicker.open() ">
93+ < div class ="form-grid ">
94+ < mat-form-field class ="form-field " (click) ="transferDatePicker.open() ">
8795 < mat-label > {{ 'labels.inputs.Transaction Date' | translate }}</ mat-label >
8896 < input
8997 matInput
@@ -92,6 +100,8 @@ <h3 class="mat-h3 flex-40 align-start-center">
92100 [matDatepicker] ="transferDatePicker "
93101 required
94102 formControlName ="transferDate "
103+ placeholder ="Select date "
104+ title ="Transaction Date "
95105 />
96106 < mat-datepicker-toggle matSuffix [for] ="transferDatePicker "> </ mat-datepicker-toggle >
97107 < mat-datepicker #transferDatePicker > </ mat-datepicker >
@@ -101,7 +111,7 @@ <h3 class="mat-h3 flex-40 align-start-center">
101111 </ mat-error >
102112 </ mat-form-field >
103113
104- < mat-form-field class ="flex-98 ">
114+ < mat-form-field class ="form-field ">
105115 < mat-label > {{ 'labels.inputs.Office' | translate }}</ mat-label >
106116 < mat-select required formControlName ="toOfficeId " (selectionChange) ="changeEvent() ">
107117 < mat-option *ngFor ="let toOfficeType of toOfficeTypeData " [value] ="toOfficeType.id ">
@@ -114,9 +124,15 @@ <h3 class="mat-h3 flex-40 align-start-center">
114124 </ mat-error >
115125 </ mat-form-field >
116126
117- < mat-form-field class ="flex-98 ">
127+ < mat-form-field class ="form-field ">
118128 < mat-label > {{ 'labels.inputs.Client' | translate }}</ mat-label >
119- < input matInput formControlName ="toClientId " [matAutocomplete] ="clientsAutocomplete " />
129+ < input
130+ matInput
131+ formControlName ="toClientId "
132+ [matAutocomplete] ="clientsAutocomplete "
133+ placeholder ="Select or type client name "
134+ title ="Client name "
135+ />
120136 < mat-error *ngIf ="makeAccountTransferForm.controls.toClientId.hasError('required') ">
121137 {{ 'labels.inputs.Client' | translate }} {{ 'labels.commons.is' | translate }}
122138 < strong > {{ 'labels.commons.required' | translate }}</ strong >
@@ -129,7 +145,7 @@ <h3 class="mat-h3 flex-40 align-start-center">
129145 </ mat-option >
130146 </ mat-autocomplete >
131147
132- < mat-form-field class ="flex-98 ">
148+ < mat-form-field class ="form-field ">
133149 < mat-label > {{ 'labels.inputs.Account Type' | translate }}</ mat-label >
134150 < mat-select required formControlName ="toAccountType " (selectionChange) ="changeEvent() ">
135151 < mat-option *ngFor ="let toAccountType of toAccountTypeData " [value] ="toAccountType.id ">
@@ -142,7 +158,7 @@ <h3 class="mat-h3 flex-40 align-start-center">
142158 </ mat-error >
143159 </ mat-form-field >
144160
145- < mat-form-field class ="flex-98 ">
161+ < mat-form-field class ="form-field ">
146162 < mat-label > {{ 'labels.inputs.Account' | translate }}</ mat-label >
147163 < mat-select required formControlName ="toAccountId " (selectionChange) ="changeEvent() ">
148164 < mat-option *ngFor ="let toAccount of toAccountData " [value] ="toAccount.id ">
@@ -155,9 +171,16 @@ <h3 class="mat-h3 flex-40 align-start-center">
155171 </ mat-error >
156172 </ mat-form-field >
157173
158- < mat-form-field class ="flex-98 ">
174+ < mat-form-field class ="form-field ">
159175 < mat-label > {{ 'labels.inputs.Amount' | translate }}</ mat-label >
160- < input type ="number " matInput required formControlName ="transferAmount " />
176+ < input
177+ type ="number "
178+ matInput
179+ required
180+ formControlName ="transferAmount "
181+ placeholder ="Enter amount "
182+ title ="Transfer amount "
183+ />
161184 < mat-error *ngIf ="makeAccountTransferForm.controls.transferAmount.hasError('required') ">
162185 {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
163186 < strong > {{ 'labels.commons.required' | translate }}</ strong >
@@ -168,13 +191,15 @@ <h3 class="mat-h3 flex-40 align-start-center">
168191 </ mat-error >
169192 </ mat-form-field >
170193
171- < mat-form-field class ="flex-98 ">
194+ < mat-form-field class ="form-field description-field ">
172195 < mat-label > {{ 'labels.inputs.Description' | translate }}</ mat-label >
173196 < textarea
174197 matInput
175198 formControlName ="transferDescription "
176199 cdkTextareaAutosize
177200 cdkAutosizeMinRows ="2 "
201+ placeholder ="Enter transfer description "
202+ title ="Transfer description "
178203 > </ textarea >
179204 < mat-error *ngIf ="makeAccountTransferForm.controls.transferDescription.hasError('required') ">
180205 {{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
@@ -190,8 +215,8 @@ <h3 class="mat-h3 flex-40 align-start-center">
190215 > </ mifosx-make-account-interbank-transfers >
191216 </ mat-card-content >
192217
193- < mat-card-actions *ngIf ="!interbankTransferForm " class ="layout-row align-center gap-5px responsive-column ">
194- < button type ="button " mat-raised-button [routerLink] ="['../..'] ">
218+ < mat-card-actions *ngIf ="!interbankTransferForm " class ="action-buttons ">
219+ < button type ="button " mat-raised-button [routerLink] ="['../..'] " class =" cancel-button " >
195220 {{ 'labels.buttons.Cancel' | translate }}
196221 </ button >
197222 < button
@@ -200,6 +225,7 @@ <h3 class="mat-h3 flex-40 align-start-center">
200225 [disabled] ="!makeAccountTransferForm.valid "
201226 *mifosxHasPermission ="'CREATE_ACCOUNTTRANSFER' "
202227 (click) ="submit() "
228+ class ="primary-button "
203229 >
204230 {{ 'labels.buttons.Submit' | translate }}
205231 </ button >
0 commit comments