create user agent and behavior create tiket agent

src/app/admin/admin-dashboard-logbooks/admin-dashboard-logbooks.component.css

+.jumbotron{
+    background: url('../../../assets/StoredImage/DahsboardJumbotron.png') no-repeat center center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: 100%;
+    margin-top:0px;
+    /*border: 1px solid #ccc;*/
+}
+
+.container-01{
+    border: 2px solid #ccc;
+    border-radius:3px;
+}
+
+.dashboardBox{
+    padding: 8px;
+    border: 1px solid transparent;
+    text-align: center;
+    border-radius: 5px;
+    margin: 5px 0;
+}
+
+.ticketTect{
+    font-size: 11px;
+    font-weight: bold;
+}
+
+.downloadExportDashboard{
+    top: 0;
+    right: 0;
+    position: absolute;
+    cursor: pointer;
+    color: #636e72;
+    margin-right: 10px;
+    background: #fff;
+    /* border: 1px solid #ccc; */
+    border-radius: 50%;
+    padding: 5px 8px;
+    font-size: 12px;
+}
+
+.downloadExportDashboard:hover{
+    color: #222;
+}
+
+
+
+
+
+
+.TabsCustomTitle{
+    background: transparent;
+    margin: 2px;
+    color: #222;
+    padding: 3px 30px;
+    border-bottom: 3px solid #ebe9e9;
+    cursor: pointer;
+    word-wrap: break-word;
+    display: inline-block;
+    font-size: 13px;
+    font-weight: 900;
+    text-transform: uppercase;
+}
+
+    .TabsCustomTitle:hover{
+        color: #222;
+        border-bottom: 3px solid #d18b5d;
+    }
+
+    .TabsCustomTitle.active{
+        color: #222;
+        border-bottom: 3px solid #e67e22;
+    }
+
+.TabsCustom{
+    background: transparent;
+    margin: 2px;
+    color: #222;
+    padding: 3px 20px;
+    border-bottom: 3px solid #ebe9e9;
+    cursor: pointer;
+    word-wrap: break-word;
+    display: inline-block;
+    font-size: 12px;
+}
+
+    .TabsCustom:hover{
+        color: #222;
+        border-bottom: 3px solid #7e8389;
+    }
+
+    .TabsCustom.active{
+        color: #222;
+        border-bottom: 3px solid #2c3e50;
+    }
+

src/app/admin/admin-dashboard-logbooks/admin-dashboard-logbooks.component.html

+<div class="container" style="margin-top: -20px;">
+  <div class="row">
+    <div class="col-12 col-sm-6 col-md-4 col-lg-8">
+      <p style="font-size: 15px;">DASHBOARD</p>
+    </div>
+    <div class="col-12 col-sm-6 col-md-4 col-lg-2" 
+    [ngClass]="{'d-none': (RoleID != _SP.PARAM_SERVICEDESK && RoleID != _SP.PARAM_SPV && 
+    (TeamID != Env.Team.SociomileStaff && TeamID != Env.Team.CsCabangBranchAgent) && TeamID != Env.Team.ServiceReport )}">
+        <div class="form-group" >
+          <label class="text-muted"><small>Start Date </small></label>
+          <div class="input-group date" id="StartDate" data-target-input="nearest">
+          <input type="text"
+            class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
+            data-target="#StartDate" (blur)="GettingDashboardCardColorsDataAPI()"/>
+          <div class="input-group-append" data-target="#StartDate" data-toggle="datetimepicker">
+            <div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
+          </div>
+          </div>
+        </div>
+    </div>
+    <div class="col-12 col-sm-6 col-md-4 col-lg-2" 
+    [ngClass]="{'d-none': (RoleID != _SP.PARAM_SERVICEDESK && RoleID != _SP.PARAM_SPV 
+    && (TeamID != Env.Team.SociomileStaff && TeamID != Env.Team.CsCabangBranchAgent) && TeamID != Env.Team.ServiceReport )}">
+      <div class="form-group">
+        <label class="text-muted"><small>End Date </small></label>
+        <div class="input-group date" id="EndDate" data-target-input="nearest">
+          <input type="text"
+            class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
+            data-target="#EndDate" (blur)="GettingDashboardCardColorsDataAPI()"/>
+          <div class="input-group-append" data-target="#EndDate" data-toggle="datetimepicker">
+            <div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <p *ngIf="isDashboardCardEmpty" style="font-size:18px;" class="text-muted text-center">
+    <i class="far fa-chart-bar  fa-3x"></i> 
+    <br> Upss... no Dashboard!
+  </p>
+  <p *ngIf="isDashboardCardLoading" style="font-size:18px;" class="text-muted text-center">
+    <i class="fas fa-spinner fa-spin"></i> 
+    Retrieving data
+  </p>
+  
+  <ng-container *ngIf="!isDashboardCardEmpty && !isDashboardCardLoading">
+    <div class="row">
+      <ng-container *ngFor="let data of dashboardListCard; let i = index">
+        <div class="col-12 col-sm-6 col-md-4 col-lg-2">
+          <div class="dashboardBox" [ngStyle]="{'background-color': data.colour,'color': '#fff'}">
+            <p class="downloadExportDashboard" 
+            *ngIf="(data.Count != 0) && (RoleID == _SP.PARAM_SPV || RoleID == _SP.PARAM_SERVICEDESK)" 
+            (click)="GettingExcelForDashboardDataAPI(i)">
+            <i class="fas fa-download"></i>
+            </p>
+            <p class="m-0 p-0">
+              {{data.Count}}
+            </p>
+            <p class="m-0 p-0 ticketTect">{{data.Name}}</p>
+          </div>
+        </div>
+      </ng-container>
+    </div>
+  </ng-container>
+
+  <br>
+
+  <app-logbooks [DashboardCountRequest]="DashboardCountRequest" [startDate]="startDate" [endDate]="endDate"></app-logbooks>
+
+</div>
+  

src/app/admin/admin-dashboard-logbooks/admin-dashboard-logbooks.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminDashboardLogbooksComponent } from './admin-dashboard-logbooks.component';
+
+describe('AdminDashboardLogbooksComponent', () => {
+  let component: AdminDashboardLogbooksComponent;
+  let fixture: ComponentFixture<AdminDashboardLogbooksComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AdminDashboardLogbooksComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdminDashboardLogbooksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/admin-dashboard-logbooks/admin-dashboard-logbooks.component.ts

+import { Component, OnInit,Injector, ViewChildren, ViewChild } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+import { FormBuilder, FormGroup  } from '@angular/forms';
+import { DashboardService } from '../../../shared/serviceproxy/service-proxy.service';
+import { ServiceProxyWeb } from '../../../shared/serviceproxy/service-proxy.service';
+import { Data, Router } from '@angular/router';
+import { ChangeDetectorRef } from '@angular/core';
+import { environment } from '../../../environments/environment.prod';
+import { Http, ResponseContentType, RequestOptions } from '@angular/http';
+import * as $ from 'jquery';
+import { resolve } from 'url';
+declare const AratakaConfig : any;
+
+@Component({
+  selector: 'app-admin-dashboard-logbooks',
+  templateUrl: './admin-dashboard-logbooks.component.html',
+  styleUrls: ['./admin-dashboard-logbooks.component.css']
+})
+export class AdminDashboardLogbooksComponent implements OnInit {
+
+  public TeamID = this._SP.getUserInformation.values.team_id
+  public RoleID = this._SP.getUserInformation.values.roles[0].id
+  public Env = environment;
+  public appMaintenance = "assets/StoredImage/matains-logo.png"
+  public SiteName = this._SP.SITE_NAME
+  public Username : string  = (this._SP.getUserInformation != null)? this._SP.getUserInformation.values.contact_name : '';
+
+  public DashboardCountRequest = {
+    user_id : null,
+    start_date : null,
+    end_date : null,
+    type_id: 1
+  }
+
+  isDashboardCardEmpty: boolean = false;
+  isDashboardCardLoading: boolean = true;
+
+  dashboardListCard: any[] = [];
+
+  startDate: string = "";
+  endDate: string = "";
+
+  constructor(
+    private _cRef: ChangeDetectorRef,
+    private router: Router,
+    private FormBuilder : FormBuilder, 
+    private _DashboardService : DashboardService,
+    public _SP : ServiceProxyWeb
+  ) { }
+
+  ngOnInit() {
+    var StartD= new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
+    StartD.setMonth(StartD.getMonth() -6)
+    var EndD = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
+
+    AratakaConfig.BootstrapDateRangeCustomPicker({
+      StartDate : {
+          ID : '#StartDate',
+          DateValue :  StartD,
+          Format : 'DD MMMM YYYY',
+      },
+      EndDate : {
+          ID :'#EndDate',
+          DateValue : EndD,
+          Format : 'DD MMMM YYYY',
+      },
+    })
+    
+    if (this.RoleID == this._SP.PARAM_SPV) {
+      this.DashboardCountRequest.user_id = null
+    } else {
+      this.DashboardCountRequest.user_id = this._SP.getUserInformation.values.user_id
+    }
+
+    this.DashboardCountRequest.start_date = AratakaConfig.GetDateBDTP({ ID: '#StartDate', isGet: true, isGetFormat: 'YYYY-MM-DD'});
+    this.DashboardCountRequest.end_date = AratakaConfig.GetDateBDTP({ ID: '#EndDate', isGet: true, isGetFormat: 'YYYY-MM-DD' });
+    this.GettingDashboardCardColorsDataAPI()
+  }
+
+  RandomColorPicker() {
+    const color = [
+      "#EF3D59", "#E17A47", "#EFC958", "#4AB19D", "#344E5C", "#F26627", "#F9A26C", "#9BD7D1",
+      "#DDA5B6", "#F2CC8C", "#3F6A8A", "#4D5E72", "#CC2A49", "#F99E4C", "#F36F38", "#EF4648",
+      "#8FB9A8", "#F1828D", "#765D69", "#FCBB6D", "#AB6C82", "#685D79", "#66a6ff", "#48c6ef ",
+    ];
+    return color[Math.floor(Math.random() * color.length)];
+  }
+
+  GettingDashboardCardColorsDataAPI() {
+    this.startDate =  AratakaConfig.BootstrapDateCustomPicker({ ID: '#StartDate', isGet: true, isGetFormat: 'YYYY-MM-DD'});
+    this.endDate = AratakaConfig.BootstrapDateCustomPicker({ ID: '#EndDate', isGet: true, isGetFormat: 'YYYY-MM-DD' });
+    if(this._SP.getUserInformation.values.team_id == this.Env.Team.ServiceReport) this.DashboardCountRequest.user_id = null;
+    this.dashboardListCard = [];
+    this.isDashboardCardLoading = true;
+    this.isDashboardCardEmpty = false;
+    this._DashboardService.Counting(this.DashboardCountRequest)
+      .subscribe((result: any) => {
+        if(result.values != undefined){
+          this.dashboardListCard = result.values;
+          var that = this;
+          this.dashboardListCard.map(function(x, index){
+            x.colour = that.RandomColorPicker();
+            x.selected = false;
+          })
+          this.dashboardListCard[0].selected = true;
+          this.isDashboardCardEmpty = false;
+        } else {
+          this.isDashboardCardEmpty = true;
+        }
+        this.isDashboardCardLoading = false;
+      },
+      (err: HttpErrorResponse) => {
+        this.isDashboardCardLoading = false;
+        this.isDashboardCardEmpty = true;
+      });
+  }
+
+  GettingExcelForDashboardDataAPI(_i: number){
+    let userID = null
+    if (this.RoleID == this._SP.PARAM_SPV) userID = null;
+    else userID = this._SP.getUserInformation.values.user_id;
+
+    let request = {
+      user_id : userID,
+      user_name :  this._SP.getUserInformation.values.contact_name,
+      start_date : this.DashboardCountRequest.start_date,
+      end_date : this.DashboardCountRequest.end_date,
+      type_id : this.dashboardListCard[_i].TypeId,
+      type_name :  this.dashboardListCard[_i].Name,
+    }
+
+    AratakaConfig.LoadingPage.showLoading('Please wait.., perparing excel.')
+    this._DashboardService.downloadFileExcelDashboard(request)
+      .subscribe((result: any) => {
+        const blob = new Blob([result], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+        const fileName: string = request.type_name + '-' + new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '') +'.xlsx';
+        const objectUrl: string = URL.createObjectURL(blob);
+        const a: HTMLAnchorElement = document.createElement('a') as HTMLAnchorElement;
+
+        a.href = objectUrl;
+        a.download = fileName;
+        document.body.appendChild(a);
+        a.click();        
+
+        document.body.removeChild(a);
+        URL.revokeObjectURL(objectUrl);
+        AratakaConfig.LoadingPage.hideLoading()
+      },
+      (err: HttpErrorResponse) => {
+        AratakaConfig.LoadingPage.hideLoading()
+      });
+  }
+
+}

src/app/admin/admin-dashboard-logbooks/logbooks-report/logbooks-report.component.css

+
+.downloadExportReport{
+    border: 1px solid #607D8B;
+    padding: 5px 10px;
+    border-radius: 3px;
+    float: right;
+    font-size: 12px;
+    background: #607D8B;
+    color: #fff;
+    cursor: pointer;
+    margin: 0 10px 30px 0;
+    }
+    
+    .downloadExportReport:hover{
+        color: #ffffff;
+        background-color:#263238 ;
+    }
+
+       
+.Table-Background{
+    /* border: 2px solid #ebe9e9; */
+    padding: 20px 5px;
+    margin: 10px;
+    /* border-radius: 10px; */
+}
+
+.table th {
+    vertical-align: middle;
+}
+
+.table td, .table th {
+    min-width: 150px;
+}
+
+.table td:first-child, .table th:first-child {
+    min-width: 20px;
+}
\ No newline at end of file

src/app/admin/admin-dashboard-logbooks/logbooks-report/logbooks-report.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogbooksReportComponent } from './logbooks-report.component';
+
+describe('LogbooksReportComponent', () => {
+  let component: LogbooksReportComponent;
+  let fixture: ComponentFixture<LogbooksReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LogbooksReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogbooksReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/admin-dashboard-logbooks/logbooks/logbooks.component.css

+.jumbotron{
+    background: url('../../../../assets/StoredImage/DahsboardJumbotron.png') no-repeat center center;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: 100%;
+    margin-top:0px;
+    /*border: 1px solid #ccc;*/
+}
+
+.container-01{
+    border: 2px solid #ccc;
+    border-radius:3px;
+}
+
+.dashboardBox{
+    padding: 8px;
+    border: 1px solid transparent;
+    text-align: center;
+    border-radius: 5px;
+    margin: 5px 0;
+}
+
+.ticketTect{
+    font-size: 11px;
+    font-weight: bold;
+}
+
+.downloadExportDashboard{
+    top: 0;
+    right: 0;
+    position: absolute;
+    cursor: pointer;
+    color: #636e72;
+    margin-right: 10px;
+    background: #fff;
+    /* border: 1px solid #ccc; */
+    border-radius: 50%;
+    padding: 5px 8px;
+    font-size: 12px;
+}
+
+.downloadExportDashboard:hover{
+    color: #222;
+}
+
+
+
+
+
+
+.TabsCustomTitle{
+    background: transparent;
+    margin: 2px;
+    color: #222;
+    padding: 3px 30px;
+    border-bottom: 3px solid #ebe9e9;
+    cursor: pointer;
+    word-wrap: break-word;
+    display: inline-block;
+    font-size: 13px;
+    font-weight: 900;
+    text-transform: uppercase;
+}
+
+    .TabsCustomTitle:hover{
+        color: #222;
+        border-bottom: 3px solid #d18b5d;
+    }
+
+    .TabsCustomTitle.active{
+        color: #222;
+        border-bottom: 3px solid #e67e22;
+    }
+
+.TabsCustom{
+    background: transparent;
+    margin: 2px;
+    color: #222;
+    padding: 3px 20px;
+    border-bottom: 3px solid #ebe9e9;
+    cursor: pointer;
+    word-wrap: break-word;
+    display: inline-block;
+    font-size: 12px;
+}
+
+    .TabsCustom:hover{
+        color: #222;
+        border-bottom: 3px solid #7e8389;
+    }
+
+    .TabsCustom.active{
+        color: #222;
+        border-bottom: 3px solid #2c3e50;
+    }
+
+    
+.downloadExportReport{
+    border: 1px solid #607D8B;
+    padding: 5px 10px;
+    border-radius: 3px;
+    float: right;
+    font-size: 12px;
+    background: #607D8B;
+    color: #fff;
+    cursor: pointer;
+    margin: 0 10px 30px 0;
+    }
+    
+    .downloadExportReport:hover{
+        color: #ffffff;
+        background-color:#263238 ;
+    }
+
+    .Table-Background{
+        /* border: 2px solid #ebe9e9; */
+        padding: 20px 5px;
+        margin: 10px;
+        /* border-radius: 10px; */
+    }
+    
+    .table th {
+        vertical-align: middle;
+    }
+    
+    .table td, .table th {
+        min-width: 150px;
+    }
+    
+    .table td:first-child, .table th:first-child {
+        min-width: 20px;
+    }
+

src/app/admin/admin-dashboard-logbooks/logbooks/logbooks.component.html

+  <p class="mb-3">
+    <ng-container *ngFor="let data of listTabs; let i = index">
+      <span 
+        class="mb-1 TabsCustomTitle"
+        [ngClass]="{'active': data.selected == true, '':data.selected == false}">
+          {{data.Name}}
+      </span>
+    </ng-container>
+  </p>
+
+  <p *ngIf="isEmptyChild" style="font-size:18px;" class="text-muted text-center">
+    <i class="fas fa-columns fa-3x"></i> <br> 
+    There is no Dashboard
+  </p>
+  <p *ngIf="isLoadingChild" style="font-size:18px;" class="text-muted text-center">
+    <i class="fas fa-spinner fa-spin"></i> 
+    Retrieving data
+  </p>
+    
+  <p *ngIf="!isLoadingChild && !isEmptyChild">
+    <ng-container *ngFor="let data of listChildTabs; let i = index">
+      <span
+        class="TabsCustom" 
+        [ngClass]="{'active': data.selected, '': !data.selected}" (click)="changeTab(i)">
+          {{data.name}} {{data.count ? data.count : ''}}
+      </span>
+    </ng-container>
+  </p>
+
+  <button class="btn btn-sm btn-success arataka-btn-success" style="width: 100px;" (click)="GettingTicketReportDataAPI()" [disabled]="isDisabledButtonSearch">
+    <i class="bi bi-search"></i>
+    Search
+  </button>
+  
+  <!-- Report -->
+<div class="row" *ngIf="tabsName == 'report'">
+  <div class="col-12 col-sm-12 text-center mt-5" *ngIf="isEmptyReport">
+    <p style="font-size:18px;" class="text-muted"><i class="fas fa-table fa-3x"></i> <br> No List of Report</p>
+  </div>
+  <div class="col-12 col-sm-12 text-center mt-5" *ngIf="isLoadingReport">
+    <p style="font-size:18px;" class="text-muted"><i class="fas fa-spinner fa-spin"></i> Retrieving data</p>
+  </div>
+  <div class="col-12 col-sm-12 Table-Background" *ngIf="!isLoadingReport && !isEmptyReport">
+    <span class="downloadExportReport" *ngIf="(listReport.count != 0)" (click)="ReportExportToExcel()">
+    Download Excel 
+    <i class="fas fa-download"></i>
+    </span>
+    <div class="table-responsive mt-4" *ngIf="!isLoadingReport && !isEmptyReport">
+      <table class="table table-bordered table-striped table-sm">
+        <thead>
+          <tr>
+            <th>#</th>
+              <th *ngFor="let data of fieldExportReport; let i = index">
+                <div class="form-check">
+                  <input type="checkbox" class="form-check-input" [checked]="data['value']" id="exampleCheck1" (change)="onChangeFieldReport(i, $event)">
+                  <label class="form-check-label" for="exampleCheck1">{{data['field']}}</label>
+                </div>
+              </th>
+          </tr>
+        </thead>
+        <tbody>
+          <ng-container *ngFor="let data of listReport.data; let i = index">
+            <tr>
+              <td>{{((i+1) + ((TicketReportRequest.perpage * TicketReportRequest.page) - TicketReportRequest.perpage))}}.</td>
+              <td>{{data.ticket_no}}</td>
+              <td>{{data.ticket_title}}</td>
+              <td>{{data.ticket_created_time  | date: 'dd MMM yyyy HH:mm:ss'}}</td>
+              <td>{{data.team_name}}</td>
+              <td>{{data.customer_type}}</td>
+              <td>{{data.customer_name}}</td>
+              <td>{{data.customer_birth_date | date: 'dd MMM yyyy'}}</td>
+              <td>{{data.customer_mother_name}}</td>
+              <td>{{data.customer_address}}</td>
+              <td>{{data.customer_type_id}}</td>
+              <td>{{data.customer_id_number}}</td>
+              <td>{{data.customer_mobile_phone}}</td>
+              <td>{{data.customer_mobile_phone2}}</td>
+              <td>{{data.customer_email}}</td>
+              <td>{{data.penyebab_pengaduan }}</td>
+              <td>{{data.ticket_servicefamiliy_name}}</td>
+              <td>{{data.ticket_service_name}}</td>
+              <td>{{data.ticket_servicesubcategory_name}}</td>
+              <td>{{data.remark}}</td>
+              <td>{{data.tidak_lanjut}}</td>
+              <td>{{data.ticket_description}}</td>
+              <td>{{data.ticket_status}}
+                <div *ngIf="data.team_name == null">
+                  ( Defect )
+                </div>
+              </td>
+              <td>{{data.ticket_resolved_date  | date: 'dd MMM yyyy HH:mm:ss'}}</td>
+              <td>{{data.start_date | date: 'dd MMM yyyy HH:mm:ss'}}</td>
+              <td>{{data.resolution_date | date: 'dd MMM yyyy HH:mm:ss'}}</td>
+              <td>{{data.ticket_total_days_resolved}}</td>
+            </tr>
+          </ng-container>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>
+<br>
+<div class="row" *ngIf="!isLoadingReport && !isEmptyReport && tabsName == 'report'">
+  <div class="col-12">
+      <p class="text-center text-muted">
+        <small>
+            {{listReport.PagingDisplay}}
+        </small>
+      </p>
+  </div>
+  <div class="col-6">
+      <h5 class="text-center arataka-paging-arrow mb-5" (click)="PagingArrowLeftReport()">
+          <i class="fas fa-chevron-left"></i> Previous
+      </h5>
+  </div>
+  <div class="col-6">
+      <h5 class="text-center arataka-paging-arrow mb-5" (click)="PagingArrowRightReport()">
+          Next <i class="fas fa-chevron-right"></i>
+      </h5>
+  </div>
+</div>
+
+<ng-container *ngIf="tabsName == 'logbooks'">  
+  <app-logbooks-report 
+  [paramsRequest]="paramsRequest" 
+  [isDisabledButtonSearch]="isDisabledButtonSearch" 
+  [startDate]="startDate" 
+  [endDate]="endDate"
+  (onChild)="onRefresh($event)">
+</app-logbooks-report>
+</ng-container>
\ No newline at end of file

src/app/admin/admin-dashboard-logbooks/logbooks/logbooks.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogbooksComponent } from './logbooks.component';
+
+describe('LogbooksComponent', () => {
+  let component: LogbooksComponent;
+  let fixture: ComponentFixture<LogbooksComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LogbooksComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LogbooksComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -10,11 +10,17 @@ import { AdminTicketOnpicDetailComponent } from './admin-ticket-onpic/admin-tick
 import { AdminMacroComponent } from './admin-macro/admin-macro.component';
 import { AdminLivedashboardComponent } from './admin-livedashboard/admin-livedashboard.component';
 import { LoginLogsComponent } from './login-logs/login-logs.component';
+import { AdminDashboardLogbooksComponent } from './admin-dashboard-logbooks/admin-dashboard-logbooks.component';
+import { AdminUserAgentComponent } from './admin-user-agent/admin-user-agent.component';
 
 const routes: Routes = [
+  // {
+  //   path: '',
+  //   component: AdminDashboardComponent
+  // },
   {
     path: '',
-    component: AdminDashboardComponent
+    component: AdminDashboardLogbooksComponent
   },
   {
     path: 'live-dashboard',
@@ -48,6 +54,10 @@ const routes: Routes = [
     path: 'macro',
     component: AdminMacroComponent,
   },
+  {
+    path: 'user-agent',
+    component: AdminUserAgentComponent
+  },
 
 ];
 

src/app/admin/admin-ticket/admin-ticket-create/admin-ticket-create.component.html

@@ -19,7 +19,39 @@
           </div>
           <hr>
           <p>
-              Assignee
+              <b>Agent</b>
+          </p>
+          <div class="form-group">
+            <label class="text-muted">Nama Agent <span class="text-danger">*</span></label>
+            <select type="text" 
+              class="form-control form-control-sm select-style" [(ngModel)]="idAgent" #inputRequired>
+              <ng-container *ngFor="let agent of listAgent; let i = index">
+                <option value="{{agent.id}}">{{agent.code}} - {{agent.name}}</option>
+              </ng-container>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="text-muted">Ext Agent <span class="text-danger">*</span></label>
+            <input type="text" placeholder="Input Ext Agent ..." #inputRequired class="form-control form-control-sm" [(ngModel)]="extAgent">
+          </div>
+          <div class="form-group">
+            <label class="text-muted">Date Time Call <span class="text-danger">*</span></label>
+            <div class="input-group date" id="DateTimeCall" data-target-input="nearest">
+              <input type="text"
+                class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
+                data-target="#DateTimeCall" />
+              <div class="input-group-append" data-target="#DateTimeCall" data-toggle="datetimepicker">
+                <div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
+              </div>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="text-muted">Channel <span class="text-danger">*</span></label>
+            <input type="text" placeholder="Input Channel ..." #inputRequired class="form-control form-control-sm" [(ngModel)]="channel">
+          </div>
+          <hr>
+          <p>
+              <b>Assignee</b>
           </p>
           <div class="form-group">
             <label class="text-muted">Assignee Team <span class="text-danger">*</span></label>
@@ -44,10 +76,9 @@
               </ng-container>
             </select>
           </div>
-          
           <hr>
           <p>
-              Topic & Category
+              <b>Topic & Category</b>
           </p>
           <div class="form-group">
             <label class="text-muted">Topic <span class="text-danger">*</span></label>

src/app/admin/admin-ticket/admin-ticket-create/admin-ticket-create.component.ts

@@ -4,10 +4,10 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { FormBuilder, FormGroup  } from '@angular/forms';
 
 import { TicketService } from '../../../../shared/serviceproxy/service-proxy.service';
-import { ServiceProxyWeb } from '../../../../shared/serviceproxy/service-proxy.service';
+import { ServiceProxyWeb,MicroService } from '../../../../shared/serviceproxy/service-proxy.service';
 
 import { Router, ActivatedRoute } from '@angular/router';
-
+import * as moment from 'moment';
 import * as $ from 'jquery';
 declare const AratakaConfig : any;
 
@@ -93,13 +93,17 @@ export class AdminTicketCreateComponent implements OnInit {
   public SubTopic_ID : string = ""
   public Category_ID : string = ""
   public Complaintment_ID : string = ""
-
+  public idAgent: string = "";
+  public extAgent: string = "";
+  public channel: string = "";
+  listAgent: any[] = [];
 
   constructor(injector: Injector,
     private router: Router,
     private FormBuilder : FormBuilder, 
     private _TicketService : TicketService,
     public _SP : ServiceProxyWeb,
+    private API: MicroService,
     private activatedRoute: ActivatedRoute) { 
 
       this.activatedRoute.queryParams.subscribe(params => {
@@ -162,10 +166,18 @@ export class AdminTicketCreateComponent implements OnInit {
       isGet : false
     })
 
+    AratakaConfig.BootstrapDateCustomPicker({
+      ID : '#DateTimeCall',
+      DateValue :  NowDate,
+      Format : 'DD MMMM YYYY HH:mm:ss',
+      isGet : false
+    })
+
 
     this.GettingTeamsListAPI()
     this.GettingTopicListAPI()
     this.GettingComplaintmentListAPI()
+    this.requestAgent();
   }
 
   //Take By User ------------------------------------------------------------------------
@@ -257,6 +269,12 @@ export class AdminTicketCreateComponent implements OnInit {
 
   SubmitClick(){
     var valid = true;
+
+    if (AratakaConfig.GetDateBDTP({ ID: '#DateTimeCall', isGet: true, isGetFormat: 'YYYYMMDD' }) != moment(new Date()).format('YYYYMMDD')) {
+      AratakaConfig.Alert.showAlert('Please Select Date Now','alert-danger',2000)
+      return false;
+    }
+
     this.inputRequired.forEach(element => {
       //console.log(element.nativeElement.value)
       if(element.nativeElement.value == ""){
@@ -265,6 +283,7 @@ export class AdminTicketCreateComponent implements OnInit {
       }
     });
 
+
     var Request = {
       caller_id : this.CustomerMdData.ID,
       service_id : this.SubTopic_ID,
@@ -770,15 +789,37 @@ export class AdminTicketCreateComponent implements OnInit {
             // AratakaConfig.LoadingPage.hideLoading()
             
             var ObjKey = Object.keys(result.values.objects)
-            var created = result.values.objects[ObjKey[0]]             
-
-            this.InsertNewTicketAssignAPI({
-              ticket_assign : created.key,
-              ticket_class : created.class,
-              team_id : this.AssigneeTeam_ID,
-              agent_id : this.AssigneeTeamAgent_ID,
-              source_agent_id : this._SP.getUserInformation.values.user_id 
-            })
+            var created = result.values.objects[ObjKey[0]] 
+            console.log(ObjKey)
+            console.log(created)
+            const params = {
+              "agent_custom": this.extAgent,
+              "agent_extension_id": this.idAgent,
+              "call_time": AratakaConfig.GetDateBDTP({ ID: '#DateTimeCall', isGet: true, isGetFormat: 'YYYY-MM-DD HH:mm:ss' }),
+              "channel": this.channel,
+              "ticket_id": Number(created.key),
+              "ticket_type": created.class
+            }
+          console.log(params)
+            
+            this.API.post('ticket_extension', params)
+              .subscribe((response: any) => {
+                this.InsertNewTicketAssignAPI({
+                  ticket_assign : created.key,
+                  ticket_class : created.class,
+                  team_id : this.AssigneeTeam_ID,
+                  agent_id : this.AssigneeTeamAgent_ID,
+                  source_agent_id : this._SP.getUserInformation.values.user_id 
+                })
+              }, (err: HttpErrorResponse) => {
+                this.InsertNewTicketAssignAPI({
+                  ticket_assign : created.key,
+                  ticket_class : created.class,
+                  team_id : this.AssigneeTeam_ID,
+                  agent_id : this.AssigneeTeamAgent_ID,
+                  source_agent_id : this._SP.getUserInformation.values.user_id 
+                })
+              })
 
             // this.InsertNewTicketContactAPI({
             //   ticket_id : created.key,
@@ -898,4 +939,33 @@ export class AdminTicketCreateComponent implements OnInit {
     });
   }
 
+  requestAgent() {
+    this.listAgent = [{
+      id: "",
+      code: "Retrieving",
+      name: "..."
+    }]
+    const params = {
+      "filter_limit": null,
+      "filter_page": null,
+      "order_field": "id|desc",
+    }
+    this.API.post('agent_extension/list', params)
+    .subscribe((response: any) => {
+      console.log(response)
+      if (response.items) {
+        this.listAgent = response.items;
+        this.idAgent = this.listAgent[0].id;
+      } else {
+        this.listAgent = [];
+      }
+    }, (err: HttpErrorResponse) => {
+      this.listAgent = [{
+        id: "",
+        code: "Error",
+        name: "API!"
+      }]
+    })
+  }
+
 }

src/app/admin/admin-ticket/admin-ticket-detail/admin-ticket-detail.component.html

@@ -27,8 +27,41 @@
     <br>
     <div class="row">
         <div class="col-12 col-sm-4 col-md-4 col-lg-3 mb-3">
+          <hr>
+          <p>
+              <b>Agent</b>
+          </p>
+          <div class="form-group">
+            <label class="text-muted">Nama Agent <span class="text-danger">*</span></label>
+            <select type="text" 
+              class="form-control form-control-sm select-style" [(ngModel)]="idAgent" #inputRequired disabled>
+              <ng-container *ngFor="let agent of listAgent; let i = index">
+                <option value="{{agent.id}}">{{agent.code}} - {{agent.name}}</option>
+              </ng-container>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="text-muted">Ext Agent <span class="text-danger">*</span></label>
+            <input type="text" placeholder="Input Ext Agent ..." #inputRequired class="form-control form-control-sm" [(ngModel)]="extAgent" disabled>
+          </div>
+          <div class="form-group">
+            <label class="text-muted">Date Time Call <span class="text-danger">*</span></label>
+            <div class="input-group date" id="DateTimeCall" data-target-input="nearest">
+              <input type="text"
+                class="form-control form-control-sm datetimepicker-input" data-toggle="datetimepicker"
+                data-target="#DateTimeCall" disabled/>
+              <div class="input-group-append" data-target="#DateTimeCall" data-toggle="datetimepicker">
+                <div class="input-group-text"><i class="far fa-calendar-alt"></i></div>
+              </div>
+            </div>
+          </div>
+          <div class="form-group">
+            <label class="text-muted">Channel <span class="text-danger">*</span></label>
+            <input type="text" placeholder="Input Channel ..." #inputRequired class="form-control form-control-sm" [(ngModel)]="channel" disabled>
+          </div>
+          <hr>
             <p>
-              Assignee
+              <b>Assignee</b>
               <ng-container 
                 *ngIf="
                   (
@@ -91,7 +124,7 @@
             </div>
             <hr>
             <p>
-              Topic & Category
+              <b>Topic & Category</b>
               <ng-container *ngIf="
                 RoleID == _SP.PARAM_SERVICEDESK && 
                 StatusTicket != 'rejected' && 
@@ -153,7 +186,7 @@
             <ng-container *ngIf="Topic_ID == Env.Topic.Keluhan.toString() || Topic_ID == Env.Topic.PermintaanKeServiceDesk.toString()">
               <hr>
               <p>
-                Complaint
+                <b>Complaint</b>
                 <ng-container *ngIf="RoleID == _SP.PARAM_SERVICEDESK && StatusTicket != 'closed' && StatusTicket != 'resolved' && StatusTicket != 'rejected'">
                   <small>
                       (
@@ -294,7 +327,7 @@
                     class="TabsCustom"
                     *ngIf="data.Hide == false"
                     [ngClass]="{'active': data.Selected == true, '':data.Selected == false}"
-                    (click)="ClickTabsCustomConversationReplyNote(i)">{{data.Name}}</span>
+                    (click)="ClickTabsCustomConversationReplyNote(i)">{{data.Name}} <span class="text-danger" *ngIf="data.Name == 'Internal Note'">*</span></span>
                 </ng-container>
               </p>
 

src/app/admin/admin-ticket/admin-ticket-detail/admin-ticket-detail.component.ts

@@ -8,7 +8,7 @@ import { ZendeskService } from '../../../../shared/serviceproxy/service-proxy.se
 import { CustomerService } from '../../../../shared/serviceproxy/service-proxy.service';
 import { MacroService } from '../../../../shared/serviceproxy/service-proxy.service';
 
-import { ServiceProxyWeb } from '../../../../shared/serviceproxy/service-proxy.service';
+import { ServiceProxyWeb, MicroService } from '../../../../shared/serviceproxy/service-proxy.service';
 
 import { Router } from '@angular/router';
 import { ActivatedRoute } from '@angular/router';
@@ -125,7 +125,10 @@ export class AdminTicketDetailComponent implements OnInit {
   public ResolutionDate : string = ""
   public LastUpdate : string = ""
   public ttrDeadline: string = ""
-
+  public idAgent: string = "";
+  public extAgent: string = "";
+  public channel: string = "";
+  listAgent: any[] = [];
 
   public PublicReplyEditor : string = ""
   public SubmitAsData = [{
@@ -233,6 +236,7 @@ export class AdminTicketDetailComponent implements OnInit {
     private _CustomerService : CustomerService,
     private _ZendeskService : ZendeskService,
     private _MacroService : MacroService,
+    private API: MicroService,
     public _SP : ServiceProxyWeb) {
      }
 
@@ -245,9 +249,16 @@ export class AdminTicketDetailComponent implements OnInit {
     this.GettingTicketDetailAPI({
       ID : this.paramTicketID
     })
-
+    this.getDetailExtensionTiket()
+    this.requestAgent()
     this.ConversationViewByRole()
 
+    AratakaConfig.BootstrapDateCustomPicker({
+      ID : '#DateTimeCall',
+      DateValue :  new Date(),
+      Format : 'DD MMMM YYYY HH:mm:ss',
+      isGet : false
+    })
     // PublicReplySubmit
 
   }
@@ -787,6 +798,32 @@ export class AdminTicketDetailComponent implements OnInit {
   }
 
   //API Function -------------------------------------------------------------------------
+
+  getDetailExtensionTiket() {
+    const params = {
+      "ticket_id": [Number(this.paramTicketID)]
+    }
+    this.API.post('ticket_extension/list', params)
+    .subscribe((response: any) => {
+      if (response.items) {
+        this.idAgent = response.items[0].agent_extension.id;
+        this.channel = response.items[0].channel;
+        this.extAgent = response.items[0].agent_custom;
+        AratakaConfig.BootstrapDateCustomPicker({
+          ID : '#DateTimeCall',
+          DateValue :  response.items[0].call_time,
+          Format : 'DD MMMM YYYY HH:mm:ss',
+          isGet : false
+        })
+      } else {
+        this.idAgent = "";
+      }
+      console.log(response)
+    }, (err: HttpErrorResponse) => {
+      this.idAgent = "";
+    })
+  }
+
   private itemDetailTicket: any = {};
   GettingTicketDetailAPI(_Request){
     console.log(_Request)
@@ -2122,7 +2159,6 @@ export class AdminTicketDetailComponent implements OnInit {
           AratakaConfig.Alert.showAlert('Topic updated successfully','alert-success',2000)
 
           this.ClearModel();
-
           this.GettingTicketDetailAPI({
             ID : this.paramTicketID
           })
@@ -2266,6 +2302,36 @@ export class AdminTicketDetailComponent implements OnInit {
       });
   }
 
+  requestAgent() {
+
+    this.listAgent = [{
+      id: "",
+      code: "Retrieving",
+      name: "..."
+    }]
+
+    const params = {
+      "filter_limit": null,
+      "filter_page": null,
+      "order_field": "id|desc",
+    }
+    this.API.post('agent_extension/list', params)
+    .subscribe((response: any) => {
+      if (response.items) {
+        this.listAgent = response.items;
+        this.idAgent = this.listAgent[0].id;
+      } else {
+        this.listAgent = [];
+      }
+    }, (err: HttpErrorResponse) => {
+      this.listAgent = [{
+        id: "",
+        code: "Error",
+        name: "API!"
+      }]
+    })
+  }
+
   ChangeComplaintmentAPI(_Request){
     AratakaConfig.LoadingPage.showLoading('Complaintment Changing..')
     this._TicketService.ChangeComplaintment(_Request)
@@ -2296,5 +2362,4 @@ export class AdminTicketDetailComponent implements OnInit {
   }
 
 
-
 }

src/app/admin/admin-user-agent/admin-user-agent.component.html

+<div class="container">
+  <div class="row">
+    <div class="col-sm-10 mb-3">
+      <h6 class="text-muted"><i class="fas fa-ticket-alt"></i> User Agent</h6>
+    </div>
+    <div class="col-sm-2 mb-3">
+        <button class="btn btn-sm btn-block arataka-btn-primary" data-toggle="modal" data-target="#create-agent">
+          <i class="fas fa-plus-circle"></i>
+          Add User Agent
+        </button>
+    </div> 
+  </div>
+  <div class="row">
+      <div class="col-12 col-sm-12 text-center mt-5" *ngIf="isEmpty">
+        <p style="font-size:18px;" class="text-muted">
+          <i class="fas fa-table fa-3x"></i> 
+          <br> Empty Data
+        </p>
+      </div>
+      <div class="col-12 col-sm-12 text-center mt-5" *ngIf="isLoading">
+        <p style="font-size:18px;" class="text-muted">
+          <i class="fas fa-spinner fa-spin"></i> 
+          Retrieving data
+        </p>
+      </div>
+      <div class="col-12 col-sm-12 Table-Background" *ngIf="!isEmpty && !isLoading">
+        <div class="table-responsive">
+          <table class="table table-striped table-hover table-bordered table-sm">
+            <thead>
+              <tr>
+                <th scope="col">#</th>
+                <th scope="col" width="15%">Code</th>
+                <th scope="col">Name</th>
+                <th scope="col">Create</th>
+                <th scope="col">Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              <ng-container *ngFor="let data of listAgent; let i = index">
+                <tr>
+                  <td scope="row">{{((i+1) + ((listRequest.filter_page * listRequest.filter_limit) - listRequest.filter_limit))}}.</td>
+                  <td>{{data.code}}</td>
+                  <td>{{data.name}}</td>
+                  <td>{{data.created_user}}</td>
+                  <td class="text-center">
+                    <a class="btn btn-primary btn-sm mb-2" style="color: wheat;" 
+                    data-toggle="modal" data-target="#edit-agent" (click)="formEditAgent = data">
+                        <i class="fa fa-edit"></i> Edit
+                    </a>
+                    &nbsp;
+                    <a class="btn btn-danger btn-sm mb-2" style="color: wheat;">
+                      <i class="fa fa-trash"></i> Delete
+                    </a>
+                  </td>
+                </tr>
+              </ng-container>
+            </tbody>
+          </table>
+        </div>
+      </div>
+  </div>
+  <br>
+  <div class="row" *ngIf="!isEmpty && !isLoading">
+      <div class="col-12">
+          <p class="text-center text-muted">
+            <small>
+                {{PagingDisplay}}
+            </small>
+          </p>
+      </div>
+      <div class="col-6">
+          <h5 class="text-center arataka-paging-arrow mb-5" (click)="PagingArrowLeft()">
+              <i class="fas fa-chevron-left"></i> Previous
+          </h5>
+      </div>
+      <div class="col-6">
+          <h5 class="text-center arataka-paging-arrow mb-5" (click)="PagingArrowRight()">
+              Next <i class="fas fa-chevron-right"></i>
+          </h5>
+      </div>
+  </div>
+</div>
+
+<div class="modal fade" id="create-agent" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <app-create-agent></app-create-agent>
+    </div>
+  </div>
+</div>
+
+<!-- Edit -->
+<div class="modal fade" id="edit-agent" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Edit Agent</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <div class="form-group">
+          <label class="text-muted">Code <span class="text-danger">*</span></label>
+          <input type="text" class="form-control form-control-sm" [(ngModel)]="formEditAgent.code" placeholder="Input Kode" maxlength="100">
+        </div>
+        <div class="form-group">
+          <label class="text-muted">Name <span class="text-danger">*</span></label>
+          <input type="text" class="form-control form-control-sm" [(ngModel)]="formEditAgent.name" placeholder="Input Name" maxlength="100">
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" style="width: 150px;" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary" style="width: 150px;" [disabled]="formEditAgent.id < 1" (click)="EditAgent(formEditAgent.id)">Edit</button>
+      </div>
+    </div>
+  </div>
+</div>
+

src/app/admin/admin-user-agent/admin-user-agent.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminUserAgentComponent } from './admin-user-agent.component';
+
+describe('AdminUserAgentComponent', () => {
+  let component: AdminUserAgentComponent;
+  let fixture: ComponentFixture<AdminUserAgentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AdminUserAgentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdminUserAgentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/admin-user-agent/admin-user-agent.component.ts

+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ServiceProxyWeb, MicroService } from '../../../shared/serviceproxy/service-proxy.service';
+import { DomSanitizer } from '@angular/platform-browser';
+import { FormBuilder, Validators } from '@angular/forms';
+import * as moment from 'moment';
+declare const AratakaConfig : any;
+
+@Component({
+  selector: 'app-admin-user-agent',
+  templateUrl: './admin-user-agent.component.html',
+  styleUrls: ['./admin-user-agent.component.css']
+})
+export class AdminUserAgentComponent implements OnInit {
+
+  // formEditAgent = this.form.group({
+  //   code: ['', Validators.required],
+  //   name: ['', Validators.required],
+  // });
+  formEditAgent: any = {}
+
+  listRequest = {
+    "filter_limit": 10,
+    "filter_page": 1,
+    "order_field": "id|desc",
+    "search_text": ""
+  }
+
+  listAgent: any[] = [];
+  isEmpty: boolean = false;
+  isLoading: boolean = false;
+  PagingDisplay: string = "";
+
+  id: number = 0;
+  code: string = "";
+  name: string = "";
+
+  private count: number = 0;
+  constructor(
+    private form: FormBuilder,
+    public _SP : ServiceProxyWeb,
+    private API: MicroService,
+    private sanitizer: DomSanitizer,
+  ) { }
+
+  ngOnInit() {
+    this.requestAgent();
+  }
+
+  PagingArrowLeft(){
+    if(this.listRequest.filter_page != 1){
+      this.listRequest.filter_page = this.listRequest.filter_page -= 1
+      this.PagingDisplay = "Page "+this.listRequest.filter_page+" from " + Math.ceil(this.count / this.listRequest.filter_limit) + ', Total ' + this.count + ' Data'
+      this.requestAgent()
+    }
+  }
+ 
+  PagingArrowRight(){
+    if(this.listRequest.filter_page < Math.ceil(this.count / this.listRequest.filter_limit)){
+      this.listRequest.filter_page = this.listRequest.filter_page += 1
+      this.PagingDisplay = "Page "+this.listRequest.filter_page+" from " + Math.ceil(this.count / this.listRequest.filter_limit) + ', Total ' + this.count + ' Data'
+      this.requestAgent()
+    }
+  }
+
+  requestAgent() {
+    this.isLoading = true;
+    this.API.post('agent_extension/list', this.listRequest)
+    .subscribe((response: any) => {
+      console.log(response)
+      if (response.items) {
+        this.count = response.count;
+        this.listAgent = response.items;
+        this.isEmpty = false;
+        this.PagingDisplay = "Page "+this.listRequest.filter_page+" from " + Math.ceil(this.count / this.listRequest.filter_limit) + ', Total ' + this.count + ' Data'
+      } else {
+        this.listAgent = [];
+        this.isEmpty = true;
+      }
+      this.isLoading = false;
+    }, (err: HttpErrorResponse) => {
+      this.listAgent = [];
+      this.isLoading = false;
+      this.isEmpty = true;
+    })
+  }
+
+  EditAgent(id: number) {
+    console.log(this.formEditAgent)
+    AratakaConfig.LoadingPage.showLoading('Edit Agent ...')
+    this.API.put(`agent_extension/${id}`, this.formEditAgent, id)
+    .subscribe((response: any) => {
+      this.requestAgent()
+      AratakaConfig.BootstrapModal({ID:'#edit-agent', Open: false, Static: true });
+      AratakaConfig.Alert.showAlert('Edit Agent Success','alert-success',2000)
+      AratakaConfig.LoadingPage.hideLoading();
+    }, (err: HttpErrorResponse) => {
+      AratakaConfig.Alert.showAlert(err.error.message,'alert-danger',2000)
+      AratakaConfig.LoadingPage.hideLoading()
+    })
+  }
+
+}

src/app/admin/admin-user-agent/create-agent/create-agent.component.html

+<div class="modal-header">
+  <h5 class="modal-title" id="exampleModalLabel">Create Agent</h5>
+  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <form [formGroup]="formAgent">
+    <div class="form-group">
+      <label class="text-muted">Code <span class="text-danger">*</span></label>
+      <input type="text" class="form-control form-control-sm" formControlName="code" placeholder="Input Kode" maxlength="100">
+    </div>
+    <div class="form-group">
+      <label class="text-muted">Name <span class="text-danger">*</span></label>
+      <input type="text" class="form-control form-control-sm" formControlName="name" placeholder="Input Name" maxlength="100">
+    </div>
+  </form>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-secondary" style="width: 150px;" data-dismiss="modal">Close</button>
+  <button type="button" class="btn btn-primary" style="width: 150px;" [disabled]="formAgent.invalid" (click)="createAgent()">Save</button>
+</div>
\ No newline at end of file

src/app/admin/admin-user-agent/create-agent/create-agent.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateAgentComponent } from './create-agent.component';
+
+describe('CreateAgentComponent', () => {
+  let component: CreateAgentComponent;
+  let fixture: ComponentFixture<CreateAgentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateAgentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateAgentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/admin/admin-user-agent/create-agent/create-agent.component.ts

+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { ServiceProxyWeb, MicroService } from '../../../../shared/serviceproxy/service-proxy.service';
+import { DomSanitizer } from '@angular/platform-browser';
+import { FormBuilder, Validators } from '@angular/forms';
+import * as moment from 'moment';
+declare const AratakaConfig : any;
+
+@Component({
+  selector: 'app-create-agent',
+  templateUrl: './create-agent.component.html',
+  styleUrls: ['./create-agent.component.css']
+})
+export class CreateAgentComponent implements OnInit {
+
+  formAgent = this.form.group({
+    code: ['', Validators.required],
+    name: ['', Validators.required],
+  });
+
+  constructor(
+    private form: FormBuilder,
+    public _SP : ServiceProxyWeb,
+    private API: MicroService,
+    private sanitizer: DomSanitizer,
+  ) { }
+
+  ngOnInit() {
+  }
+
+  createAgent() {
+    AratakaConfig.LoadingPage.showLoading('Creating Agent ...')
+    this.API.post('agent_extension', this.formAgent.getRawValue())
+    .subscribe((response: any) => {
+      this.formAgent.patchValue({
+        code: "",
+        name: "",
+      })
+      AratakaConfig.BootstrapModal({ID:'#create-agent', Open: false, Static: true });
+      AratakaConfig.Alert.showAlert('Create Agent Success','alert-success',2000)
+      AratakaConfig.LoadingPage.hideLoading();
+    }, (err: HttpErrorResponse) => {
+      AratakaConfig.Alert.showAlert(err.error.message,'alert-danger',2000)
+      AratakaConfig.LoadingPage.hideLoading()
+    })
+  }
+
+}

src/app/admin/admin.module.ts

@@ -26,6 +26,11 @@ import { AdminLdTop10usercreateticketComponent } from './admin-livedashboard/adm
 import { LogsLoginComponent } from './admin-dashboard/logs-login/logs-login.component';
 import { LoginLogsComponent } from './login-logs/login-logs.component';
 import { AdminDashboardTicketComponent } from './admin-dashboard/admin-dashboard-ticket/admin-dashboard-ticket.component';
+import { AdminDashboardLogbooksComponent } from './admin-dashboard-logbooks/admin-dashboard-logbooks.component';
+import { LogbooksComponent } from './admin-dashboard-logbooks/logbooks/logbooks.component';
+import { LogbooksReportComponent } from './admin-dashboard-logbooks/logbooks-report/logbooks-report.component';
+import { AdminUserAgentComponent } from './admin-user-agent/admin-user-agent.component';
+import { CreateAgentComponent } from './admin-user-agent/create-agent/create-agent.component';
 /*import { PipeSha256 } from '../pipe/pipe-global.pipe';
 import { PipeEncryptoJs } from '../pipe/pipe-global.pipe';
 import { PipeDencryptoJs } from '../pipe/pipe-global.pipe';
@@ -55,6 +60,11 @@ import { PipeDencryptoJs } from '../pipe/pipe-global.pipe';
     LogsLoginComponent,
     LoginLogsComponent,
     AdminDashboardTicketComponent,
+    AdminDashboardLogbooksComponent,
+    LogbooksComponent,
+    LogbooksReportComponent,
+    AdminUserAgentComponent,
+    CreateAgentComponent,
   ],
   imports: [
     PipeglobalModule,

src/app/shared/side-bar-menu/side-bar-menu.component.ts

@@ -77,6 +77,15 @@ export class SideBarMenuComponent implements OnInit {
           RouteActive : '',
           Show : true,
           Child : []
+        },
+        {
+          RouteName : 'User Agent',
+          OriginalName : 'User Agent',
+          RouteIcon : 'fas fa-ticket-alt',
+          RouteAddress : '/admin/user-agent',
+          RouteActive : '',
+          Show : true,
+          Child : []
         }
       ]
     }

src/environments/environment.ts

@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  "APIBASEURL"              : "http://innodev.vnetcloud.com/nobucall-api-v2/",
+  "APIBASEURL"              : "http://localhost:9825/",
   "MICROSERVICEURL"         : "http://innodev.vnetcloud.com/nobu-history-login/api/v1/",
   "SITE_NAME"               : "Visionet Helpdesk System",
   "SITE_LOGO"               : "https://i0.wp.com/jogorogo.info/wp-content/uploads/2017/07/logo_visionet.png?fit=879%2C227",

src/shared/serviceproxy/service-proxy.service.ts

@@ -63,6 +63,16 @@ export class MicroService {
     return this.http.post(`${API_MICROSERVICE}${url}`, request, options);
   }
 
+  put(url: string, request: object, id: number) {
+    var service = this.injector.get(ServiceProxyWeb)
+    var headers = new HttpHeaders({
+     'Content-Type': 'application/json',
+     'Authorization' : 'Bearer '+  service.getUserInformation.values.access_token
+      });
+    var options = { headers: headers };
+    return this.http.put(`${API_MICROSERVICE}${url}`, request, options);
+  }
+
   exportFile(url: string, request: object) {
     var service = this.injector.get(ServiceProxyWeb)
     var headers = new HttpHeaders({