Bill now displays Net, Tax, Discount and Gross Amounts

Stylings: The bill table rows are properly centred instead of aligned to top

bookie/src/app/sales/bill.service.ts

@@ -33,6 +33,7 @@ export class BillService {
     const view = this.bill.kots.map(k => {
       return [{
         isKot: true,
+        oldKot: true,
         info: `Kot: ${k.code} / ${k.date} (${k.user.name}) `
       }, ...k.inventories.map(i => {
         return {
@@ -186,14 +187,6 @@ export class BillService {
     );
   }
 
-  amount() {
-    return math.round(this.bill.kots.reduce(
-      (ka: number, k: Kot) => ka + k.inventories.reduce(
-        (ca: number, c: Inventory) => ca + ((c.isHappyHour ? 0 : c.price) * c.quantity * (1 - c.discount) * (1 + c.taxRate))
-        , 0)
-    , 0))
-  }
-
   type() {
     return this.bill.voucherType;
   }
@@ -203,4 +196,36 @@ export class BillService {
       tap(x => console.log(x))
     );
   }
+
+  netAmount() {
+    return math.round(this.bill.kots.reduce(
+      (ka: number, k: Kot) => ka + k.inventories.reduce(
+        (ca: number, c: Inventory) => ca + ((c.isHappyHour ? 0 : c.price) * c.quantity)
+        , 0)
+    , 0))
+  }
+
+  discountAmount() {
+    return math.round(this.bill.kots.reduce(
+      (ka: number, k: Kot) => ka + k.inventories.reduce(
+        (ca: number, c: Inventory) => ca + ((c.isHappyHour ? 0 : c.price) * c.quantity * c.discount)
+        , 0)
+    , 0))
+  }
+
+  taxAmount() {
+    return math.round(this.bill.kots.reduce(
+      (ka: number, k: Kot) => ka + k.inventories.reduce(
+        (ca: number, c: Inventory) => ca + ((c.isHappyHour ? 0 : c.price) * c.quantity * (1 - c.discount) * c.taxRate)
+        , 0)
+    , 0))
+  }
+
+  amount() {
+    return math.round(this.bill.kots.reduce(
+      (ka: number, k: Kot) => ka + k.inventories.reduce(
+        (ca: number, c: Inventory) => ca + ((c.isHappyHour ? 0 : c.price) * c.quantity * (1 - c.discount) * (1 + c.taxRate))
+        , 0)
+    , 0))
+  }
 }

bookie/src/app/sales/bills/bills.component.css

@@ -1,13 +1,49 @@
-.kot {
-  background-color: lightblue;
-}
-
-.printed {
-  background-color: lightpink;
-}
-
 .square-button {
   min-width: 150px;
   max-width: 150px;
   min-height: 150px;
 }
+
+.right-align {
+  display: flex;
+  justify-content: flex-end;
+}
+
+table {
+  width: 100%;
+}
+
+.grey900 {
+  background-color: #1b5e20;
+  color: #ffffff;
+}
+
+.grey700 {
+  background-color: #388e3c;
+  color: #ffffff;
+}
+
+.grey500 {
+  background-color: #4caf50;
+  color: #000000;
+}
+
+.grey300 {
+  background-color: #81c784;
+  color: #000000;
+}
+
+.blue400 {
+  background-color: #42a5f5;
+  color: #000000;
+}
+
+.blue800 {
+  background-color: #1565c0;
+  color: #ffffff;
+}
+
+.red100 {
+  background-color: #ffcdd2;
+  color: #000000;
+}

bookie/src/app/sales/bills/bills.component.html

@@ -1,12 +1,16 @@
 <mat-card>
   <mat-card-title-group>
     <mat-card-title>Bill</mat-card-title>
+    <a mat-button [routerLink]="['/']">
+      <mat-icon>home</mat-icon>
+      Main Menu
+    </a>
   </mat-card-title-group>
   <mat-card-content>
-    <mat-table #table [dataSource]="dataSource" aria-label="Elements">
+    <table mat-table #table [dataSource]="dataSource" aria-label="Elements" class="mat-elevation-z8">
       <!-- Info Column -->
       <ng-container matColumnDef="info">
-        <mat-cell *matCellDef="let row" fxLayout="column" fxLayoutAlign="start">
+        <mat-cell *matCellDef="let row" [class.blue800]="row.newKot">
           <span>
             {{row.info}}
           </span>
@@ -14,11 +18,12 @@
             <li *ngFor="let m of row.modifiers">{{m.name}}</li>
           </ul>
         </mat-cell>
+        <mat-footer-cell *matFooterCellDef class="grey900 bold">Amount</mat-footer-cell>
       </ng-container>
       <!-- Quantity Column -->
       <ng-container matColumnDef="quantity">
         <mat-header-cell *matHeaderCellDef>Quantity</mat-header-cell>
-        <mat-cell *matCellDef="let row" fxLayoutAlign="end">
+        <mat-cell *matCellDef="let row" class="right-align">
           <button mat-icon-button (click)="subtractOne(row)" [disabled]="row.isPrinted" *ngIf="!row.isKot">
             <mat-icon class="del">indeterminate_check_box</mat-icon>
           </button>
@@ -35,11 +40,34 @@
             <mat-icon class="del">assignment</mat-icon>
           </button>
         </mat-cell>
+        <mat-footer-cell *matFooterCellDef class="grey900 bold right-align">{{ amount() | currency: 'INR' }}</mat-footer-cell>
+      </ng-container>
+      <ng-container matColumnDef="net-title">
+        <mat-footer-cell *matFooterCellDef class="grey300 bold">Net</mat-footer-cell>
+      </ng-container>
+      <ng-container matColumnDef="net-amount">
+        <mat-footer-cell *matFooterCellDef class="grey300 bold right-align">{{ netAmount() | currency: 'INR' }}</mat-footer-cell>
+      </ng-container>
+      <ng-container matColumnDef="discount-title">
+        <mat-footer-cell *matFooterCellDef class="grey500 bold">Discount</mat-footer-cell>
+      </ng-container>
+      <ng-container matColumnDef="discount-amount">
+        <mat-footer-cell *matFooterCellDef class="grey500 bold right-align">{{ discountAmount() | currency: 'INR' }}</mat-footer-cell>
+      </ng-container>
+      <ng-container matColumnDef="tax-title">
+        <mat-footer-cell *matFooterCellDef class="grey700 bold">Tax</mat-footer-cell>
+      </ng-container>
+      <ng-container matColumnDef="tax-amount">
+        <mat-footer-cell *matFooterCellDef class="grey700 bold right-align">{{ taxAmount() | currency: 'INR' }}</mat-footer-cell>
       </ng-container>
 
-
-      <mat-row *matRowDef="let row; columns: displayedColumns;" [class.kot]="row.isKot"[class.printed]="row.isPrinted"></mat-row>
-    </mat-table>
+      <mat-row *matRowDef="let row; columns: displayedColumns;" [class.blue400]="row.oldKot" [class.blue800]="row.newKot"
+               [class.red100]="row.isPrinted"></mat-row>
+      <mat-footer-row *matFooterRowDef="['net-title', 'net-amount']"></mat-footer-row>
+      <mat-footer-row *matFooterRowDef="['discount-title', 'discount-amount']"></mat-footer-row>
+      <mat-footer-row *matFooterRowDef="['tax-title', 'tax-amount']"></mat-footer-row>
+      <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
+    </table>
   </mat-card-content>
 </mat-card>
 <router-outlet></router-outlet>

bookie/src/app/sales/bills/bills.component.ts

@@ -62,4 +62,20 @@ export class BillsComponent implements OnInit {
   modifier(item: any): void {
     this.bs.modifier(item);
   }
+
+  netAmount(): number {
+    return this.bs.netAmount();
+  }
+
+  discountAmount(): number {
+    return this.bs.discountAmount();
+  }
+
+  taxAmount(): number {
+    return this.bs.taxAmount();
+  }
+
+  amount(): number {
+    return this.bs.amount();
+  }
 }