diff --git a/AstuteClient2/src/app/customer/customer.component.css b/AstuteClient2/src/app/customer/customer.component.css
index 8b13789..8fe4dc3 100644
--- a/AstuteClient2/src/app/customer/customer.component.css
+++ b/AstuteClient2/src/app/customer/customer.component.css
@@ -1 +1,11 @@
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: lightblue;
+}
 
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: lightblue;
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+    color: lightblue;
+}
\ No newline at end of file
diff --git a/AstuteClient2/src/app/customer/customer.component.html b/AstuteClient2/src/app/customer/customer.component.html
index f651ad1..aec027a 100644
--- a/AstuteClient2/src/app/customer/customer.component.html
+++ b/AstuteClient2/src/app/customer/customer.component.html
@@ -100,7 +100,7 @@
         <td style="width: 25%">
           <div class="input-group">
             <input type="number" class="form-control" placeholder="12345" #inZIP>
-            <input type="number" class="form-control" placeholder="6789" #inZIP4>
+            <input type="number" class="form-control" placeholder="(+4)" #inZIP4>
           </div>
         </td>
       </tr>
@@ -212,7 +212,7 @@
           <td style="width: 25%">
             <div class="input-group">
               <input type="number" class="form-control" placeholder="12345" #inZIP [value]="selected.zip">
-              <input type="number" class="form-control" placeholder="6789" #inZIP4 [value]="selected.ziplast4">
+              <input type="number" class="form-control" placeholder="(+4)" #inZIP4 [value]="selected.ziplast4">
             </div>
           </td>
         </tr>
diff --git a/AstuteClient2/src/app/invoice/invoice.component.css b/AstuteClient2/src/app/invoice/invoice.component.css
index 2c5d1df..e0ac31e 100644
--- a/AstuteClient2/src/app/invoice/invoice.component.css
+++ b/AstuteClient2/src/app/invoice/invoice.component.css
@@ -12,3 +12,15 @@
 .cell:focus {
   outline: none;
 }
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: lightblue;
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: lightblue;
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+  color: lightblue;
+}
\ No newline at end of file
diff --git a/AstuteClient2/src/app/invoice/invoice.component.html b/AstuteClient2/src/app/invoice/invoice.component.html
index fef52cd..295a4f7 100644
--- a/AstuteClient2/src/app/invoice/invoice.component.html
+++ b/AstuteClient2/src/app/invoice/invoice.component.html
@@ -56,30 +56,106 @@
     <div class="modal-body" *ngIf="chosenInv">
         <p class="h4 text-right">General</p>
         <hr>
-        <div class="input-group mb-3">
-            <div class="input-group-prepend">
-                <span class="input-group-text">Invoice Number*</span>
-            </div>
-            <input type="text" class="form-control" #inNumIn [value]="chosenInv.invoiceNumber">
-            <div class="input-group-prepend">
-                <span class="input-group-text">PO Number*</span>
-            </div>
-            <input type="text" class="form-control" [disabled]="true" #poNumIn [value]="chosenInv.poNum">
-            <div class="input-group-prepend">
-                <span class="input-group-text">Change Order Num</span>
-            </div>
-            <input type="text" class="form-control" #coNumIn [value]="chosenInv.changeOrderNum">
-        </div>
+        <table class="table table-borderless table-sm">
+            <tbody>
+            <tr>
+                <td style="width: 1%">
+                    <span class="input-group-text">Customer </span>
+                </td>
+                <td>
+                    <select class="custom-select" (change)="customerDropdownChange(customerSelec.value)"
+                            #customerSelec disabled>
+                        <!--[value]="chosenInv.customerName"-->
+                        <option [value]="-1">Choose Customer...</option>
+                        <option *ngFor="let customer of customers; let i = index;" [value]="i">{{customer.customerName}}
+                        </option>
+                    </select>
+                </td>
+                <td style="width: 5%"></td>
+                <td style="width: 10%">
+                    <span class="input-group-text">SO Number*</span>
+                </td>
+                <td>
+                    <input type="text" class="form-control" [value]="chosenInv.poNum" #poNumIn disabled>
+                    <!--<select class="custom-select" (change)="poDropdownChange(poNumIn.value)"-->
+                            <!--[value]="chosenInv.poNum" #poNumIn disabled>-->
+                        <!--<option>Choose Sales Order...</option>-->
+                        <!--<option *ngFor="let po of correspondingPos;" [value]="po.ponum">{{po.ponum}}</option>-->
+                    <!--</select>-->
+                </td>
+            </tr>
+            <!--add1, add2, billToDept, city, customerId, customerName, email, fax, phone, state, zip, ziplast4-->
+            <tr>
+                <td colspan="2">
+                    <p *ngIf="customerSelec.value >= 0" class="p-0 m-0 mt-2">
+                        To, {{customers[customerSelec.value].billToDept}}
+                    </p>
+                </td>
+                <td></td>
+                <td>
+                    <span class="input-group-text">Invoice Number*</span>
+                </td>
+                <td>
+                    <input type="text" class="form-control" [value]="chosenInv.invoiceNumber" #inNumIn disabled>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <p *ngIf="customerSelec.value >= 0" class="p-0 m-0 mt-2">
+                        {{customers[customerSelec.value].add1}} {{customers[customerSelec.value].add2}}
+                    </p>
+                </td>
+                <td></td>
+                <td>
+                    <span class="input-group-text">Change Order Num</span>
+                </td>
+                <td>
+                    <input type="text" class="form-control" [value]="chosenInv.changeOrderNum" #coNumIn>
+                </td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <p *ngIf="customerSelec.value >= 0" class="p-0 m-0 mt-2">
+                        {{customers[customerSelec.value].city}} {{customers[customerSelec.value].state}} {{customers[customerSelec.value].zip}}-{{customers[customerSelec.value].ziplast4}}
+                    </p>
+                </td>
+                <td></td>
+                <td>
+                    <span class="input-group-text">Payment Status*</span>
+                </td>
+                <td>
+                    <select class="custom-select" [value]="chosenInv.pmtStatus" #pmtStatusIn>
+                        <option value=0>Not Paid</option>
+                        <option value=1>Paid</option>
+                    </select>
+                </td>
+            </tr>
+            </tbody>
+        </table>
+        <!--<div class="input-group mb-3">-->
+            <!--<div class="input-group-prepend">-->
+                <!--<span class="input-group-text">Invoice Number*</span>-->
+            <!--</div>-->
+            <!--<input type="text" class="form-control" #inNumIn [value]="chosenInv.invoiceNumber">-->
+            <!--<div class="input-group-prepend">-->
+                <!--<span class="input-group-text">PO Number*</span>-->
+            <!--</div>-->
+            <!--<input type="text" class="form-control" [disabled]="true" #poNumIn [value]="chosenInv.poNum">-->
+            <!--<div class="input-group-prepend">-->
+                <!--<span class="input-group-text">Change Order Num</span>-->
+            <!--</div>-->
+            <!--<input type="text" class="form-control" #coNumIn [value]="chosenInv.changeOrderNum">-->
+        <!--</div>-->
 
-        <div class="input-group mb-3">
-            <div class="input-group-prepend">
-                <span class="input-group-text">Payment Status*</span>
-            </div>
-            <select class="custom-select" [value]="chosenInv.pmtStatus" #pmtStatusIn>
-                <option value=0>Not Paid</option>
-                <option value=1>Paid</option>
-            </select>
-        </div>
+        <!--<div class="input-group mb-3">-->
+            <!--<div class="input-group-prepend">-->
+                <!--<span class="input-group-text">Payment Status*</span>-->
+            <!--</div>-->
+            <!--<select class="custom-select" [value]="chosenInv.pmtStatus" #pmtStatusIn>-->
+                <!--<option value=0>Not Paid</option>-->
+                <!--<option value=1>Paid</option>-->
+            <!--</select>-->
+        <!--</div>-->
     </div>
 
     <!--Detials-->
@@ -103,33 +179,66 @@
                 <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.lineItemNum" disabled>
                 </td>
                 <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.desc"
-                                           (change)="onNewCellChange(i, 'desc', desc.value)" #desc></td>
+                                           (change)="onSelectedCellChange(i, 'desc', desc.value)" #desc></td>
                 <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="feeTypes[inDet.feeTypeId - 1]"
                                            disabled></td>
                 <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.fee"
-                                           (change)="onNewCellChange(i, 'fee', fee.value); updateNewBillAmt();" #fee>
+                                           (change)="onSelectedCellChange(i, 'fee', fee.value); updateSelectedBillAmt()" #fee>
                 </td>
                 <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty"
-                                           (change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty>
+                                           [step]="inDet.remainingQty / 100"
+                                           (change)="onSelectedCellChange(i, 'qty', qty.value); updateSelectedBillAmt()" #qty>
                 </td>
             </tr>
-            <tr class="p-0 m-0">
+            <tr class="p-0 m-0" *ngIf="inDet.poLineItemNum != -1" >
                 <th class="align-content-center">
-                    <p>{{getPerc(fee.value * qty.value, inDet.remainingQty)}}%</p>
+                    <p>{{getPerc(qty.value, inDet.remainingQty)}}%</p>
                 </th>
                 <td colspan="4">
                     <div class="progress" style="height: 25px;">
                         <div class="progress-bar bg-success" role="progressbar"
-                             [ngStyle]="{'width': getPerc(fee.value * qty.value, inDet.remainingQty) + '%'}">
-                            ${{fee.value * qty.value}}
+                             [ngStyle]="{'width': getPerc(qty.value, inDet.remainingQty) + '%'}">
+                            {{qty.value}}
                         </div>
                         <div class="progress-bar bg-danger" role="progressbar"
-                             [ngStyle]="{'width': (100 - getPerc(fee.value * qty.value, inDet.remainingQty)) + '%'}">
-                            ${{inDet.remainingQty - (fee.value * qty.value)}}
+                             [ngStyle]="{'width': (100 - getPerc(qty.value, inDet.remainingQty)) + '%'}">
+                            {{inDet.remainingQty - (qty.value)}}
                         </div>
                     </div>
                 </td>
             </tr>
+            <!--<tr class="p-0 m-0">-->
+                <!--&lt;!&ndash;INV Detail Items: invoiceNum, lineItemNum, poLineItemNum, serviceTypeId, desc, qty, fee&ndash;&gt;-->
+                <!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.lineItemNum" disabled>-->
+                <!--</td>-->
+                <!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="inDet.desc"-->
+                                           <!--(change)="onNewCellChange(i, 'desc', desc.value)" #desc></td>-->
+                <!--<td class="p-0 m-0"><input type="text" class="form-control cell" [value]="feeTypes[inDet.feeTypeId - 1]"-->
+                                           <!--disabled></td>-->
+                <!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.fee"-->
+                                           <!--(change)="onNewCellChange(i, 'fee', fee.value); updateNewBillAmt();" #fee>-->
+                <!--</td>-->
+                <!--<td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty"-->
+                                           <!--(change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty>-->
+                <!--</td>-->
+            <!--</tr>-->
+            <!--<tr class="p-0 m-0">-->
+                <!--<th class="align-content-center">-->
+                    <!--<p>{{getPerc(fee.value * qty.value, inDet.remainingQty)}}%</p>-->
+                <!--</th>-->
+                <!--<td colspan="4">-->
+                    <!--<div class="progress" style="height: 25px;">-->
+                        <!--<div class="progress-bar bg-success" role="progressbar"-->
+                             <!--[ngStyle]="{'width': getPerc(fee.value * qty.value, inDet.remainingQty) + '%'}">-->
+                            <!--${{fee.value * qty.value}}-->
+                        <!--</div>-->
+                        <!--<div class="progress-bar bg-danger" role="progressbar"-->
+                             <!--[ngStyle]="{'width': (100 - getPerc(fee.value * qty.value, inDet.remainingQty)) + '%'}">-->
+                            <!--${{inDet.remainingQty - (fee.value * qty.value)}}-->
+                        <!--</div>-->
+                    <!--</div>-->
+                <!--</td>-->
+            <!--</tr>-->
             </tbody>
             <tbody>
             <tr>
@@ -161,7 +270,7 @@
         </div>
     </div>
 
-    <!--Footer-->
+    <!--Invoice Footer-->
     <div class="modal-body" *ngIf="chosenInv">
         <p class="h4 text-right">Footer</p>
         <hr>
@@ -185,6 +294,7 @@
         <p>Choose an Invoice First!</p>
     </div>
 
+    <!--Modal Footer-->
     <div class="modal-footer">
         <button type="button" class="btn btn-success"
                 (click)="editInvoice(inNumIn.value, poNumIn.value, coNumIn.value,  pmtStatusIn.value, notesIn.value, certIn.value)"
@@ -300,14 +410,14 @@
                 <td class="p-0 m-0"><input type="text" class="form-control cell" [value]="feeTypes[inDet.feeTypeId - 1]"
                                            disabled></td>
                 <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.fee"
-                                           (change)="onNewCellChange(i, 'fee', fee.value); updateNewBillAmt();" #fee disabled>
+                                           (change)="onNewCellChange(i, 'fee', fee.value); updateNewBillAmt();" #fee>
                 </td>
                 <td class="p-0 m-0"><input type="number" class="form-control cell" [value]="inDet.qty"
                                            [step]="inDet.remainingQty / 100"
                                            (change)="onNewCellChange(i, 'qty', qty.value); updateNewBillAmt();" #qty>
                 </td>
             </tr>
-            <tr class="p-0 m-0">
+            <tr class="p-0 m-0" *ngIf="inDet.poLineItemNum != -1">
                 <th class="align-content-center">
                     <p>{{getPerc(qty.value, inDet.remainingQty)}}%</p>
                 </th>
@@ -331,11 +441,13 @@
                     <select class="custom-select"
                             (change)="pushOntoNewDetail(inNumIn.value, newInDetails.length + 1, poDetails[poDetSelec.value].lineItemNo,
                   poDetails[poDetSelec.value].feeTypeId, poDetails[poDetSelec.value].serviceTypeId,
-                  poDetails[poDetSelec.value].serviceDesc, 0, poDetails[poDetSelec.value].fee, poDetails[poDetSelec.value].remainingQty)"
+                  poDetails[poDetSelec.value].serviceDesc, 0, poDetails[poDetSelec.value].fee, poDetails[poDetSelec.value].remainingQty,
+                  poNumIn.value)"
                             [disabled]="!poDetails.length"
                             #poDetSelec>
                         <option>Choose PO Detail...</option>
                         <option *ngFor="let po of poDetails; let i = index;" [value]="i">{{po.serviceDesc}}</option>
+                        <option [value]="-1">Out of Pocket Expenses</option>
                     </select>
                 </td>
             </tr>
@@ -398,23 +510,22 @@
             </tr>
             </tbody>
         </table>
-
-
     </div>
 
+    <!--Invoice Footer-->
     <div class="modal-body">
         <p class="h4 text-right">Footer</p>
         <hr>
         <div class="input-group mb-3">
             <div class="input-group-prepend">
-                <span class="input-group-text">Special Notes*</span>
+                <span class="input-group-text">Notes:</span>
             </div>
             <textarea class="form-control" #notesIn></textarea>
         </div>
 
         <div class="input-group mb-3">
             <div class="input-group-prepend">
-                <span class="input-group-text">Certification*</span>
+                <span class="input-group-text">Certification:</span>
             </div>
             <textarea class="form-control"
                       [value]="'Certified that the above items and rates are in accordance with the contractual agreement as verified by the undersigned'"
@@ -423,6 +534,7 @@
         </div>
     </div>
 
+    <!--Modal Footer-->
     <div class="modal-footer">
         <button type="button" class="btn btn-success"
                 (click)="addInvoice(inNumIn.value, poNumIn.value, coNumIn.value,  pmtStatusIn.value, newBillAmt, notesIn.value, certIn.value, 1, new)"
diff --git a/AstuteClient2/src/app/invoice/invoice.component.ts b/AstuteClient2/src/app/invoice/invoice.component.ts
index a342dbc..fa4c411 100644
--- a/AstuteClient2/src/app/invoice/invoice.component.ts
+++ b/AstuteClient2/src/app/invoice/invoice.component.ts
@@ -1,257 +1,297 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {AstuteClientService} from '../services/astute-client-service';
+
 declare var $: any;
 
 @Component({
-  selector: 'app-invoice',
-  templateUrl: './invoice.component.html',
-  styleUrls: ['./invoice.component.css']
+    selector: 'app-invoice',
+    templateUrl: './invoice.component.html',
+    styleUrls: ['./invoice.component.css']
 })
 export class InvoiceComponent implements OnInit {
-  @ViewChild('agGrid') agGrid;
-  chosenCustomerID: any = 0;
-  chosenInv: any = 0;
-  source;
-  customers;
-  pos = [];
-  chosenPo;
-  correspondingPos = [];
-  generatedInvoiceNumber = '';
-  feeTypes = ['Fixed Fee', 'Hourly'];
-  serviceTypes = ['Study', 'Design', 'Peer Review', 'Cost Investigation', 'Forensic Investigation'];
-  columnDefs = [
-    {headerName: 'Invoice Number', field: 'invoiceNumber'},
-    {headerName: 'Date', field: 'invoiceDate'},
-    {headerName: 'Sales Order Number', field: 'poNum'},
-    {headerName: 'Change Order Number', field: 'changeOrderNum'},
-    {headerName: 'Paid', field: 'pmtStatus'},
-    {headerName: 'Bll Amount', field: 'billAmt'}
-  ];
-  newInDetails = [];
-  newBillAmt = 0;
-  selectedInDetails = [];
-  selectedBillAmt;
-  poDetails = [];
-  selectedPODetails = [];
+    @ViewChild('agGrid') agGrid;
+    chosenCustomerID: any = 0;
+    chosenInv: any = 0;
+    source;
+    customers;
+    pos = [];
+    chosenPo;
+    correspondingPos = [];
+    generatedInvoiceNumber = '';
+    feeTypes = ['Fixed Fee', 'Hourly'];
+    serviceTypes = ['Study', 'Design', 'Peer Review', 'Cost Investigation', 'Forensic Investigation'];
+    columnDefs = [
+        {headerName: 'Invoice Number', field: 'invoiceNumber'},
+        {headerName: 'Date', field: 'invoiceDate'},
+        {headerName: 'Sales Order Number', field: 'poNum'},
+        {headerName: 'Change Order Number', field: 'changeOrderNum'},
+        {headerName: 'Paid', field: 'pmtStatus'},
+        {headerName: 'Bll Amount', field: 'billAmt'}
+    ];
+    newInDetails = [];
+    newBillAmt = 0;
+    selectedInDetails = [];
+    selectedBillAmt = 0;
+    poDetails = [];
+    selectedPODetails = [];
 
-  gridOptions = {
+    gridOptions = {
 
-    // PROPERTIES - object properties, myRowData and myColDefs are created somewhere in your application
-    rowData: this.source,
-    columnDefs: this.columnDefs,
+        // PROPERTIES - object properties, myRowData and myColDefs are created somewhere in your application
+        rowData: this.source,
+        columnDefs: this.columnDefs,
 
-    // PROPERTIES - simple boolean / string / number properties
-    enableColResize: true,
-    rowSelection: 'single',
+        // PROPERTIES - simple boolean / string / number properties
+        enableColResize: true,
+        rowSelection: 'single',
 
-    // EVENTS - add event callback handlers
-    onRowClicked: (event) => { this.getSelectedRows() },
-    onColumnResized: function(event) { console.log('a column was resized'); },
-    onGridReady: (event) => {},
-    // this.agGrid.sizeColumnsToFit();
-    // 1: draft
-    // 2: submitted
-    // 3: void
+        // EVENTS - add event callback handlers
+        onRowClicked: (event) => {
+            this.getSelectedRows()
+        },
+        onColumnResized: function (event) {
+            console.log('a column was resized');
+        },
+        onGridReady: (event) => {
+        },
+        // this.agGrid.sizeColumnsToFit();
+        // 1: draft
+        // 2: submitted
+        // 3: void
 
-    // getRowStyle: function(params) {
-    //   if (params.data.invoiceStatus === 1) {
-    //     return { 'color': 'red' }
-    //   } else if (params.data.invoiceStatus === 3) {
-    //     return { 'text-decoration': 'line-through'}
-    //   }
-    // }
+        // getRowStyle: function(params) {
+        //   if (params.data.invoiceStatus === 1) {
+        //     return { 'color': 'red' }
+        //   } else if (params.data.invoiceStatus === 3) {
+        //     return { 'text-decoration': 'line-through'}
+        //   }
+        // }
 
-    rowClassRules: {
-      // apply green to 2008
-      // 'bg-red': true,
+        rowClassRules: {
+            // apply green to 2008
+            // 'bg-red': true,
 
-      // apply amber 2004
-      'text-danger': function(params) { return params.data.invoiceStatus === 1},
-      'text-primary': function(params) { return params.data.invoiceStatus === 2},
-      'text-warning': function(params) { return params.data.invoiceStatus === 3},
+            // apply amber 2004
+            'text-danger': function (params) {
+                return params.data.invoiceStatus === 1
+            },
+            'text-primary': function (params) {
+                return params.data.invoiceStatus === 2
+            },
+            'text-warning': function (params) {
+                return params.data.invoiceStatus === 3
+            },
 
-      // apply red to 2000
-      // 'rag-red-outer': function(params) { return params.data.year === 2000}
-    }
-  }
-
-  constructor(protected astuteClientService: AstuteClientService) {
-  }
-
-  customerDropdownChange(index) {
-    this.chosenCustomerID = this.customers[index].customerId;
-    this.setCorrespondingPos();
-  }
-
-  poDropdownChange(ponum) {
-    this.pos.forEach((po) => {
-      if (po.ponum === ponum) {
-        this.chosenPo = po;
-      }
-    })
-    this.astuteClientService.getPODetail(ponum).then((data) => {
-      if (data) {
-        // fee
-        // feeTypeId
-        // lineItemNo
-        // ponum
-        // qty
-        // remainingQty
-        // serviceDesc
-        // serviceTypeId
-        this.poDetails = data;
-      } else {
-        alert("get PO detail failed!");
-      }
-    });
-    this.astuteClientService.generateInvoiceNumber(ponum).then((data) => {
-      if (data) {
-        this.generatedInvoiceNumber = data;
-      } else {
-        alert('gen inv num failed!');
-      }
-    });
-  }
-
-  ngOnInit() {
-    this.refreshData();
-  }
-
-  refreshData () {
-    this.astuteClientService.getInvoices().then((data) => {
-      this.source = data;
-    });
-
-    this.astuteClientService.getCustomers().then ( (data) => {
-      this.customers = data;
-    });
-
-    this.astuteClientService.getPOs().then ( (data) => {
-      this.pos = data;
-    });
-  }
-
-  getPODetails (poIndex) {
-    let ponum = this.pos[poIndex].ponum;
-    this.astuteClientService.getPODetail(ponum).then ( (data) => {
-      this.selectedInDetails = data;
-      console.log ("inDetails:");
-      console.log (this.selectedInDetails);
-    });
-  }
-
-
-
-  onSelectedCellChange(row: number, col: string, value) {
-    this.selectedInDetails[row][col] = value;
-    console.log(this.selectedInDetails);
-  }
-
-  onNewCellChange(row: number, col: string, value) {
-    this.newInDetails[row][col] = value;
-    console.log(this.newInDetails);
-  }
-
-  pushOntoSelectedDetail(invoiceNum, lineItemNum, poLineItemNum, serviceTypeId, desc, qty, fee) {
-    this.selectedInDetails.push({
-      'invoiceNum': invoiceNum,
-      'lineItemNum': lineItemNum,
-      'poLineItemNum': poLineItemNum,
-      'serviceTypeId': serviceTypeId,
-      'desc': desc,
-      'qty': qty,
-      'fee': fee,
-    });
-  }
-
-  pushOntoNewDetail(invoiceNum, lineItemNum, poLineItemNum, feeTypeId, serviceTypeId, desc, qty, fee, remainingQty) {
-    this.newInDetails.push({
-      'invoiceNum': invoiceNum,
-      'lineItemNum': lineItemNum,
-      'poLineItemNum': poLineItemNum,
-      'feeTypeId': feeTypeId,
-      'serviceTypeId': serviceTypeId,
-      'desc': desc,
-      'qty': +qty,
-      'fee': +fee,
-      'remainingQty' : +remainingQty
-    });
-    console.log(this.newInDetails);
-  }
-
-  updateNewBillAmt () {
-    let tot = 0;
-    this.newInDetails.forEach((d) => {
-      tot += +d.qty * +d.fee;
-    });
-    this.newBillAmt = tot;
-  }
-
-  assignActity(): void {
-    window.open('/invoice-gen');
-  }
-
-  getSelectedRows() {
-    const selectedNodes = this.agGrid.api.getSelectedNodes();
-    if (selectedNodes.length) {
-      this.chosenInv = selectedNodes.map(node => node.data)[0];
-      // console.log (this.chosenInv);
-      this.astuteClientService.getPODetail(this.chosenInv.poNum).then((poDetails) => {
-        if (poDetails) {
-          this.selectedPODetails = poDetails;
-          this.astuteClientService.getInvoiceDetail(this.chosenInv.invoiceNumber).then ((invoiceDetails) => {
-            if (invoiceDetails) {
-              this.selectedInDetails = invoiceDetails;
-            } else {
-              alert("get Inv detail failed!");
-            }
-          });
-        } else {
-          alert("get PO detail failed!")
+            // apply red to 2000
+            // 'rag-red-outer': function(params) { return params.data.year === 2000}
         }
-      });
-    } else {
-      this.chosenInv = null;
-      this.selectedPODetails = [];
     }
-  }
 
-  open(content, indexPO, indexINV) {
-    content.open()
-    // this.detailDescription = ViewChild('detailDescription');
-    // this.detailAmount = ViewChild('detailAmount');
-    // this.detailRate = ViewChild('detailRate');
-    // this.detailTotal = ViewChild('detailTotal');
-    // if (indexINV) {
-    //   this.chosenInv = indexINV;
-    // }
-    // if (indexPO) {
-    //   this.chosenPo = indexPO;
-    //   this.getPODetails(this.chosenPo);
-    // }
-    // this.modalService.open(content, { size: 'lg' }).result.then((result) => {
-    //   this.closeResult = `Closed with: ${result}`;
-    // }, (reason) => {
-    //   this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
-    // });
-  }
+    constructor(protected astuteClientService: AstuteClientService) {
+    }
 
-  close(content) {
-    content.close();
-  }
+    customerDropdownChange(index) {
+        this.chosenCustomerID = this.customers[index].customerId;
+        this.setCorrespondingPos();
+    }
 
-  getCurrDate() {
-    let d = new Date(),
-      month = '' + (d.getMonth() + 1),
-      day = '' + d.getDate(),
-      year = d.getFullYear();
+    poDropdownChange(ponum) {
+        this.pos.forEach((po) => {
+            if (po.ponum === ponum) {
+                this.chosenPo = po;
+            }
+        })
+        this.astuteClientService.getPODetail(ponum).then((data) => {
+            if (data) {
+                // fee
+                // feeTypeId
+                // lineItemNo
+                // ponum
+                // qty
+                // remainingQty
+                // serviceDesc
+                // serviceTypeId
 
-    if (month.length < 2) month = '0' + month;
-    if (day.length < 2) day = '0' + day;
+                // lineItemNo, feeTypeId, serviceTypeId, serviceDesc, fee, remainingQty
+                this.poDetails = data;
+                this.poDetails[-1] = {
+                    'lineItemNo': -1,
+                    'feeTypeId': 1,
+                    'serviceTypeId': 1,
+                    'serviceDesc': 'Out of Pocket Expenses',
+                    'fee': 0,
+                    'remainingQty': 0
+                };
+            } else {
+                alert("get PO detail failed!");
+            }
+        });
+        this.astuteClientService.generateInvoiceNumber(ponum).then((data) => {
+            if (data) {
+                this.generatedInvoiceNumber = data;
+            } else {
+                alert('gen inv num failed!');
+            }
+        });
+    }
+
+    ngOnInit() {
+        this.refreshData();
+    }
+
+    refreshData() {
+        this.astuteClientService.getInvoices().then((data) => {
+            this.source = data;
+        });
+
+        this.astuteClientService.getCustomers().then((data) => {
+            this.customers = data;
+        });
+
+        this.astuteClientService.getPOs().then((data) => {
+            this.pos = data;
+        });
+    }
+
+    getPODetails(poIndex) {
+        let ponum = this.pos[poIndex].ponum;
+        this.astuteClientService.getPODetail(ponum).then((data) => {
+            this.selectedInDetails = data;
+            console.log("inDetails:");
+            console.log(this.selectedInDetails);
+        });
+    }
+
+    onSelectedCellChange(row: number, col: string, value) {
+        this.selectedInDetails[row][col] = value;
+        console.log(this.selectedInDetails);
+    }
+
+    onNewCellChange(row: number, col: string, value) {
+        this.newInDetails[row][col] = value;
+        console.log(this.newInDetails);
+    }
+
+    pushOntoSelectedDetail(invoiceNum, lineItemNum, poLineItemNum, serviceTypeId, desc, qty, fee) {
+        this.selectedInDetails.push({
+            'invoiceNum': invoiceNum,
+            'lineItemNum': lineItemNum,
+            'poLineItemNum': poLineItemNum,
+            'serviceTypeId': serviceTypeId,
+            'desc': desc,
+            'qty': +qty,
+            'fee': +fee
+        });
+    }
+
+    pushOntoNewDetail(invoiceNum, lineItemNum, poLineItemNum, feeTypeId, serviceTypeId, desc, qty, fee, remainingQty, poNum) {
+        this.newInDetails.push({
+            'invoiceNum': invoiceNum,
+            'lineItemNum': lineItemNum,
+            'poLineItemNum': poLineItemNum,
+            'feeTypeId': feeTypeId,
+            'serviceTypeId': serviceTypeId,
+            'desc': desc,
+            'qty': +qty,
+            'fee': +fee,
+            'remainingQty': +remainingQty,
+            'poNum': poNum
+        });
+        console.log(this.newInDetails);
+    }
+
+    updateNewBillAmt() {
+        let tot = 0;
+        this.newInDetails.forEach((d) => {
+            tot += +d.qty * +d.fee;
+        });
+        this.newBillAmt = tot;
+    }
+
+    updateSelectedBillAmt() {
+        let tot = 0;
+        this.selectedInDetails.forEach((d) => {
+            tot += +d.qty * +d.fee;
+        });
+        this.selectedBillAmt = tot;
+    }
 
 
-    return [year, month, day].join('-');
-  }
+    assignActity(): void {
+        window.open('/invoice-gen');
+    }
+
+    getSelectedRows() {
+        const selectedNodes = this.agGrid.api.getSelectedNodes();
+        if (selectedNodes.length) {
+            this.chosenInv = selectedNodes.map(node => node.data)[0];
+            // console.log (this.chosenInv);
+            this.selectedBillAmt = +this.chosenInv.billAmt;
+            this.astuteClientService.getPODetail(this.chosenInv.poNum).then((poDetails) => {
+                if (poDetails) {
+                    this.selectedPODetails = poDetails;
+                    this.astuteClientService.getInvoiceDetail(this.chosenInv.invoiceNumber).then((invoiceDetails) => {
+                        if (invoiceDetails) {
+                            this.selectedInDetails = invoiceDetails;
+                            this.selectedInDetails.forEach((invDetail) => {
+                                const tempPo = this.selectedPODetails.filter((po) => {
+                                    // console.log (po.lineItemNo + " and " + invDetail.poLineItemNum);
+                                    return po.lineItemNo === invDetail.poLineItemNum;
+                                })[0];
+                                if (tempPo) {
+                                    invDetail.remainingQty = tempPo.remainingQty;
+                                }
+                            });
+                        } else {
+                            alert("get Inv detail failed!");
+                        }
+                    });
+                } else {
+                    alert("get PO detail failed!")
+                }
+            });
+        } else {
+            this.chosenInv = null;
+            this.selectedPODetails = [];
+        }
+    }
+
+    open(content, indexPO, indexINV) {
+        content.open()
+        // this.detailDescription = ViewChild('detailDescription');
+        // this.detailAmount = ViewChild('detailAmount');
+        // this.detailRate = ViewChild('detailRate');
+        // this.detailTotal = ViewChild('detailTotal');
+        // if (indexINV) {
+        //   this.chosenInv = indexINV;
+        // }
+        // if (indexPO) {
+        //   this.chosenPo = indexPO;
+        //   this.getPODetails(this.chosenPo);
+        // }
+        // this.modalService.open(content, { size: 'lg' }).result.then((result) => {
+        //   this.closeResult = `Closed with: ${result}`;
+        // }, (reason) => {
+        //   this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
+        // });
+    }
+
+    close(content) {
+        content.close();
+    }
+
+    getCurrDate() {
+        let d = new Date(),
+            month = '' + (d.getMonth() + 1),
+            day = '' + d.getDate(),
+            year = d.getFullYear();
+
+        if (month.length < 2) month = '0' + month;
+        if (day.length < 2) day = '0' + day;
+
+
+        return [year, month, day].join('-');
+    }
 
     formatDate(d: Date) {
         let month = '' + (d.getMonth() + 1),
@@ -267,130 +307,161 @@ export class InvoiceComponent implements OnInit {
         return [year, month, day].join('-');
     }
 
-  addInvoice(invoiceNumber, poNum, changeOrderNum, pmtStatus, billAmt, specialNotes, certification, status, ref) {
-    // String  invoiceNumber;
-    // Date invoiceDate;
-    // String  poNum;
-    // String  changeOrderNum;
-    // int     pmtStatus;
-    // Double  billAmt;
-    // String  specialNotes;
-    // String  certification;
-    // Date pmtReceivedDate;
-    const invData = {
-      "invoiceNumber": invoiceNumber,
-      "invoiceDate": this.formatDate(new Date()),
-      "poNum": poNum,
-      "changeOrderNum": changeOrderNum,
-      "pmtStatus": +pmtStatus,
-      "billAmt": +billAmt,
-      "specialNotes": specialNotes,
-      "certification": certification,
-      "pmtReceivedDate": this.formatDate(new Date()),
-      'invoiceStatus': status
-    };
-    console.log (invData);
+    addInvoice(invoiceNumber, poNum, changeOrderNum, pmtStatus, billAmt, specialNotes, certification, status, ref) {
+        // String  invoiceNumber;
+        // Date invoiceDate;
+        // String  poNum;
+        // String  changeOrderNum;
+        // int     pmtStatus;
+        // Double  billAmt;
+        // String  specialNotes;
+        // String  certification;
+        // Date pmtReceivedDate;
+        const invData = {
+            "invoiceNumber": invoiceNumber,
+            "invoiceDate": this.formatDate(new Date()),
+            "poNum": poNum,
+            "changeOrderNum": changeOrderNum,
+            "pmtStatus": +pmtStatus,
+            "billAmt": +billAmt,
+            "specialNotes": specialNotes,
+            "certification": certification,
+            "pmtReceivedDate": this.formatDate(new Date()),
+            'invoiceStatus': status
+        };
+        console.log(invData);
 
-    this.astuteClientService.createInvoice(invData)
-      .catch((response) => {
-        console.log("rejected: " + response);
-      })
-      .then((data) => {
-        if (data) {
-          this.refreshData();
-          this.addInvoiceDetail(this.newInDetails);
-          ref.close();
-        } else {
-          alert ("Invoice Creation Failed, Check Input Fields")
-        }
-      });
-  }
-
-  addInvoiceDetail(details) {
-    if (details.length) {
-      console.log(details[0]);
-      this.astuteClientService.createInvoiceDetail(details[0]).then((data) => {
-        if (data) {
-          details.splice(0, 1);
-          this.addInvoiceDetail(details);
-        } else {
-          alert("add inv detail failed");
-        }
-      });
-    } else {
-      this.newInDetails = [];
+        this.astuteClientService.createInvoice(invData)
+            .catch((response) => {
+                console.log("rejected: " + response);
+            })
+            .then((data) => {
+                if (data) {
+                    this.refreshData();
+                    this.addInvoiceDetail(this.newInDetails);
+                    ref.close();
+                } else {
+                    alert('Invoice Creation Failed, Check Input Fields');
+                }
+            });
     }
-  }
 
-  editInvoice(invoiceNumber, poNum, changeOrderNum, pmtStatus, billAmt, specialNotes, certification) {
-    // String  invoiceNumber;
-    // Date invoiceDate;
-    // String  poNum;
-    // String  changeOrderNum;
-    // int     pmtStatus;
-    // Double  billAmt;
-    // String  specialNotes;
-    // String  certification;
-    // Date pmtReceivedDate;
-    const invData = {
-      "invoiceNumber": invoiceNumber,
-      "invoiceDate": new Date(),
-      "poNum": poNum,
-      "changeOrderNum": changeOrderNum,
-      "pmtStatus": +pmtStatus,
-      "billAmt": +billAmt,
-      "specialNotes": specialNotes,
-      "certification": certification,
-      "pmtReceivedDate": new Date()
-    };
+    addInvoiceDetail(details) {
+        if (details.length) {
+            // console.log(details[0]);
+            // if (details[0].poLineItemNum !== -1) {
+                this.astuteClientService.createInvoiceDetail(details[0]).then((data) => {
+                    if (data) {
+                        details.splice(0, 1);
+                        this.addInvoiceDetail(details);
+                    } else {
+                        alert('add inv detail failed');
+                    }
+                });
+            // } else {
+                // desc
+                // fee
+                // feeTypeId
+                // invoiceNum
+                // lineItemNum
+                // poLineItemNum
+                // qty
+                // remainingQty
+                // serviceTypeId
+                // poNum
 
-    this.astuteClientService.updateInvoice(invoiceNumber, invData)
-      .catch((response) => {
-        console.log("rejected: " + response);
-      })
-      .then((data) => {
-        if (data) {
-          alert("invoice " + invoiceNumber + " updated!");
-          console.log("fulfilled: " + data);
-          // this.source[this.chosenInv] = invData;
-          this.refreshData();
+                // const data = {
+                //     // 'lineItemNo': details[0].,
+                //     'poNum': details[0].poNum,
+                //     'serviceDesc': details[0].desc,
+                //     'feeTypeId': details[0].feeTypeId,
+                //     'serviceTypeId': details[0].serviceTypeId,
+                //     'qty': +details[0].qty,
+                //     'fee': +details[0].fee,
+                //     'remainingQty': +details[0].fee * +details[0].qty
+                // };
+                // this.astuteClientService.createPODetail(data).then((d) => {
+                //     if (d) {
+                //         console.log (d);
+                //     } else {
+                //         alert('create custom PO failed.');
+                //     }
+                // });
+            // }
         } else {
-          alert ("Invoice Update Failed, Check Input Fields")
+            this.newInDetails = [];
         }
-      });
-  }
+    }
 
-  voidInvoice(invoiceNumber) {
-    this.astuteClientService.voidInvoice(invoiceNumber).then ((data) => {
-      if (data) {
-        this.refreshData();
-      } else {
-        alert('void invoice failed.')
-      }
-    });
-  }
+    editInvoice(invoiceNumber, poNum, changeOrderNum, pmtStatus, billAmt, specialNotes, certification) {
+        // String  invoiceNumber;
+        // Date invoiceDate;
+        // String  poNum;
+        // String  changeOrderNum;
+        // int     pmtStatus;
+        // Double  billAmt;
+        // String  specialNotes;
+        // String  certification;
+        // Date pmtReceivedDate;
+        const invData = {
+            "invoiceNumber": invoiceNumber,
+            "invoiceDate": new Date(),
+            "poNum": poNum,
+            "changeOrderNum": changeOrderNum,
+            "pmtStatus": +pmtStatus,
+            "billAmt": +billAmt,
+            "specialNotes": specialNotes,
+            "certification": certification,
+            "pmtReceivedDate": new Date()
+        };
 
-  submitInvoice(invoiceNumber) {
-    this.astuteClientService.submitInvoice(invoiceNumber).then ((data) => {
-      if (data) {
-        this.refreshData();
-      } else {
-        alert('submit invoice failed.');
-      }
-    });
-  }
+        this.astuteClientService.updateInvoice(invoiceNumber, invData)
+            .catch((response) => {
+                console.log("rejected: " + response);
+            })
+            .then((data) => {
+                if (data) {
+                    alert("invoice " + invoiceNumber + " updated!");
+                    console.log("fulfilled: " + data);
+                    // this.source[this.chosenInv] = invData;
+                    this.refreshData();
+                } else {
+                    alert("Invoice Update Failed, Check Input Fields")
+                }
+            });
+    }
 
-  getPerc (amt, total): number {
-    return Math.floor(((amt) / total) * 100);
-  }
+    voidInvoice(invoiceNumber) {
+        this.astuteClientService.voidInvoice(invoiceNumber).then((data) => {
+            if (data) {
+                this.refreshData();
+            } else {
+                alert('void invoice failed.')
+            }
+        });
+    }
 
-  getRangeMax(total, num) {
-    return Math.floor (total/num);
-  }
+    submitInvoice(invoiceNumber) {
+        this.astuteClientService.submitInvoice(invoiceNumber).then((data) => {
+            if (data) {
+                this.refreshData();
+            } else {
+                alert('submit invoice failed.');
+            }
+        });
+    }
 
-  setCorrespondingPos () {
-    this.correspondingPos = this.pos.filter((po, index, array) => {
-      return po.customerId === this.chosenCustomerID;
-    });
-  }
+    getPerc(amt, total): number {
+        return Math.floor(((amt) / total) * 100);
+    }
+
+    getRangeMax(total, num) {
+        return Math.floor(total / num);
+    }
+
+    setCorrespondingPos() {
+        this.correspondingPos = this.pos.filter((po, index, array) => {
+            return po.customerId === this.chosenCustomerID;
+        });
+    }
 }
diff --git a/AstuteClient2/src/app/modal-form/modal-form.component.css b/AstuteClient2/src/app/modal-form/modal-form.component.css
index 8b13789..e69de29 100644
--- a/AstuteClient2/src/app/modal-form/modal-form.component.css
+++ b/AstuteClient2/src/app/modal-form/modal-form.component.css
@@ -1 +0,0 @@
-
diff --git a/AstuteClient2/src/app/sales-order/sales-order.component.css b/AstuteClient2/src/app/sales-order/sales-order.component.css
index 2c5d1df..e0ac31e 100644
--- a/AstuteClient2/src/app/sales-order/sales-order.component.css
+++ b/AstuteClient2/src/app/sales-order/sales-order.component.css
@@ -12,3 +12,15 @@
 .cell:focus {
   outline: none;
 }
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: lightblue;
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: lightblue;
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+  color: lightblue;
+}
\ No newline at end of file
diff --git a/AstuteClient2/src/app/sales-order/sales-order.component.html b/AstuteClient2/src/app/sales-order/sales-order.component.html
index 54f0d96..c1aa020 100644
--- a/AstuteClient2/src/app/sales-order/sales-order.component.html
+++ b/AstuteClient2/src/app/sales-order/sales-order.component.html
@@ -158,7 +158,7 @@
 
   <div class="modal-footer">
     <button class="btn btn-success" type="button"
-            [disabled]="!(ponum.value && podate.value && customerid.value >= 0 && contractnum.value && contractamt.value)"
+            [disabled]="!(ponum.value && podate.value && customerid.value && contractnum.value && contractamt.value)"
             (click)="addPo(projNum.value, ponum.value, podate.value, customerid.value, contractnum.value, contractamt.value, title.value, new)"
     >
       Add
@@ -182,7 +182,7 @@
         <tr>
           <td><span class="input-group-text">Customer</span></td>
           <td colspan="3">
-            <select class="form-control" [value]="+selected.customerId" disabled="true" #customerid>
+            <select class="form-control" [value]="selected.customerId" disabled="true" #customerid>
               <option [value]="-1">No Customer</option>
               <option *ngFor="let customer of customers" [value]="customer.customerId">{{customer.customerName}}</option>
             </select>