add page tabs dashboard tiket

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

@@ -130,8 +130,8 @@
               <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 MMMM yyyy HH:mm'}}</td>
-              <td>team_name</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>{{customer_birth_date}}</td>
@@ -151,9 +151,9 @@
                   ( Defect )
                 </div>
               </td>
-              <td>{{data.ticket_resolved_date  | date: 'dd MMMM yyyy HH:mm'}}</td>
-              <td>{{start_date | date: 'dd MMMM yyyy HH:mm'}}</td>
-              <td>{{resolution_date | date: 'dd MMMM yyyy HH:mm'}}</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>

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

@@ -157,7 +157,6 @@ export class AdminDashboardReportComponent implements OnInit {
   //Functional API------------------------------------------------------------------------------------------------------
 
   GettingTicketReportDataAPI(_Request){
-    this.TicketReportData = undefined
     this.isTicketReportLoading = true
     this.isTicketReportEmpty = false
     //console.log("Report Request", JSON.stringify(_Request))

src/app/admin/admin-dashboard/admin-dashboard-ticket/admin-dashboard-ticket.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/admin-dashboard-ticket/admin-dashboard-ticket.component.html

+<button class="btn btn-sm btn-success arataka-btn-success" style="width: 100px;">
+  <i class="bi bi-search"></i>
+  Search
+</button>
+
+<div class="row">
+  <!-- <div class="col-12 col-sm-12 text-center mt-5" *ngIf="isTicketReportEmpty == true">
+    <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="isTicketReportLoading == true">
+    <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">
+    <div class="table-responsive mt-4">
+      <table class="table table-bordered table-striped table-sm">
+        <thead>
+          <tr>
+            <th>#</th>
+              <th *ngFor="let data of fieldTable; let i = index">
+                {{data['field']}}
+              </th>
+          </tr>
+        </thead>
+        <tbody>
+          <ng-container *ngFor="let data of TicketReportData; 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 MMMM yyyy HH:mm:ss'}}</td>
+              <td>{{data.team_name}}</td>
+              <td>{{data.customer_type}}</td>
+              <td>{{data.customer_name}}</td>
+              <td>{{customer_birth_date}}</td>
+              <td>{{customer_mother_name}}</td>
+              <td>{{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_service_name}}</td>
+              <td>{{data.ticket_servicesubcategory_name}}</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 MMMM yyyy HH:mm:ss'}}</td>
+              <td>{{start_date | date: 'dd MMMM yyyy HH:mm:ss'}}</td>
+              <td>{{resolution_date | date: 'dd MMMM 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="isTicketReportLoading == false && isTicketReportEmpty == false">
+  <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> -->
\ No newline at end of file

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

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

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-admin-dashboard-ticket',
+  templateUrl: './admin-dashboard-ticket.component.html',
+  styleUrls: ['./admin-dashboard-ticket.component.css']
+})
+export class AdminDashboardTicketComponent implements OnInit {
+
+  fieldTable: any[] = [
+    {name: 'ticket_no', value: false, field: "Ticket No"},
+    {name: 'ticket_title', value: false, field: "Title"}, 
+    {name: 'ticket_created_time', value: false, field: "Created Date"},
+    {name: 'team_name', value: false, field: "Team Name"},
+    {name: 'customer_type', value: false, field: "Customer Type"},
+    {name: 'customer_name', value: false, field: "Customer Name"},
+    {name: 'customer_birth_date', value: false, field: "Customer Birth Date"},
+    {name: 'customer_mother_name', value: false, field: "Customer Mother Name"},
+    {name: 'customer_address', value: false, field: "Customer Address"}, 
+    {name: 'customer_type_id', value: false, field: "Identitiy Type"},
+    {name: 'customer_id_number', value: false, field: "Identity No"},
+    {name: 'customer_mobile_phone', value: false, field: "Mobile Phone 1"},
+    {name: 'customer_mobile_phone2', value: false, field: "Mobile Phone 2"},
+    {name: 'customer_email', value: false, field: "Email"},
+    {name: 'ticket_service_name', value: false, field: "Topic"},
+    {name: 'ticket_servicesubcategory_name', value: false, field: "Sub Topic"},
+    {name: 'ticket_description', value: false, field: "Description"},
+    {name: 'ticket_status', value: false, field: "Status"},
+    {name: 'ticket_resolved_date', value: false, field: "Resolved Date"},
+    {name: 'start_date', value: false, field: "Start Date"},
+    {name: 'resolution_date', value: false, field: "Resolution Date"},
+    {name: 'ticket_total_days_resolved', value: false, field: "Day Resolve"}
+  ]
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -73,6 +73,30 @@
   </ng-container>
   </p>
 
+    <!--Region Report Category-->
+    <!-- <ng-container *ngIf="TicketTabsCategoryData[0].selected">
+      <p *ngIf="isDashboardCardColorsEmpty" 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="isDashboardCardColorsEmpty" style="font-size:18px;" class="text-muted text-center">
+        <i class="fas fa-spinner fa-spin"></i> 
+        Retrieving data
+      </p>
+      
+      <p *ngIf="!isDashboardCardColorsEmpty && !isDashboardCardColorsEmpty">
+        <ng-container *ngFor="let data of DashboardCardColorsData; let i = index">
+          <span
+            class="TabsCustom" 
+            [ngClass]="{'active': data.selected, '': !data.selected}"
+            (click)="SelectTicketCategory(i)">
+              {{data.Name}} ({{data.Count}})
+          </span>
+        </ng-container>
+      </p>
+    </ng-container> -->
+    <!--End Region Report Category-->
+
   <!--Region Report Category-->
   <ng-container *ngIf="TicketTabsCategoryData[0].selected">
     <p *ngIf="isTicketCategoryEmpty == true" style="font-size:18px;" class="text-muted text-center"><i class="fas fa-columns fa-3x"></i> <br> There is no Report category</p>
@@ -151,6 +175,10 @@
   </ng-container> -->
 
   <!--Region Report Pagination-->
+  <!-- <ng-container *ngIf="TicketTabsCategoryData[0].selected">
+    <app-admin-dashboard-ticket>
+    </app-admin-dashboard-ticket>
+  </ng-container> -->
   <ng-container *ngIf="TicketTabsCategoryData[0].selected">
     <app-admin-dashboard-report 
       #_AdminDashboardReportComponent

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

@@ -64,7 +64,8 @@ export class AdminDashboardComponent implements OnInit {
   public DashboardCountRequest = {
     user_id : null,
     start_date : null,
-    end_date : null
+    end_date : null,
+    isExport: null,
   }
 
   public TicketReportRequest = {
@@ -171,6 +172,11 @@ export class AdminDashboardComponent implements OnInit {
   TabsSelection(){
     if(this.RoleID == this._SP.PARAM_SERVICEDESK || this.RoleID == this._SP.PARAM_SPV  || (this.TeamID == this.Env.Team.CsCabangBranchAgent || this.TeamID == this.Env.Team.SociomileStaff)){
       this. TicketTabsCategoryData = [
+        // {
+        //   ID : 0,
+        //   Name : "Dashboard",
+        //   selected : false
+        // },
         {
           ID : 1,
           Name : "Report",
@@ -304,7 +310,10 @@ export class AdminDashboardComponent implements OnInit {
       start_date : this.DashboardCountRequest.start_date,
       end_date : this.DashboardCountRequest.end_date,
       type_id : this.DashboardCardColorsData[_i].TypeId,
-      type_name :  this.DashboardCardColorsData[_i].Name
+      type_name :  this.DashboardCardColorsData[_i].Name,
+      isExport: true,
+      page: null,
+      perpage: null
     })
   }
 
@@ -389,8 +398,9 @@ export class AdminDashboardComponent implements OnInit {
           var that = this;
           this.DashboardCardColorsData.map(function(x, index){
             x.colour = that.RandomColorPicker();
+            x.selected = false;
           })
-
+          this.DashboardCardColorsData[0].selected = true;
           this.isDashboardCardColorsEmpty = false
         }else{
           this.isDashboardCardColorsEmpty = true

src/app/admin/admin.module.ts

@@ -25,6 +25,7 @@ import { AdminLdTop10ticketbycategoryComponent } from './admin-livedashboard/adm
 import { AdminLdTop10usercreateticketComponent } from './admin-livedashboard/admin-ld-top10usercreateticket/admin-ld-top10usercreateticket.component';
 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 { PipeSha256 } from '../pipe/pipe-global.pipe';
 import { PipeEncryptoJs } from '../pipe/pipe-global.pipe';
 import { PipeDencryptoJs } from '../pipe/pipe-global.pipe';
@@ -53,6 +54,7 @@ import { PipeDencryptoJs } from '../pipe/pipe-global.pipe';
     AdminLdTop10usercreateticketComponent,
     LogsLoginComponent,
     LoginLogsComponent,
+    AdminDashboardTicketComponent,
   ],
   imports: [
     PipeglobalModule,