fix(Billing): build edit , add and delete

package-lock.json

@@ -2540,7 +2540,6 @@
       "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
       "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
       "dev": true,
-      "optional": true,
       "requires": {
         "kind-of": "^3.0.2",
         "longest": "^1.0.1",
@@ -11554,15 +11553,13 @@
           "version": "1.43.0",
           "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
           "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "mime-types": {
           "version": "2.1.26",
           "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
           "integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "mime-db": "1.43.0"
           }
@@ -12121,8 +12118,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
       "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "loose-envify": {
       "version": "1.3.1",
@@ -20415,8 +20411,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -20459,8 +20454,7 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -20471,8 +20465,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -20589,8 +20582,7 @@
             "inherits": {
               "version": "2.0.4",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -20602,7 +20594,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -20632,7 +20623,6 @@
               "version": "2.9.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -20651,7 +20641,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -20741,8 +20730,7 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -20754,7 +20742,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -20840,8 +20827,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -20877,7 +20863,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -20897,7 +20882,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -20941,14 +20925,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             }
           }
         },
@@ -22032,8 +22014,7 @@
             "ansi-regex": {
               "version": "2.1.1",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -22076,8 +22057,7 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -22088,8 +22068,7 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -22206,8 +22185,7 @@
             "inherits": {
               "version": "2.0.4",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -22219,7 +22197,6 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -22249,7 +22226,6 @@
               "version": "2.9.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -22268,7 +22244,6 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -22371,7 +22346,6 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -22457,8 +22431,7 @@
             "safe-buffer": {
               "version": "5.1.2",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -22494,7 +22467,6 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -22514,7 +22486,6 @@
               "version": "3.0.1",
               "bundled": true,
               "dev": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -22558,14 +22529,12 @@
             "wrappy": {
               "version": "1.0.2",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             },
             "yallist": {
               "version": "3.1.1",
               "bundled": true,
-              "dev": true,
+              "dev": true
-              "optional": true
             }
           }
         },

src/app/@core/data/billing.ts

@@ -0,0 +1,85 @@
+export interface BillingList {
+    ebCustomerId: number;
+    customerCode: string;
+    customerCodeParent: string;
+    customerFullname: string;
+    customerShortname: string;
+    customerCoprName: string;
+    customerCoprAdd: string;
+    customerBusiness: string;
+    reconciliationName: string;
+    reconciliationHp: string;
+    reconciliationTel: string;
+    reconciliationEmail: string;
+    reconciliationAdd: string;
+    startTime: string;
+    endTime: string;
+    billTitle: number;
+    lastBillTm: string;
+    nextBillTm: string;
+    billCode: string;
+    payCycle?: number;
+    modifyTm: string;
+    isActive: number;
+    tax: number;
+    vat: number;
+    tipe: number;
+    price: number;
+    percentage: number;
+    state: string;
+    startTimeString: string;
+    endTimeString: string;
+    nextBillTimeString: string;
+    saNo: string;
+    requestType: string;
+    partnerBillCode: string;
+    itemType: string;
+    itemTypeOthers: string;
+    compName: number;
+    compIdNumber: string;
+    compIndustry: string;
+    compAddress: string;
+    compPhone: string;
+    compNoHp: string;
+    personalName: string;
+    personalJobTitle: string;
+    personalSiupNo: string;
+    personalNpwp: string;
+    personalEmail: string;
+    personalFaxNo: string;
+    personalAddress: string;
+    csName: string;
+    csAddress: string;
+    csContactName: string;
+    csHp: string;
+    csEmail: string;
+    financeName: string;
+    financeAddress: string;
+    financeContactName: string;
+    financeHp: string;
+    financeEmail: string;
+    serviceProfile: string;
+    pickupAddress: string;
+    paymentSurcharge: string;
+    paymentBillingCycle: string;
+    paymentTermOfPayment: string;
+    docCompany: string;
+    docPersonel: string;
+    signSalesName: string;
+    signSalesDate: string;
+    signVpSalesName: string;
+    signVpSalesDate: string;
+    signFinanceName: string;
+    signFinanceDate: string;
+    signVpFinanceName: string;
+    signVpFinanceDate: string;
+    partnerSignDate: string;
+    status: string;
+    ecmUrl: string;
+
+  }
+  
+  export interface RootObject {
+    billingList: BillingList[];
+  }
+  

src/app/@core/data/service-agreement.ts

@@ -0,0 +1,83 @@
+export interface ServiceAgreementList {
+    ebCustomerId: number;
+    customerCode: string;
+    customerCodeParent: string;
+    customerFullname: string;
+    customerShortname: string;
+    customerCoprName: string;
+    customerCoprAdd: string;
+    customerBusiness: string;
+    reconciliationName: string;
+    reconciliationHp: string;
+    reconciliationTel: string;
+    reconciliationEmail: string;
+    reconciliationAdd: string;
+    startTime: string;
+    endTime: string;
+    lastBillTm: string;
+    nextBillTm: string;
+    billCode: string;
+    payCycle: number;
+    modifyTm: string;
+    isActive: number;
+    tax: number;
+    tipe: number;
+    price?: number;
+    percentage: number;
+    state: string;
+    startTimeString: string;
+    endTimeString: string;
+    nextBillTimeString: string;
+    saNo: string;
+    requestType: string;
+    partnerBillCode: string;
+    itemType: string;
+    itemTypeOthers: string;
+    compName: number;
+    compIdNumber: string;
+    compIndustry: string;
+    compAddress: string;
+    compPhone: string;
+    compNoHp: string;
+    personalName: string;
+    personalJobTitle: string;
+    personalSiupNo: string;
+    personalNpwp: string;
+    personalEmail: string;
+    personalFaxNo: string;
+    personalAddress: string;
+    csName: string;
+    csAddress: string;
+    csContactName: string;
+    csHp: string;
+    csEmail: string;
+    financeName: string;
+    financeAddress: string;
+    financeContactName: string;
+    financeHp: string;
+    financeEmail: string;
+    serviceProfile: string;
+    pickupAddress: string;
+    paymentSurcharge: string;
+    paymentBillingCycle: string;
+    paymentTermOfPayment: string;
+    docCompany: string;
+    docPersonel: string;
+    signSalesName: string;
+    signSalesDate: string;
+    signVpSalesName: string;
+    signVpSalesDate: string;
+    signFinanceName: string;
+    signFinanceDate: string;
+    signVpFinanceName: string;
+    signVpFinanceDate: string;
+    partnerSignDate: string;
+    status: string;
+    ecmUrl: string;
+
+  }
+  
+  export interface RootObject {
+    serviceAgreementList: ServiceAgreementList[];
+  }
+  

src/app/pages/billing/billing-detail/billing-detail.component.html

@@ -0,0 +1,87 @@
+<div class="row">
+    <div class="col-md-4">
+      <div class="form-group">
+        <label class="label">Client</label>
+        <input nbInput fullWidth [(ngModel)]="data.customerCode" disabled>
+      </div>
+      <div class="form-group">
+        <label class="label">Partner Code</label>
+        <input nbInput fullWidth [(ngModel)]="data.customerCode" disabled>
+      </div>
+      <div class="form-group">
+        <label class="label">Partner Name</label>
+        <input nbInput fullWidth [(ngModel)]="data.customerFullname">
+      </div>
+      <div class="form-group">
+        <label class="label">Partner Short Name </label>
+        <input nbInput fullWidth [(ngModel)]="data.customerShortname">
+      </div>
+      <div class="form-group">
+            <label class="label">Start Time</label>
+            <input nbInput
+                   placeholder="Select Date"
+                   [nbDatepicker]="formpickerstart"
+                   [(ngModel)]="data.startTime">
+            <nb-datepicker #formpickerstart></nb-datepicker>
+      </div>
+      <div class="form-group">
+        <label class="label">End Time</label>
+            <input nbInput
+                   placeholder="Select Date"
+                   [nbDatepicker]="formpickerend"
+                   [(ngModel)]="data.endTime">
+            <nb-datepicker #formpickerend></nb-datepicker>
+      </div>
+    </div>
+    <div class="col-md-4">
+      <div class="form-group">
+        <label class="label">Bill Title</label>
+        <nb-card-body>
+            <nb-select [(selected)]="data.billTitle">
+              <nb-option value="1">Invoice</nb-option>
+              <nb-option value="2">Debit Note</nb-option>
+              <nb-option value="3">Surat Perintah Penagihan</nb-option>
+            </nb-select>
+          </nb-card-body>
+      </div>
+      <div class="form-group">
+        <label class="label">Bill Code</label>
+        <input nbInput fullWidth [(ngModel)]="data.billCode">
+      </div>
+      <div class="form-group">
+        <label class="label">Next Billing Time</label>
+            <input nbInput
+                   placeholder="Select Date"
+                   [nbDatepicker]="formpickernextbilling"
+                   [(ngModel)]="data.nextBillTm">
+            <nb-datepicker #formpickernextbilling></nb-datepicker>
+      </div>
+      <div class="form-group">
+        <label class="label">Tax</label>
+        <nb-radio-group [(value)]="data.tax">
+            <nb-radio
+              [value]="1">
+              Exclude
+            </nb-radio>
+            <nb-radio
+              [value]="2">
+              Include
+            </nb-radio>
+          </nb-radio-group>
+      </div>
+      <div class="form-group">
+        <label class="label">VAT</label>
+        <input nbInput [(ngModel)]="data.vat"> %
+      </div>
+      <div class="form-group">
+        <label class="label">Insurance</label>
+        Rp.<input nbInput [(ngModel)]="data.price">
+        <input nbInput fullWidth [(ngModel)]="data.percentage">%
+      </div>
+    </div>
+    <div class="form-group row">
+      <div class="col-md-4">
+        <button (click)="onSubmit()" type="submit" nbButton status="primary">Submit</button>
+      </div>
+    </div>
+  </div>

src/app/pages/billing/billing-detail/billing-detail.component.scss

@@ -0,0 +1,12 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  ::ng-deep .form {
+    display: flex;
+    flex-direction: column;
+
+    .text-label {
+      margin-top: 1.5rem;
+    }
+  }
+}

src/app/pages/billing/billing-detail/billing-detail.component.ts

@@ -0,0 +1,43 @@
+import { Component, Inject, Input } from '@angular/core';
+import { NbWindowRef, NB_WINDOW_CONTEXT } from '@nebular/theme';
+import { BillingList } from '../../../@core/data/billing';
+import { BillingService } from '../billing.service';
+
+@Component({
+  selector: 'ngx-billing-detail',
+  templateUrl: './billing-detail.component.html',
+  styleUrls: ['billing-detail.component.scss'],
+})
+export class BillingDetailComponent {
+
+  @Input() data: BillingList;
+  constructor(private service: BillingService, public windowRef: NbWindowRef, @Inject(NB_WINDOW_CONTEXT) context) {
+    if (context != null) {
+      this.data = Object.assign({}, context.data);
+    }
+  }
+
+  onSubmit(){
+    console.log('isi json',this.data.billTitle)
+    let temp = this.data.billTitle
+    this.data.state = 'updated'
+    this.data.billTitle = Math.floor(temp)
+    console.log('after', this.data)
+    this.service.postBilling(this.data).subscribe((value) => {
+      this.close();
+    });
+  }
+
+  close() {
+    this.windowRef.close();
+  }
+
+  numberOnly(event): boolean {
+    const charCode = (event.which) ? event.which : event.keyCode;
+    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
+      return false;
+    }
+    return true;
+
+  }
+}

src/app/pages/billing/billing.component.html

@@ -0,0 +1,12 @@
+<nb-card>
+    <nb-card-header>
+      Billing - 90%
+    </nb-card-header>
+  
+    <nb-card-body>
+      <ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)"
+      (createConfirm)="onCreateConfirm($event)" (editConfirm)="onCreateConfirm($event)"
+      (userRowSelect)="openWindowForm($event)">
+      </ng2-smart-table>
+    </nb-card-body>
+  </nb-card>

src/app/pages/billing/billing.component.scss

@@ -0,0 +1,7 @@
+@import '../../@theme/styles/themes';
+
+@include nb-install-component() {
+  nb-card {
+    transform: translate3d(0, 0, 0);
+  }
+}

src/app/pages/billing/billing.component.ts

@@ -0,0 +1,95 @@
+import { Component, OnInit } from '@angular/core';
+import { BillingList } from '../../@core/data/billing';
+import { BillingService } from './billing.service';
+import { BillingDetailComponent } from './billing-detail/billing-detail.component';
+import { NbWindowService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-billing',
+  templateUrl: './billing.component.html',
+  styleUrls: ['./billing.component.scss'],
+})
+export class BillingComponent implements OnInit {
+
+  settings = {
+    mode: 'inline',
+    add: {
+      addButtonContent: '<i class="nb-plus"></i>',
+      createButtonContent: '<i class="nb-checkmark"></i>',
+      cancelButtonContent: '<i class="nb-close"></i>',
+    },
+    edit: {
+      editButtonContent: '<i class="nb-edit"></i>',
+      saveButtonContent: '<i class="nb-checkmark"></i>',
+      cancelButtonContent: '<i class="nb-close"></i>',
+    },
+    delete: {
+      deleteButtonContent: '<i class="nb-trash"></i>',
+      confirmDelete: true,
+    },
+    columns: {
+      customerCode: {
+        title: 'Partner Code',
+        type: 'string',
+      },
+      customerFullname: {
+        title: 'Partner Name',
+        type: 'string',
+      },
+      nextBillTimeString: {
+        title: 'Next Billing',
+        type: 'string',
+      },
+    },
+  };
+
+  source: BillingList[] = [];
+
+  constructor(private service: BillingService, private windowService: NbWindowService) {
+  }
+
+  ngOnInit(): void {
+    this.initData();
+  }
+  initData(){
+    this.service.getBilling().subscribe((result) => {
+      this.source = Object.assign([], result);
+      console.log('test', result);
+    });
+  }
+  onCreateConfirm(event) {
+    if (window.confirm('Are you sure you want to save?')) {
+      event.newData.status = 1;
+      this.service.postBilling(event.newData).subscribe((value) => {
+        this.initData();
+      });
+      event.confirm.resolve(event.newData);
+    } else {
+      event.confirm.reject();
+    }
+  }
+
+  onDeleteConfirm(event): void {
+    if (window.confirm('Are you sure you want to delete?')) {
+      this.service.deleteBilling(event.data).subscribe((value) => {
+        this.initData();
+      });
+      event.confirm.resolve();
+    } else {
+      event.confirm.reject();
+    }
+  }
+  
+  openWindowForm(event) {
+    
+    let temp = event.data.billTitle.toString()
+    event.data.billTitle = temp
+    console.log('data kirim', event.data)
+    this.windowService.open(BillingDetailComponent, {
+      title: 'Billing Detail',
+      context: {
+        data: event.data,
+      },
+    });
+  }
+}

src/app/pages/billing/billing.module.ts

@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { NbCardModule,
+  NbIconModule,
+  NbInputModule,
+  NbTreeGridModule,
+  NbButtonModule,
+  NbCheckboxModule,
+  NbRadioModule, 
+  NbSelectModule,
+  NbDatepickerModule} from '@nebular/theme';
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+
+import { ThemeModule } from '../../@theme/theme.module';
+import { BillingComponent } from './billing.component';
+import { BillingService } from './billing.service';
+import { BillingDetailComponent } from './billing-detail/billing-detail.component';
+import { FormsModule } from '@angular/forms';
+@NgModule({
+  imports: [
+    NbCardModule,
+    NbTreeGridModule,
+    NbIconModule,
+    NbInputModule,
+    ThemeModule,
+    NbButtonModule,
+    NbRadioModule,
+    NbCheckboxModule,
+    Ng2SmartTableModule,
+    FormsModule,
+    NbSelectModule,
+    NbDatepickerModule,
+  ],
+  declarations: [
+    BillingComponent,
+    BillingDetailComponent,
+  ],
+  providers: [
+    BillingService,
+    BillingDetailComponent,
+  ],
+  entryComponents: [
+    BillingDetailComponent,
+  ],
+})
+export class BillingModule { }

src/app/pages/billing/billing.service.ts

@@ -0,0 +1,104 @@
+import {Injectable} from '@angular/core';
+import {HttpClient,  HttpHeaders} from '@angular/common/http';
+import {Observable, throwError} from 'rxjs';
+import {map, catchError} from 'rxjs/operators';
+import {HttpErrorResponse} from '@angular/common/http';
+import { BillingList } from '../../@core/data/billing';
+import { DatePipe } from '@angular/common'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BillingService {
+  constructor(private http: HttpClient, public datepipe: DatePipe) {
+  }
+
+  postData = {
+    start: 0,
+    sort: '',
+    length: 20,
+    column: 'startTime',
+    customerCode: '',
+    customerFullname: '',
+    customerBusiness: '',
+    payCycle: '',
+    nextBillTmFirst: '',
+    nextBillTmLast: '',
+    isActive: '1'
+  };
+  
+  json;
+  getBilling(): Observable<any> { 
+    const url = 'http://34.87.6.140:8011/api/customerStatic/pagingSearchParamBilling?start=0&sort=desc&length=20&column=startTime&customerCode=&customerFullname=&customerBusiness=&payCycle=&nextBillTmFirst=&nextBillTmLast=&isActive=1';
+    // const options = { headers: headers};
+    return this.http.post(url, null).pipe(
+      map(this.extractData),
+      catchError(this.handleError),
+    );
+    // '?start=' + this.postData.start + '&sort='+ this.postData.sort +
+    // '&length=' + this.postData.length + '&column=' + this.postData.column + '&customerCode=' +
+    // this.postData.customerCode + '&customerFullname=' + this.postData.customerFullname + 
+    // '&customerBusiness=' + this.postData.customerBusiness + '&payCycle=' + this.postData.payCycle +
+    // '&nextBillTmFirst=' + this.postData.nextBillTmFirst + '&nextBillTmLast='+ this.postData.nextBillTmLast +
+    // '&isActive=' + this.postData.isActive 
+  }
+  // params: [{ start: 0, sort: '', length: 20, column: 'startTime', customerCode: '', customerFullname: ''
+  // ,  customerBusiness: '', payCycle: '', nextBillTmFirst: '', nextBillTmLast: '', isActive: '1'}]
+  private extractData(body: any): BillingList[] {
+    console.log('coba', body.content)
+    return Object.assign(body.content);
+  }
+
+  postBilling(data: BillingList): Observable<any> {
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'X-Requested-Method': 'POST',
+    });
+    console.log('isiiii', data.ebCustomerId)
+    const id = data.ebCustomerId
+    let nextBill_date =this.datepipe.transform(data.nextBillTm, 'yyyy-MM-dd'+'T'+'HH:mm:ss.SSS');
+    let endTime_date =this.datepipe.transform(data.endTime, 'yyyy-MM-dd'+'T'+'HH:mm:ss.SSS');
+    let startTime_date =this.datepipe.transform(data.startTime, 'yyyy-MM-dd'+'T'+'HH:mm:ss.SSS');
+    let modifyTm_date =this.datepipe.transform(data.modifyTm, 'yyyy-MM-dd'+'T'+'HH:mm:ss.SSS');
+    data.nextBillTm = nextBill_date
+    data.endTime = endTime_date
+    data.startTime = startTime_date
+    data.modifyTm = modifyTm_date
+    console.log('isi tanggal' ,data)
+    const options = { headers: headers };
+    const url = 'http://34.87.6.140:8011/api/customerStatic/insertData';
+    return this.http.post(url, JSON.stringify(data) , options).pipe(
+      catchError(this.handleError),
+    );
+  }
+
+  deleteBilling(data: BillingList): Observable<any> {
+    const id = data.ebCustomerId;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'X-Requested-Method': 'PUT',
+    });
+    const options = { headers: headers };
+    const url = 'http://34.87.6.140:8011/api/customerStatic/delete';
+    return this.http.put(url, id, options).pipe(
+      catchError(this.handleError),
+    );
+  }
+ 
+  private handleError(error: HttpErrorResponse | any) {
+    let errMsg: string;
+    let errObj: any;
+
+    if (error instanceof HttpErrorResponse) {
+      const err = error.message || JSON.stringify(error);
+      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+      errObj = error.error.message;
+    } else {
+      errMsg = error.message ? error.message : error.toString();
+      const body = error.message || '';
+      errObj = body;
+    }
+
+    return throwError(errObj);
+  }
+}

src/app/pages/pages-routing.module.ts

@@ -5,6 +5,8 @@ import {PagesComponent} from './pages.component';
 import {NotFoundComponent} from './miscellaneous/not-found/not-found.component';
 import {PromotionComponent} from './promotion/promotion.component';
 import { PartnerPriceComponent } from './partner-price/partner-price.component';
+import {BillingComponent} from './billing/billing.component';
+import {ServiceAgreementComponent} from './service-agreement/sa.component';
 
 const routes: Routes = [{
   path: '',
@@ -20,7 +22,7 @@ const routes: Routes = [{
     },
     {
       path: 'service-agreement',
-      component: NotFoundComponent,
+      component: ServiceAgreementComponent,
     },
     {
       path: 'partner-branch',
@@ -28,7 +30,7 @@ const routes: Routes = [{
     },
     {
       path: 'billing',
-      component: NotFoundComponent,
+      component: BillingComponent,
     },
   ],
 }];

src/app/pages/promotion/promotion.component.ts

@@ -61,6 +61,7 @@ export class PromotionComponent implements OnInit {
   initData() {
     this.service.getPromotion().subscribe((result) => {
       this.source = Object.assign([], result);
+      console.log('test', result);
     });
   }
 

src/app/pages/service-agreement/sa.component.html

@@ -0,0 +1,13 @@
+<button type="button" class=".btn" data-toggle="modal" data-target="#myModal">
+  Launch demo modal
+</button>
+<nb-card>
+    <nb-card-header>
+      Service Agreement
+    </nb-card-header>
+   
+    <nb-card-body>
+      <ng2-smart-table [settings]="settings" [source]="source" (deleteConfirm)="onDeleteConfirm($event)">
+      </ng2-smart-table>
+    </nb-card-body>
+  </nb-card>

src/app/pages/service-agreement/sa.component.scss

@@ -0,0 +1,7 @@
+@import '../../@theme/styles/themes';
+
+@include nb-install-component() {
+  nb-card {
+    transform: translate3d(0, 0, 0);
+  }
+}

src/app/pages/service-agreement/sa.component.ts

@@ -0,0 +1,75 @@
+import { Component, OnInit } from '@angular/core';
+import { LocalDataSource } from 'ng2-smart-table';
+import { NbWindowService } from '@nebular/theme';
+
+import { SmartTableData } from '../../@core/data/smart-table';
+import { ServiceAgreementList } from '../../@core/data/service-agreement';
+import { ServiceAgreementService } from './sa.service';
+import { ServiceAgreementDetailComponent } from './service-agreement-detail/service-agreement-detail.component';
+
+@Component({
+  selector: 'ngx-sa',
+  templateUrl: './sa.component.html',
+  styleUrls: ['./sa.component.scss'],
+})
+export class ServiceAgreementComponent implements OnInit{
+
+  settings = {
+    add: {
+      addButtonContent: '<i class="nb-plus"></i>',
+      createButtonContent: '<i class="nb-checkmark"></i>',
+      cancelButtonContent: '<i class="nb-close"></i>',
+    },
+    edit: {
+      editButtonContent: '<i class="nb-edit"></i>',
+      saveButtonContent: '<i class="nb-checkmark"></i>',
+      cancelButtonContent: '<i class="nb-close"></i>',
+    },
+    delete: {
+      deleteButtonContent: '<i class="nb-trash"></i>',
+      confirmDelete: true,
+    },
+    columns: {
+      customerCode: {
+        title: 'Partner Code',
+        type: 'string',
+      },
+      customerFullname: {
+        title: 'Partner Name',
+        type: 'string',
+      },
+      customerBusiness: {
+        title: 'Business',
+        type: 'string',
+      },
+      status: {
+        title: 'Status',
+        type: 'string',
+      }
+    },
+  };
+
+  source: ServiceAgreementList[] = [];
+
+  constructor(private service: ServiceAgreementService, private windowService: NbWindowService) {
+    console.log('test', this.source);
+  }
+
+  ngOnInit(): void {
+    this.service.getServiceAgreement().subscribe((result) => {
+      this.source = Object.assign([], result);
+    });
+  }
+
+  onDeleteConfirm(event): void {
+    if (window.confirm('Are you sure you want to delete?')) {
+      event.confirm.resolve();
+    } else {
+      event.confirm.reject();
+    }
+  }
+    
+  openWindowForm() {
+    this.windowService.open(ServiceAgreementDetailComponent, { title: `Service Agreement Detail` });
+  }
+}

src/app/pages/service-agreement/sa.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { NbCardModule, NbIconModule, NbInputModule, NbTreeGridModule } from '@nebular/theme';
+import { Ng2SmartTableModule } from 'ng2-smart-table';
+
+import { ThemeModule } from '../../@theme/theme.module';
+import { ServiceAgreementComponent } from './sa.component';
+import { ServiceAgreementService } from './sa.service';
+import { ServiceAgreementDetailComponent } from './service-agreement-detail/service-agreement-detail.component';
+
+@NgModule({
+  imports: [
+    NbCardModule,
+    NbTreeGridModule,
+    NbIconModule,
+    NbInputModule,
+    ThemeModule,
+    Ng2SmartTableModule,
+  ],
+  declarations: [
+    ServiceAgreementComponent,
+    ServiceAgreementDetailComponent,
+  ],
+  providers: [
+    ServiceAgreementService,
+  ],
+  entryComponents: [
+    ServiceAgreementDetailComponent,
+  ],
+})
+export class ServiceAgreementModule { }

src/app/pages/service-agreement/sa.service.ts

@@ -0,0 +1,51 @@
+import {Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from '@angular/common/http';
+import {Observable, throwError} from 'rxjs';
+import {map, catchError} from 'rxjs/operators';
+import {HttpErrorResponse} from '@angular/common/http';
+import { ServiceAgreementList } from '../../@core/data/service-agreement';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ServiceAgreementService {
+  constructor(private http: HttpClient) {
+  }
+  url = 'http://localhost:8011/api/customerStatic/pagingSearchParam?start=0&sort=desc&length=20&column=startTime&customerCode=&customerFullname=&customerBusiness=&payCycle=&isActive=';
+  json;
+  getServiceAgreement(): Observable<any> {  
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'X-Requested-Method': 'POST',
+    }); 
+    const options = { headers: headers };
+    return this.http.post(this.url, null).pipe(
+      map(this.extractData),
+      catchError(this.handleError),
+    );
+    
+    
+  }
+
+  private extractData(body: any): ServiceAgreementList[] {
+    // console.log('test', body.serviceAgreementList);
+    return Object.assign(body.content);
+  }
+
+  private handleError(error: HttpErrorResponse | any) {
+    let errMsg: string;
+    let errObj: any;
+
+    if (error instanceof HttpErrorResponse) {
+      const err = error.message || JSON.stringify(error);
+      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
+      errObj = error.error.message;
+    } else {
+      errMsg = error.message ? error.message : error.toString();
+      const body = error.message || '';
+      errObj = body;
+    }
+
+    return throwError(errObj);
+  }
+}

src/app/pages/service-agreement/service-agreement-detail/service-agreement-detail.component.html

@@ -0,0 +1,81 @@
+<div class="row">
+    <div class="col-md-4">
+      <div class="form-group">
+        <label for="exampleInputEmail1" class="label">Partner Code</label>
+        <input nbInput fullWidth id="exampleInputEmail1" [(ngModel)]="data.customerID">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">User Id</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.customerID">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputEmail1" class="label">Promo Type</label>
+        <input nbInput fullWidth id="exampleInputEmail1" [(ngModel)]="data.promotionType">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">Periode </label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.validDay">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputEmail1" class="label">Coupon Code</label>
+        <input nbInput fullWidth id="exampleInputEmail1" [(ngModel)]="data.code">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">Valid Start</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.validFrom">
+      </div>
+    </div>
+    <div class="col-md-4">
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">Valid End</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.validTo">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">Promo</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.value">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputEmail1" class="label">Max. Promo</label>
+        <input nbInput fullWidth id="exampleInputEmail1" [(ngModel)]="data.maximumDiscount">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputEmail1" class="label">Quota per User</label>
+        <input nbInput fullWidth id="exampleInputEmail1" [(ngModel)]="data.maximumPerUser">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">User Type</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.customerType">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">Coverage Pickup</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.coverage">
+      </div>
+    </div>
+    <div class="col-md-4">
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">Product</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.product">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">Promo (IDR)</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.value">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">Promo (%)</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.value">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">Max. Promo</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.maximumDiscountValue">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">Budget</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.maximumDiscount">
+      </div>
+      <div class="form-group">
+        <label for="exampleInputPassword1" class="label">Quota</label>
+        <input nbInput fullWidth id="exampleInputPassword1" [(ngModel)]="data.quota">
+      </div>
+      <button (click)="onSubmit()" type="submit" nbButton status="primary">Submit</button>
+    </div>
+  </div>

src/app/pages/service-agreement/service-agreement-detail/service-agreement-detail.component.scss

@@ -0,0 +1,12 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  ::ng-deep .form {
+    display: flex;
+    flex-direction: column;
+
+    .text-label {
+      margin-top: 1.5rem;
+    }
+  }
+}

src/app/pages/service-agreement/service-agreement-detail/service-agreement-detail.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { NbWindowRef } from '@nebular/theme';
+
+@Component({
+  template: `
+    <form class="form">
+      <label for="subject">Subject:</label>
+      <input nbInput id="subject" type="text">
+
+      <label class="text-label" for="text">Text:</label>
+      <textarea nbInput id="text"></textarea>
+    </form>
+  `,
+  styleUrls: ['service-agreement-detail.component.scss'],
+})
+export class ServiceAgreementDetailComponent {
+  constructor(public windowRef: NbWindowRef) {}
+
+  close() {
+    this.windowRef.close();
+  }
+}