From f01a97005af261706b30ee0da09797399afd62d5 Mon Sep 17 00:00:00 2001
From: gandhimathi <bitbucket@venbainfotech.com>
Date: Mon, 11 Feb 2019 15:08:53 +0530
Subject: [PATCH] AI Total fileds changes

---
 .../business-expense-details.component.html   | 13 +++++++++-
 .../business-expense-details.component.scss   |  4 +++
 .../business-expense-details.component.ts     |  6 +++++
 .../house-hold-details.component.html         | 14 +++++++++-
 .../house-hold-details.component.scss         |  4 +++
 .../house-hold-details.component.ts           |  5 ++++
 ...her-business-income-details.component.html | 14 +++++++++-
 ...her-business-income-details.component.scss |  4 +++
 ...other-business-income-details.component.ts |  5 ++++
 .../purchase-details.component.html           | 18 ++++++++++++-
 .../purchase-details.component.scss           |  4 +++
 .../purchase-details.component.ts             |  4 +++
 .../sales-details.component.html              | 26 +++++++++++++++++--
 .../sales-details.component.scss              |  7 ++++-
 .../sales-details/sales-details.component.ts  |  9 ++++++-
 15 files changed, 129 insertions(+), 8 deletions(-)

diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.html
index 4aa869563..4aa9df820 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.html
@@ -11,27 +11,35 @@
                         </button> 
         </div>
     </div>
-    <div class="example-container mat-elevation-z8">
+    <div class="example-container mat-elevation-z8" *ngIf="businessItemSource.data.length>0">
                 <table mat-table [dataSource]="businessItemSource">
                 
                         <ng-container matColumnDef="buiness_expense" sticky>
                         <th mat-header-cell *matHeaderCellDef> Buiness Expense </th>
                         <td mat-cell *matCellDef="let element"> {{element.expense_item}} </td>
+                        <td mat-footer-cell *matFooterCellDef> Total of Expense</td>
+
                         </ng-container>
                 
                         <ng-container matColumnDef="expense_value">
                         <th mat-header-cell *matHeaderCellDef> Amount (Rs) </th>
                         <td mat-cell *matCellDef="let element"> {{element.expense_value}} </td>
+                        <td mat-footer-cell *matFooterCellDef> </td>
+
                         </ng-container>
                         <ng-container matColumnDef="frequency">
                         <th mat-header-cell *matHeaderCellDef> Frequency </th>
                         <td mat-cell *matCellDef="let element">{{element.frequency_name}}
                         </td>
+                        <td mat-footer-cell *matFooterCellDef> </td>
+
                         </ng-container>
                     <ng-container matColumnDef="annual_expenses">
                             <th mat-header-cell *matHeaderCellDef> Annual Expenses </th>
                             <td mat-cell *matCellDef="let element">{{element.annual_expenses_value}}
                             </td>
+                            <td mat-footer-cell *matFooterCellDef> {{getTotalCost(businessItemSource.data)}} </td>
+
                     </ng-container>
                 <ng-container matColumnDef="action" stickyEnd>
                         <th mat-header-cell *matHeaderCellDef></th>
@@ -43,10 +51,13 @@
                                                                 <mat-icon>delete</mat-icon>
                                                                 </button>
                       </td>
+                      <td mat-footer-cell *matFooterCellDef> </td>
+
               </ng-container>
                 
                         <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
                         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                        <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky:true"></tr>
                 </table>
                 </div>
     </mat-card-content>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.scss
index a464130a1..9f9eb0eeb 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.scss
@@ -27,4 +27,8 @@
   
   .mat-table-sticky:last-child {
     border-left: 1px solid #e0e0e0;
+  }
+  .mat-footer-cell {
+    font-weight: bold;
+    font-size: 1.2rem !important;
   }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.ts
index 6b54e794f..63ac287a3 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/business-expense-details/business-expense-details.component.ts
@@ -78,7 +78,13 @@ removeExpenseItem(value: any) : void{
 }, error => {
     this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
 });
+
 }
+// sum all annual expense values
+getTotalCost(getItems:any) {
+  return getItems.map(t => t.annual_expenses_value).reduce((acc, value) => acc + Number(value), 0);
+}
+
 
 // detect chnges from parent 
 ngOnChanges(changes: SimpleChanges) {
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.html
index 031f03552..e1986a043 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.html
@@ -11,27 +11,35 @@
                         </button> 
         </div>
     </div>
-    <div class="example-container mat-elevation-z8">
+    <div class="example-container mat-elevation-z8" *ngIf="houseItemSource.data.length>0">
                 <table mat-table [dataSource]="houseItemSource">
                 
                         <ng-container matColumnDef="buiness_particulars" sticky>
                         <th mat-header-cell *matHeaderCellDef> Expense Particulars </th>
                         <td mat-cell *matCellDef="let element"> {{element.expense_item}} </td>
+                        <td mat-footer-cell *matFooterCellDef> Total of Expenses</td>
+
                         </ng-container>
                 
                         <ng-container matColumnDef="expense_value">
                         <th mat-header-cell *matHeaderCellDef> Amount (Rs) </th>
                         <td mat-cell *matCellDef="let element"> {{element.expense_value}} </td>
+                        <td mat-footer-cell *matFooterCellDef> </td>
+
                         </ng-container>
                         <ng-container matColumnDef="frequency">
                         <th mat-header-cell *matHeaderCellDef> Frequency </th>
                         <td mat-cell *matCellDef="let element">{{element.frequency_name}}
                         </td>
+                        <td mat-footer-cell *matFooterCellDef> </td>
+
                         </ng-container>
                     <ng-container matColumnDef="annual_expenses">
                             <th mat-header-cell *matHeaderCellDef> Annual Expenses </th>
                             <td mat-cell *matCellDef="let element">{{element.annual_expense_value}}
                             </td>
+                            <td mat-footer-cell *matFooterCellDef> {{getTotalCost(houseItemSource.data)}} </td>
+
                     </ng-container>
                 <ng-container matColumnDef="action" stickyEnd>
                         <th mat-header-cell *matHeaderCellDef></th>
@@ -43,10 +51,14 @@
                                                                 <mat-icon>delete</mat-icon>
                                                                 </button>
                       </td>
+                      <td mat-footer-cell *matFooterCellDef> </td>
+
               </ng-container>
                 
                         <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
                         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                        <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky:true"></tr>
+
                 </table>
                 </div>
     </mat-card-content>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.scss
index a464130a1..9f9eb0eeb 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.scss
@@ -27,4 +27,8 @@
   
   .mat-table-sticky:last-child {
     border-left: 1px solid #e0e0e0;
+  }
+  .mat-footer-cell {
+    font-weight: bold;
+    font-size: 1.2rem !important;
   }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.ts
index 1a168c080..b1e87eaaa 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/house-hold-details/house-hold-details.component.ts
@@ -81,6 +81,11 @@ removeHouseItem(value: any) : void{
 });
 }
 
+// sum all house hold values
+getTotalCost(getItems:any) {
+  return getItems.map(t => t.annual_expense_value).reduce((acc, value) => acc + Number(value), 0);
+}
+
 
 // detect chnges from parent 
 ngOnChanges(changes: SimpleChanges) {
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.html
index 49e26601d..245e549e7 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.html
@@ -11,27 +11,35 @@
                         </button> 
         </div>
     </div>
-    <div class="example-container mat-elevation-z8">
+    <div class="example-container mat-elevation-z8" *ngIf="businessIncomeItemSource.data.length>0">
                 <table mat-table [dataSource]="businessIncomeItemSource">
                 
                         <ng-container matColumnDef="buiness_income" sticky>
                         <th mat-header-cell *matHeaderCellDef> Buiness Income </th>
                         <td mat-cell *matCellDef="let element"> {{element.business_income_item}} </td>
+                        <td mat-footer-cell *matFooterCellDef> Total of Income</td>
+
                         </ng-container>
                 
                         <ng-container matColumnDef="income_value">
                         <th mat-header-cell *matHeaderCellDef> Amount (Rs) </th>
                         <td mat-cell *matCellDef="let element"> {{element.income_value}} </td>
+                        <td mat-footer-cell *matFooterCellDef> </td>
+
                         </ng-container>
                         <ng-container matColumnDef="frequency">
                         <th mat-header-cell *matHeaderCellDef> Frequency </th>
                         <td mat-cell *matCellDef="let element">{{element.frequency_name}}
                         </td>
+                        <td mat-footer-cell *matFooterCellDef> </td>
+
                         </ng-container>
                     <ng-container matColumnDef="annual_income">
                             <th mat-header-cell *matHeaderCellDef> Annual Income </th>
                             <td mat-cell *matCellDef="let element">{{element.annual_income_value}}
                             </td>
+                            <td mat-footer-cell *matFooterCellDef> {{getTotalCost(businessIncomeItemSource.data)}} </td>
+
                     </ng-container>
                 <ng-container matColumnDef="action" stickyEnd>
                         <th mat-header-cell *matHeaderCellDef></th>
@@ -43,10 +51,14 @@
                                                                 <mat-icon>delete</mat-icon>
                                                                 </button>
                       </td>
+                      <td mat-footer-cell *matFooterCellDef> </td>
+
               </ng-container>
                 
                         <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
                         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                        <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky:true"></tr>
+
                 </table>
                 </div>
     </mat-card-content>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.scss
index a464130a1..9f9eb0eeb 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.scss
@@ -27,4 +27,8 @@
   
   .mat-table-sticky:last-child {
     border-left: 1px solid #e0e0e0;
+  }
+  .mat-footer-cell {
+    font-weight: bold;
+    font-size: 1.2rem !important;
   }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.ts
index f7dd09c2a..3c19d5936 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/other-business-income-details/other-business-income-details.component.ts
@@ -79,6 +79,11 @@ removeIncomeItem(value: any) : void{
 });
 }
 
+// sum all annual income values
+getTotalCost(getItems:any) {
+  return getItems.map(t => t.annual_income_value).reduce((acc, value) => acc + Number(value), 0);
+}
+
 // detect chnges from parent 
 ngOnChanges(changes: SimpleChanges) {
   this.businessIncomeItemSource.data = changes.parentData.currentValue;  
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.html
index 766e42c2d..ec327a7ba 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.html
@@ -11,38 +11,50 @@
                     </button> 
     </div>
 </div>
-<div class="example-container mat-elevation-z8">
+<div class="example-container mat-elevation-z8" *ngIf="purchaseItemSource.data.length>0;">
             <table mat-table [dataSource]="purchaseItemSource">
             
                     <ng-container matColumnDef="raw_material" sticky>
                     <th mat-header-cell *matHeaderCellDef> Raw Material/Trading Item </th>
                     <td mat-cell *matCellDef="let element"> {{element.purchase_item}} </td>
+                    <td mat-footer-cell *matFooterCellDef> Total of Purchase</td>
+
                     </ng-container>
             
                     <ng-container matColumnDef="purchase_quantity">
                     <th mat-header-cell *matHeaderCellDef> Purchase Quantity </th>
                     <td mat-cell *matCellDef="let element"> {{element.purchase_qty}} </td>
+                    <td mat-footer-cell *matFooterCellDef> </td>
+
                     </ng-container>
             
                     <ng-container matColumnDef="UOM">
                     <th mat-header-cell *matHeaderCellDef> UOM </th>
                     <td mat-cell *matCellDef="let element"> {{element.uom_name}} </td>
+                    <td mat-footer-cell *matFooterCellDef> </td>
+
                     </ng-container>
             
                     <ng-container matColumnDef="rate_per_unit_purchase">
                     <th mat-header-cell *matHeaderCellDef> Rate/Unit of Purchase </th>
                     <td mat-cell *matCellDef="let element"> {{element.rate_per_unit}} </td>
+                    <td mat-footer-cell *matFooterCellDef> </td>
+
                     </ng-container>
             
                     <ng-container matColumnDef="frequency">
                     <th mat-header-cell *matHeaderCellDef> Frequency </th>
                     <td mat-cell *matCellDef="let element">{{element.frequency_name}}
                     </td>
+                    <td mat-footer-cell *matFooterCellDef> </td>
+
                     </ng-container>
     <ng-container matColumnDef="annual_purchase">
             <th mat-header-cell *matHeaderCellDef> Annual Purchase </th>
             <td mat-cell *matCellDef="let element">{{element.annual_purchase_value}}
             </td>
+            <td mat-footer-cell *matFooterCellDef> {{getTotalCost(purchaseItemSource.data)}} </td>
+
     </ng-container>
     <ng-container matColumnDef="action" stickyEnd>
             <th mat-header-cell *matHeaderCellDef></th>
@@ -54,10 +66,14 @@
                                                         <mat-icon>delete</mat-icon>
                                                         </button>
             </td>
+            <td mat-footer-cell *matFooterCellDef></td>
+
     </ng-container>
             
                     <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                    <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky:true"></tr>
+
             </table>
             </div>
 </mat-card-content>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.scss
index a464130a1..9f9eb0eeb 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.scss
@@ -27,4 +27,8 @@
   
   .mat-table-sticky:last-child {
     border-left: 1px solid #e0e0e0;
+  }
+  .mat-footer-cell {
+    font-weight: bold;
+    font-size: 1.2rem !important;
   }
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.ts
index bb5475978..44c6a6058 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/purchase-details/purchase-details.component.ts
@@ -79,6 +79,10 @@ removePurchaseItem(value: any) : void{
     this.notifier.notify('warning', 'Something Wents Wrong Try Again.!');
 });
 }
+// sum all annual Purchase values
+getTotalCost(getItems:any) {
+  return getItems.map(t => t.annual_purchase_value).reduce((acc, value) => acc + Number(value), 0);
+}
 
 // do check component bases
 ngDoCheck() {
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.html b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.html
index bc1f00af6..57c1e733a 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.html
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.html
@@ -14,53 +14,70 @@
                                 </button> 
                 </div>
         </div>
-        <div class="example-container mat-elevation-z8">
+        <div class="example-container mat-elevation-z8" *ngIf="salesItemSource.data.length>0;">
                         <table mat-table [dataSource]="salesItemSource">
                         
                                 <ng-container matColumnDef="product_services" sticky>
                                 <th mat-header-cell *matHeaderCellDef> Product/Services </th>
                                 <td mat-cell *matCellDef="let element"> {{element.sales_item}} </td>
+                                <td mat-footer-cell *matFooterCellDef> Total of Sales </td>
                                 </ng-container>
                         
                                 <ng-container matColumnDef="sale_quantity">
                                 <th mat-header-cell *matHeaderCellDef> Sale Quantity </th>
                                 <td mat-cell *matCellDef="let element"> {{element.sales_qty}} </td>
+                                <td mat-footer-cell *matFooterCellDef> </td>
+
                                 </ng-container>
                         
                                 <ng-container matColumnDef="UOM">
                                 <th mat-header-cell *matHeaderCellDef> UOM </th>
                                 <td mat-cell *matCellDef="let element"> {{element.uom_name}} </td>
+                                <td mat-footer-cell *matFooterCellDef> </td>
+
                                 </ng-container>
                         
                                 <ng-container matColumnDef="rate_per_unit_sale">
                                 <th mat-header-cell *matHeaderCellDef> Rate/Unit of Sale </th>
                                 <td mat-cell *matCellDef="let element"> {{element.rate_per_unit}} </td>
+                                <td mat-footer-cell *matFooterCellDef> </td>
+
                                 </ng-container>
                         
                                 <ng-container matColumnDef="frequency">
                                 <th mat-header-cell *matHeaderCellDef> Frequency </th>
                                 <td mat-cell *matCellDef="let element">{{element.frequency_name}}
                                 </td>
+                                <td mat-footer-cell *matFooterCellDef> </td>
+
                                 </ng-container>
                 <ng-container matColumnDef="annual_sales">
                         <th mat-header-cell *matHeaderCellDef> Annual Sales </th>
                         <td mat-cell *matCellDef="let element">{{element.annual_sale_value}}
                         </td>
+                        <td mat-footer-cell *matFooterCellDef> {{getTotalCost(salesItemSource.data)}} </td>
+
                 </ng-container>
                 <ng-container matColumnDef="margin_percentage" *ngIf="activateMariginCalculation===true">
                                 <th mat-header-cell *matHeaderCellDef> Margin Percentage % </th>
                                 <td mat-cell *matCellDef="let element">{{element.margin_per}}
                                 </td>
+                                <td mat-footer-cell *matFooterCellDef> </td>
+
                 </ng-container>
                 <ng-container matColumnDef="margin_amount" *ngIf="activateMariginCalculation===true">
                                 <th mat-header-cell *matHeaderCellDef> Margin Amount </th>
                                 <td mat-cell *matCellDef="let element">{{element.margin_per_uom}}
                                 </td>
+                                <td mat-footer-cell *matFooterCellDef> </td>
+
                 </ng-container>
                 <ng-container matColumnDef="final_value" *ngIf="activateMariginCalculation===true">
                                 <th mat-header-cell *matHeaderCellDef> Final Value </th>
                                 <td mat-cell *matCellDef="let element">{{element.margin_final_value}}
                                 </td>
+                                <td mat-footer-cell *matFooterCellDef> </td>
+
                 </ng-container>
                 
                                         
@@ -74,12 +91,17 @@
                                                                         <mat-icon>delete</mat-icon>
                                                                         </button>
                         </td>
+                        <td mat-footer-cell *matFooterCellDef> </td>
+
                 </ng-container>
                         
                                 <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></tr>
                                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                                <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky:true"></tr>
                         </table>
-                        </div>
+        </div>
+        
+
         </mat-card-content>
 
 </mat-card>
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.scss b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.scss
index f78501e65..172fb36bd 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.scss
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.scss
@@ -27,4 +27,9 @@
   
   .mat-table-sticky:last-child {
     border-left: 1px solid #e0e0e0;
-  }
\ No newline at end of file
+  }
+  .mat-footer-cell {
+    font-weight: bold;
+    font-size: 1.2rem !important;
+  }
+  
\ No newline at end of file
diff --git a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.ts b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.ts
index 79171bfa0..b41ccdac5 100644
--- a/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.ts
+++ b/ng6-seed/src/app/personal-discussion/manage-pd/list-pd/start-pd/forms/assessed-income/sales-details/sales-details.component.ts
@@ -97,7 +97,14 @@ ngDoCheck() {
       this.displayedColumns = ['product_services','sale_quantity','UOM','rate_per_unit_sale','frequency','annual_sales','action'];
 
     }
-  }}
+  }
+}
+
+// sum all annual sale values
+getTotalCost(getItems:any) {
+  return getItems.map(t => t.annual_sale_value).reduce((acc, value) => acc + Number(value), 0);
+}
+
 
 // detect chnges from parent 
 // ngOnChanges(changes: SimpleChanges) {