Moved to Angular 6.0

----

Pending
* Table width for the points column in incentive
* Linting
* keyboard navigation where it was used earlier
* can remove the unused totals calculated serverside in productledger
* spinner and loading bars
* Activate Guard for Employee Function tabs
* Progress for Fingerprint uploads
* deleted reconcile and receipe features as they were not being used
* focus the right control on component load

overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.ts

@@ -0,0 +1,73 @@
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+
+import {CostCentreService} from '../cost-centre.service';
+import {CostCentre} from '../cost-centre';
+import {ActivatedRoute, Router} from '@angular/router';
+import {ToasterService} from '../../core/toaster.service';
+import {FormBuilder, FormGroup} from '@angular/forms';
+
+@Component({
+  selector: 'app-cost-centre-detail',
+  templateUrl: './cost-centre-detail.component.html',
+  styleUrls: ['./cost-centre-detail.component.css']
+})
+export class CostCentreDetailComponent implements OnInit, AfterViewInit {
+  @ViewChild('nameElement') nameElement: ElementRef;
+  form: FormGroup;
+  item: CostCentre;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private fb: FormBuilder,
+    private toaster: ToasterService,
+    private ser: CostCentreService
+  ) {
+    this.createForm();
+  }
+
+  createForm() {
+    this.form = this.fb.group({
+      name: ''
+    });
+  }
+
+  ngOnInit() {
+    this.route.data
+      .subscribe((data: { item: CostCentre }) => {
+        this.showItem(data.item);
+      });
+  }
+
+  showItem(item: CostCentre) {
+    this.item = item;
+    this.form.setValue({
+      name: this.item.name,
+    });
+  }
+
+  ngAfterViewInit() {
+    setTimeout(() => {
+      this.nameElement.nativeElement.focus();
+    }, 0);
+  }
+
+  save() {
+    this.ser.saveOrUpdate(this.getItem())
+      .subscribe(
+        (result) => {
+          this.toaster.show('Success', '');
+          this.router.navigateByUrl('/CostCentres');
+        },
+        (error) => {
+          this.toaster.show('Danger', error.error);
+        }
+      );
+  }
+
+  getItem(): CostCentre {
+    const formModel = this.form.value;
+    this.item.name = formModel.name;
+    return this.item;
+  }
+}