penambahan page cost management

src/app/content/hemat-app/cost-management/cost-management.component.css

@@ -0,0 +1,190 @@
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
+    font-family: inherit;
+    font-size: medium;
+    font-weight: bold;
+    color: #6B6F82;
+}
+:host ::ng-deep .ngx-datatable .datatable-row-center, .ngx-datatable .datatable-row-group, .ngx-datatable .datatable-row-right {
+    position: relative;
+    height: 50px !important;
+}
+
+:host ::ng-deep .datatable-icon-right:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-skip:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-left:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-left:before {
+    content: "\2039";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-prev:before {
+    content: "\00AB";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-right:before {
+    content: "\203A";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-skip:before {
+    content: "\00BB";
+    font-size: x-large;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev {
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #d4d2e7;
+}
+
+:host ::ng-deep .datatable-footer .datatable-pager ul li:not(.disabled).active a,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] ul[_ngcontent-c11] li[_ngcontent-c11]:not(.disabled):hover a[_ngcontent-c11] {
+    background-color: #d4d2e7;
+    font-weight: bold;
+    font-size: larger;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
+    height: 32px;
+    min-width: 34px;
+    line-height: 22px;
+    padding: 0;
+    border-radius: 3px;
+    margin: 0 3px;
+    text-align: center;
+    vertical-align: top;
+    padding-top: 3px;
+    text-decoration: none;
+    vertical-align: bottom;
+    color: #7c8091;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 14px;
+    line-height: 9px;
+    padding: 0px 08px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-left,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-right,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-skip,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager .datatable-icon-prev,
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-right[_ngcontent-c11],
+.ngx-datatable.bootstrap[_ngcontent-c11] .datatable-footer[_ngcontent-c11] .datatable-pager[_ngcontent-c11] .datatable-icon-prev[_ngcontent-c11] {
+    font-size: 0px;
+    line-height: 22px;
+    padding: 0px 09px;
+    background-color: #ffffff;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
+    background-color: #545454;
+    font-weight: bold;
+    color: white;
+
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
+.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
+    background-color: #545454;
+    font-weight: bold;
+    color: white;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
+    background: #727e8e;
+    color: #ededed;
+    margin-top: -1px;
+    overflow: inherit;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+    font-weight: bold;
+    height: unset !important;
+    overflow: inherit
+}
+
+:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
+    flex: 0 0 0%;
+}
+
+:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
+    display: flex;
+}
+
+:host ::ng-deep .block-ui-wrapper {
+    background: rgba(255, 249, 249, 0.5) !important;
+}
+:host ::ng-deep .ngx-datatable .datatable-footer .selected-count .datatable-pager {
+   flex: 0 0 0%;
+}
+
+:host ::ng-deep .ngx-datatable {
+  display: -webkit-box;
+}
+

src/app/content/hemat-app/cost-management/cost-management.component.html

@@ -1 +1,191 @@
-<p>cost-management works!</p>
+<div class="app-content content">
+  <div class="content-wrapper">
+    <div class="content-header row mb-1">
+      <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
+    </div>
+    <div class="content-body">
+      <section id="configuration">
+        <div class="row">
+          <div
+            class="col-12"
+            *blockUI="'zeroConfiguration'; message: 'Loading'"
+          >
+            <m-card>
+              <ng-container mCardHeaderTitle>
+                Cost Management Table
+              </ng-container>
+              <ng-container mCardBody>
+                <div class="row mb-2">
+                  <div class="col-md-6">
+                    <input
+                      type="text"
+                      class="form-control"
+                      placeholder="Search..."
+                      [(ngModel)]="searchTerm"
+                      (input)="filterRows()"
+                      (touchstart)="onTouchStart($event)"
+                    />
+                  </div>
+                  <div class="col-md-6 text-right">
+                    <button
+                      class="btn btn-secondary"
+                      [routerLink]="['/device/add-row']"
+                    >
+                      <i class="feather ft-plus"></i>&nbsp; Add new data
+                    </button>
+                  </div>
+                </div>
+                <div class="card-dashboard">
+                  <ngx-datatable
+                    class="bootstrap table-bordered"
+                    [limit]="7"
+                    [rows]="filteredRows"
+                    [columnMode]="'force'"
+                    [headerHeight]="50"
+                    [footerHeight]="50"
+                    [rowHeight]="50"
+                    fxFlex="auto"
+                    [scrollbarH]="true"
+                  >
+                    <ngx-datatable-column
+                      name="#"
+                      [flexGrow]="1"
+                      [minWidth]="10"
+                    >
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-rowIndex="rowIndex"
+                      >
+                        {{ rowIndex + 1 }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="Name"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template ngx-datatable-header-template>
+                        <span>Device Name</span>
+                      </ng-template>
+                      <ng-template
+                        let-value="value"
+                        ngx-datatable-cell-template
+                      >
+                        {{ value }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="Position"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template ngx-datatable-header-template>
+                        <span>Category</span>
+                      </ng-template>
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
+                        {{ value }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="Office"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template ngx-datatable-header-template>
+                        <span>Location</span>
+                      </ng-template>
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
+                        {{ value }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="Age"
+                      [flexGrow]="1"
+                      [minWidth]="40"
+                    >
+                      <ng-template ngx-datatable-header-template>
+                        <span>Location Room</span>
+                      </ng-template>
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
+                        {{ value }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="Startdate"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template ngx-datatable-header-template>
+                        <span>Duration Use</span>
+                      </ng-template>
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
+                        {{ value }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="Salary"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template ngx-datatable-header-template>
+                        <span>Status</span>
+                      </ng-template>
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
+                        {{ value }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="Actions"
+                      [flexGrow]="1"
+                      [minWidth]="150"
+                    >
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-rowIndex="rowIndex"
+                        let-row="row"
+                      >
+                        <button
+                          class="btn btn-sm btn-info mr-1"
+                          (click)="viewRow(row)"
+                        >
+                          <i class="ficon feather ft-eye"></i>
+                        </button>
+                        <button
+                          class="btn btn-sm btn-warning mr-1"
+                          (click)="editRow(row)"
+                        >
+                          <i class="ficon feather ft-edit"></i>
+                        </button>
+                        <button
+                          class="btn btn-sm btn-danger"
+                          (click)="deleteRow(row)"
+                        >
+                          <i class="ficon feather ft-trash-2"></i>
+                        </button>
+                      </ng-template>
+                    </ngx-datatable-column>
+                  </ngx-datatable>
+                </div>
+              </ng-container>
+            </m-card>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>

src/app/content/hemat-app/cost-management/cost-management.component.ts

@@ -1,10 +1,84 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { TableApiService } from 'src/app/_services/table-api.service';
 
 @Component({
   selector: 'app-cost-management',
   templateUrl: './cost-management.component.html',
   styleUrls: ['./cost-management.component.css']
 })
-export class CostManagementComponent {
+export class CostManagementComponent implements OnInit{
+  public breadcrumb: any;
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
 
+  constructor(
+    private tableApiservice: TableApiService,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Cost Management",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Cost Management",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.tableApiservice.getTableInitialisationData().subscribe((response) => {
+      this.data = response;
+      this.filteredRows = this.data.rows;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [...this.data.rows];
+    } else {
+      this.filteredRows = this.data.rows.filter((row) =>
+        this.rowContainsSearchTerm(row)
+      );
+    }
+  }
+
+  rowContainsSearchTerm(row: any): boolean {
+    const searchTermLC = this.searchTerm.toLowerCase();
+    return Object.values(row).some(
+      (value) =>
+        value !== null &&
+        value.toString().toLowerCase().includes(searchTermLC)
+    );
+  }
+
+  viewRow(row) {
+    console.log("View row:", row);
+    this.router.navigate(["/device/view", row.name]);
+  }
+
+  editRow(row) {
+    console.log("Edit row:", row);
+    this.router.navigate(["/device/edit", row.name]);
+  }
+
+  deleteRow(row) {
+    console.log("Delete row:", row);
+  }
+
+  onTouchStart(event: Event) {
+    event.preventDefault(); // Add this if necessary
+  }
 }

src/app/content/hemat-app/cost-management/cost-management.module.ts

@@ -2,6 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { CostManagementComponent } from './cost-management.component';
 import { RouterModule } from '@angular/router';
+import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { BlockUIModule } from 'ng-block-ui';
+import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
+import { CardModule } from '../../partials/general/card/card.module';
 
 
 
@@ -11,6 +16,12 @@ import { RouterModule } from '@angular/router';
   ],
   imports: [
     CommonModule,
+    CardModule,
+    BreadcrumbModule,
+    NgxDatatableModule,
+    BlockUIModule.forRoot({
+      template: BlockTemplateComponent
+    }),
     RouterModule.forChild([
       {
         path: '',

src/app/content/hemat-app/device/device.component.html

@@ -6,9 +6,15 @@
     <div class="content-body">
       <section id="configuration">
         <div class="row">
-          <div class="col-12" *blockUI="'zeroConfiguration'; message: 'Loading'">
+          <div
-            <m-card [options]="options" (reloadFunction)="reloadZeroConfiguration($event)">
+            class="col-12"
+            *blockUI="'zeroConfiguration'; message: 'Loading'"
+          >
+            <m-card>
               <ng-container mCardHeaderTitle>
+                Device Table
+              </ng-container>
+              <ng-container mCardBody>
                 <div class="row mb-2">
                   <div class="col-md-6">
                     <input
@@ -17,6 +23,7 @@
                       placeholder="Search..."
                       [(ngModel)]="searchTerm"
                       (input)="filterRows()"
+                      (touchstart)="onTouchStart($event)"
                     />
                   </div>
                   <div class="col-md-6 text-right">
@@ -28,68 +35,124 @@
                     </button>
                   </div>
                 </div>
-              </ng-container>
-              <ng-container mCardBody>
                 <div class="card-dashboard">
-                  <ngx-datatable class="bootstrap table-bordered" [limit]="7" [rows]="filteredRows" [columnMode]="'force'"
+                  <ngx-datatable
-                    [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" fxFlex="auto" [perfectScrollbar]="config">
+                    class="bootstrap table-bordered"
-                    <ngx-datatable-column name="#" [flexGrow]="1" [minWidth]="10">
+                    [limit]="7"
-                      <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex">
+                    [rows]="filteredRows"
+                    [columnMode]="'force'"
+                    [headerHeight]="50"
+                    [footerHeight]="50"
+                    [rowHeight]="50"
+                    fxFlex="auto"
+                    [scrollbarH]="true"
+                  >
+                    <ngx-datatable-column
+                      name="#"
+                      [flexGrow]="1"
+                      [minWidth]="10"
+                    >
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-rowIndex="rowIndex"
+                      >
                         {{ rowIndex + 1 }}
                       </ng-template>
                     </ngx-datatable-column>
-                    <ngx-datatable-column name="Name" [flexGrow]="1" [minWidth]="90">
+                    <ngx-datatable-column
+                      name="Name"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
                       <ng-template ngx-datatable-header-template>
                         <span>Device Name</span>
                       </ng-template>
-                      <ng-template let-value="value" ngx-datatable-cell-template>
+                      <ng-template
+                        let-value="value"
+                        ngx-datatable-cell-template
+                      >
                         {{ value }}
                       </ng-template>
                     </ngx-datatable-column>
-                    <ngx-datatable-column name="Position" [flexGrow]="1" [minWidth]="90">
+                    <ngx-datatable-column
+                      name="Position"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
                       <ng-template ngx-datatable-header-template>
                         <span>Category</span>
                       </ng-template>
-                      <ng-template ngx-datatable-cell-template let-value="value">
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
                         {{ value }}
                       </ng-template>
                     </ngx-datatable-column>
-                    <ngx-datatable-column name="Office" [flexGrow]="1" [minWidth]="90">
+                    <ngx-datatable-column
+                      name="Office"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
                       <ng-template ngx-datatable-header-template>
                         <span>Location</span>
                       </ng-template>
-                      <ng-template ngx-datatable-cell-template let-value="value">
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
                         {{ value }}
                       </ng-template>
                     </ngx-datatable-column>
-                    <ngx-datatable-column name="Age" [flexGrow]="1" [minWidth]="40">
+                    <ngx-datatable-column
+                      name="Age"
+                      [flexGrow]="1"
+                      [minWidth]="40"
+                    >
                       <ng-template ngx-datatable-header-template>
                         <span>Location Room</span>
                       </ng-template>
-                      <ng-template ngx-datatable-cell-template let-value="value">
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
                         {{ value }}
                       </ng-template>
                     </ngx-datatable-column>
-                    <ngx-datatable-column name="Startdate" [flexGrow]="1" [minWidth]="90">
+                    <ngx-datatable-column
+                      name="Startdate"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
                       <ng-template ngx-datatable-header-template>
                         <span>Duration Use</span>
                       </ng-template>
-                      <ng-template ngx-datatable-cell-template let-value="value">
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
                         {{ value }}
                       </ng-template>
                     </ngx-datatable-column>
-                    <ngx-datatable-column name="Salary" [flexGrow]="1" [minWidth]="90">
+                    <ngx-datatable-column
+                      name="Salary"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
                       <ng-template ngx-datatable-header-template>
                         <span>Status</span>
                       </ng-template>
-                      <ng-template ngx-datatable-cell-template let-value="value">
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
                         {{ value }}
                       </ng-template>
                     </ngx-datatable-column>
                     <ngx-datatable-column
                       name="Actions"
                       [flexGrow]="1"
-                      [minWidth]="90"
+                      [minWidth]="150"
                     >
                       <ng-template
                         ngx-datatable-cell-template

src/app/content/hemat-app/device/device.component.ts

@@ -15,21 +15,10 @@ export class DeviceComponent implements OnInit {
   filteredRows: any[];
   searchTerm: string = "";
   rows: any = [];
-  defaultrows: any;
-  DOMrows: any;
-  Scrollrows: any;
-  temp2 = this.rows;
   public breadcrumb: any;
 
   @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
 
-  options = {
-    close: true,
-    expand: true,
-    minimize: true,
-    reload: true,
-  };
-
   constructor(
     private tableApiservice: TableApiService,
     private modalService: NgbModal,
@@ -120,4 +109,8 @@ export class DeviceComponent implements OnInit {
   deleteRow(row) {
     console.log("Delete row:", row);
   }
+
+  onTouchStart(event: Event) {
+    event.preventDefault(); // Add this if necessary
+  }
 }