From 709b171917b56b593654bf8e7fd30b3ce018a7f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Alberto=20Hern=C3=A1ndez?=
 <44206706+josehernandezfintecheandomx@users.noreply.github.com>
Date: Fri, 30 Jun 2023 21:04:09 -0600
Subject: [PATCH] Display Submitted On Date in Loan Charge views (#1776)

Co-authored-by: Jose Alberto Hernandez <alberto@blue-daemon.local>
---
 .../loans-view/charges-tab/charges-tab.component.html     | 7 ++++++-
 .../loans/loans-view/charges-tab/charges-tab.component.ts | 2 +-
 .../loans-view/view-charge/view-charge.component.html     | 8 ++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app/loans/loans-view/charges-tab/charges-tab.component.html b/src/app/loans/loans-view/charges-tab/charges-tab.component.html
index 52c464b2b..184c62bb8 100644
--- a/src/app/loans/loans-view/charges-tab/charges-tab.component.html
+++ b/src/app/loans/loans-view/charges-tab/charges-tab.component.html
@@ -20,6 +20,11 @@
       <td mat-cell *matCellDef="let charge"> {{ charge.chargeTimeType.value }} </td>
     </ng-container>
 
+    <ng-container matColumnDef="submittedDate">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header> Submitted On </th>
+      <td mat-cell *matCellDef="let charge"> {{ charge.submittedOnDate | dateFormat }} </td>
+    </ng-container>
+
     <ng-container matColumnDef="dueDate">
       <th mat-header-cell *matHeaderCellDef mat-sort-header> Due as of </th>
       <td mat-cell *matCellDef="let charge"> {{ charge.dueDate | dateFormat }} </td>
@@ -55,7 +60,7 @@
     </ng-container>
 
     <ng-container matColumnDef="actions">
-      <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Actions </th>
+      <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Actions </th>
       <td mat-cell class="center" *matCellDef="let charge">
         <span *ngIf="status === 'Submitted and pending approval'">
           <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
diff --git a/src/app/loans/loans-view/charges-tab/charges-tab.component.ts b/src/app/loans/loans-view/charges-tab/charges-tab.component.ts
index cf1ed53aa..4b68aa06d 100644
--- a/src/app/loans/loans-view/charges-tab/charges-tab.component.ts
+++ b/src/app/loans/loans-view/charges-tab/charges-tab.component.ts
@@ -35,7 +35,7 @@ export class ChargesTabComponent implements OnInit {
   /** Status */
   status: any;
   /** Columns to be displayed in charges table. */
-  displayedColumns: string[] = ['name', 'feepenalty', 'paymentdueat', 'dueDate', 'calculationtype', 'due', 'paid', 'waived', 'outstanding', 'actions'];
+  displayedColumns: string[] = ['name', 'feepenalty', 'paymentdueat', 'submittedDate', 'dueDate', 'calculationtype', 'due', 'paid', 'waived', 'outstanding', 'actions'];
   /** Data source for charges table. */
   dataSource: MatTableDataSource<any>;
 
diff --git a/src/app/loans/loans-view/view-charge/view-charge.component.html b/src/app/loans/loans-view/view-charge/view-charge.component.html
index fcee0109c..159c62206 100644
--- a/src/app/loans/loans-view/view-charge/view-charge.component.html
+++ b/src/app/loans/loans-view/view-charge/view-charge.component.html
@@ -128,6 +128,14 @@
           {{ chargeData.amountOutstanding | formatNumber }}
         </div>
 
+        <div fxFlex="50%" class="mat-body-strong">
+          Submitted On Date
+        </div>
+
+        <div fxFlex="50%">
+          {{ chargeData.submittedOnDate | dateFormat }}
+        </div>
+
       </div>
 
       <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="2%" fxLayout.lt-md="column">