diff --git a/src/app/_layout/footer/footer.component.html b/src/app/_layout/footer/footer.component.html
index 1dff652..158040e 100644
--- a/src/app/_layout/footer/footer.component.html
+++ b/src/app/_layout/footer/footer.component.html
@@ -1,29 +1,66 @@
-<footer id="footer" class="footer footer-static footer-light navbar-border navbar-shadow" *ngIf="showFooter">
-  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2"><span
-      class="float-md-left d-block d-md-inline-block">Copyright &copy; 2022 <a [routerLink]=""
-        class="text-bold-800 grey darken-2" href="https://themeforest.net/user/pixinvent/portfolio?ref=pixinvent"
-        target="_blank">PIXINVENT </a></span><span *ngIf="!hideMadeWithLove"
-      class="float-md-right d-block d-md-inline-block d-none d-lg-block">Hand-crafted & Made with <i
-        class="feather ft-heart pink"></i>
-      <span id="scroll-top"></span></span></p>
+<footer
+  id="footer"
+  class="footer footer-static footer-light navbar-border navbar-shadow"
+  *ngIf="showFooter"
+>
+  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
+    <span class="float-md-left d-block d-md-inline-block"
+      >Copyright &copy; 2024
+      <a
+        [routerLink]=""
+        class="text-bold-800 grey darken-2"
+        href="https://allbestsistem.com/"
+        target="_blank"
+        >Allbest Solusi Sistem
+      </a></span
+    >
+  </p>
 </footer>
 
-<footer id="footer" class="footer fixed-bottom footer-light navbar-border navbar-shadow" *ngIf="fixedFooter">
-  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2"><span
-      class="float-md-left d-block d-md-inline-block">Copyright &copy; 2022 <a [routerLink]=""
-        class="text-bold-800 grey darken-2" href="https://themeforest.net/user/pixinvent/portfolio?ref=pixinvent"
-        target="_blank">PIXINVENT </a></span><span *ngIf="!hideMadeWithLove"
-      class="float-md-right d-block d-md-inline-block d-none d-lg-block">Hand-crafted & Made with <i
-        class="feather ft-heart pink"></i>
-      <span id="scroll-top"></span></span></p>
+<footer
+  id="footer"
+  class="footer fixed-bottom footer-light navbar-border navbar-shadow"
+  *ngIf="fixedFooter"
+>
+  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
+    <span class="float-md-left d-block d-md-inline-block"
+      >Copyright &copy; 2022
+      <a
+        [routerLink]=""
+        class="text-bold-800 grey darken-2"
+        href="https://themeforest.net/user/pixinvent/portfolio?ref=pixinvent"
+        target="_blank"
+        >PIXINVENT
+      </a></span
+    ><span
+      *ngIf="!hideMadeWithLove"
+      class="float-md-right d-block d-md-inline-block d-none d-lg-block"
+      >Hand-crafted & Made with <i class="feather ft-heart pink"></i>
+      <span id="scroll-top"></span
+    ></span>
+  </p>
 </footer>
 
-<footer id="footer" class="footer fixed-bottom footer-dark navbar-border navbar-shadow" *ngIf="darkFooter">
-  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2"><span
-      class="float-md-left d-block d-md-inline-block">Copyright &copy; 2022 <a [routerLink]=""
-        class="text-bold-800 grey darken-2" href="https://themeforest.net/user/pixinvent/portfolio?ref=pixinvent"
-        target="_blank">PIXINVENT </a></span><span *ngIf="!hideMadeWithLove"
-      class="float-md-right d-block d-md-inline-block d-none d-lg-block">Hand-crafted & Made with <i
-        class="feather ft-heart pink"></i>
-      <span id="scroll-top"></span></span></p>
+<footer
+  id="footer"
+  class="footer fixed-bottom footer-dark navbar-border navbar-shadow"
+  *ngIf="darkFooter"
+>
+  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
+    <span class="float-md-left d-block d-md-inline-block"
+      >Copyright &copy; 2022
+      <a
+        [routerLink]=""
+        class="text-bold-800 grey darken-2"
+        href="https://themeforest.net/user/pixinvent/portfolio?ref=pixinvent"
+        target="_blank"
+        >PIXINVENT
+      </a></span
+    ><span
+      *ngIf="!hideMadeWithLove"
+      class="float-md-right d-block d-md-inline-block d-none d-lg-block"
+      >Hand-crafted & Made with <i class="feather ft-heart pink"></i>
+      <span id="scroll-top"></span
+    ></span>
+  </p>
 </footer>
diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.html b/src/app/content/hemat-app/cost-management/cost-management.component.html
index 4998b63..0d5312f 100644
--- a/src/app/content/hemat-app/cost-management/cost-management.component.html
+++ b/src/app/content/hemat-app/cost-management/cost-management.component.html
@@ -38,7 +38,7 @@
                 <div class="card-dashboard">
                   <ngx-datatable
                     class="bootstrap table-bordered"
-                    [limit]="7"
+                    [limit]="10"
                     [rows]="filteredRows"
                     [columnMode]="'force'"
                     [headerHeight]="50"
@@ -65,7 +65,7 @@
                       [minWidth]="90"
                     >
                       <ng-template ngx-datatable-header-template>
-                        <span>Device Name</span>
+                        <span>Estimasi Cost Name</span>
                       </ng-template>
                       <ng-template
                         let-value="value"
diff --git a/src/app/content/hemat-app/device/device.component.html b/src/app/content/hemat-app/device/device.component.html
index e204cd4..48a1615 100644
--- a/src/app/content/hemat-app/device/device.component.html
+++ b/src/app/content/hemat-app/device/device.component.html
@@ -38,7 +38,7 @@
                 <div class="card-dashboard">
                   <ngx-datatable
                     class="bootstrap table-bordered"
-                    [limit]="7"
+                    [limit]="10"
                     [rows]="filteredRows"
                     [columnMode]="'force'"
                     [headerHeight]="50"
diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.css b/src/app/content/hemat-app/master/master-category/master-category.component.css
index e69de29..bd893c0 100644
--- a/src/app/content/hemat-app/master/master-category/master-category.component.css
+++ b/src/app/content/hemat-app/master/master-category/master-category.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;
+}
+
diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.html b/src/app/content/hemat-app/master/master-category/master-category.component.html
index bc24f17..81ed0f0 100644
--- a/src/app/content/hemat-app/master/master-category/master-category.component.html
+++ b/src/app/content/hemat-app/master/master-category/master-category.component.html
@@ -1 +1,131 @@
-<p>master-category 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>
+                  Master Category 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"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="10"
+                      [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>Category Name</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          {{ 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"
+                            
+                          >
+                            <i class="ficon feather ft-eye"></i>
+                          </button>
+                          <button
+                            class="btn btn-sm btn-warning mr-1"
+                            
+                          >
+                            <i class="ficon feather ft-edit"></i>
+                          </button>
+                          <button
+                            class="btn btn-sm btn-danger"
+                            
+                          >
+                            <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>
+  
\ No newline at end of file
diff --git a/src/app/content/hemat-app/master/master-category/master-category.component.ts b/src/app/content/hemat-app/master/master-category/master-category.component.ts
index eabbc4a..d2ee9e5 100644
--- a/src/app/content/hemat-app/master/master-category/master-category.component.ts
+++ b/src/app/content/hemat-app/master/master-category/master-category.component.ts
@@ -1,10 +1,87 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { TableApiService } from 'src/app/_services/table-api.service';
 
 @Component({
   selector: 'app-master-category',
   templateUrl: './master-category.component.html',
   styleUrls: ['./master-category.component.css']
 })
-export class MasterCategoryComponent {
+export class MasterCategoryComponent implements OnInit{
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
 
+  @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Category",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Category",
+          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
+  }
 }
diff --git a/src/app/content/hemat-app/master/master.module.ts b/src/app/content/hemat-app/master/master.module.ts
index a94c7fe..641c2d6 100644
--- a/src/app/content/hemat-app/master/master.module.ts
+++ b/src/app/content/hemat-app/master/master.module.ts
@@ -16,6 +16,7 @@ import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
 import { CardModule } from '../../partials/general/card/card.module';
 import { MatchHeightModule } from '../../partials/general/match-height/match-height.module';
+import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
 
 
 
@@ -35,6 +36,7 @@ import { MatchHeightModule } from '../../partials/general/match-height/match-hei
     MatchHeightModule,
     NgxDatatableModule,
     PerfectScrollbarModule,
+    BreadcrumbModule,
     NgbModule,
     BlockUIModule.forRoot({
       template: BlockTemplateComponent
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.css b/src/app/content/hemat-app/monitoring/building/building.component.css
index 38b0b47..41da42e 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.css
+++ b/src/app/content/hemat-app/monitoring/building/building.component.css
@@ -1,140 +1,8 @@
-:host ::ng-deep .Likes .ct-series-a .ct-point {
-    stroke: #28d094;
+:host ::ng-deep .gap_fl_btn {
+    margin: 0 0.3rem;
 }
-:host ::ng-deep .Likes .ct-line {
-    fill: none;
-    stroke-width: 2px;
-}
-:host ::ng-deep .Likes .ct-point{
-    stroke-width: 0px;
-}
-:host ::ng-deep .Likes .ct-series-a .ct-line {
-    stroke: #28d094;
-}
-:host ::ng-deep .Likes .ct-series-a .ct-area {
-    fill: #28d094;
-}
-:host ::ng-deep .Comments .ct-series-a .ct-point {
-    stroke: #FF9149;
-}
-:host ::ng-deep .Comments .ct-line {
-    fill: none;
-    stroke-width: 2px;
-}
-:host ::ng-deep .Comments .ct-point{
-    stroke-width: 0px;
-}
-:host ::ng-deep .Comments .ct-series-a .ct-line {
-    stroke: #FF9149;
-}
-:host ::ng-deep .Comments .ct-series-a .ct-area {
-    fill: #FF9149;
-}
-:host ::ng-deep .Views .ct-series-a .ct-point {
-    stroke: #FF4961;
-}
-:host ::ng-deep .Views .ct-line {
-    fill: none;
-    stroke-width: 2px;
-}
-:host ::ng-deep .Views .ct-point{
-    stroke-width: 0px;
-}
-:host ::ng-deep .Views .ct-series-a .ct-line {
-    stroke: #FF4961;
-}
-:host ::ng-deep .Views .ct-series-a .ct-area {
-    fill: #FF4961;
-}
-:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-point{
-    stroke: #ff9149;
-}
-:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-line{
-    stroke: #ff9149;
 
+:host ::ng-deep .block-ui-wrapper {
+  background: rgba(255, 249, 249, 0.5) !important;
 }
-:host ::ng-deep .sp-line-total-cost .ct-series-a .ct-area{
-    fill: #ff9149;
-    fill-opacity: 1;
-}
-:host ::ng-deep .sp-line-total-cost .ct-point{
-    stroke-width: 0px;
-}
-:host ::ng-deep .sp-line-total-cost svg {
-    margin-left: 13px;
-}
-:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-point{
-    stroke: #28d094;
-}
-:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-line{
-    stroke: #28d094;
 
-}
-:host ::ng-deep .sp-line-total-sales .ct-series-a .ct-area{
-    fill: #28d094;
-    fill-opacity: 1;
-}
-:host ::ng-deep .sp-line-total-sales .ct-point{
-    stroke-width: 0px;
-}
-:host ::ng-deep .sp-line-total-sales svg {
-    margin-left: 13px;
-}
-:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-point{
-    stroke: #ff4961;
-}
-:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-line{
-    stroke: #ff4961;
-
-}
-:host ::ng-deep .sp-line-total-revenue .ct-series-a .ct-area{
-    fill: #ff4961;
-    fill-opacity: 1;
-}
-:host ::ng-deep .sp-line-total-revenue .ct-point{
-    stroke-width: 0px;
-}
-:host ::ng-deep .sp-line-total-revenue svg {
-    margin-left: 13px;
-}
-:host ::ng-deep .ct-bar {
-    fill: none;
-    stroke-width: 2px;
-}
-:host ::ng-deep  .sp-bar-total-cost .ct-series-a .ct-bar{
-    stroke: #ff9148;
-}
-:host ::ng-deep  .sp-bar-total-sales .ct-series-a .ct-bar{
-    stroke: #28d094;
-}
-:host ::ng-deep  .sp-bar-total-revenue .ct-series-a .ct-bar{
-    stroke: #ff4961;
-}
-:host ::ng-deep  .sp-bar-total-cost {
-    margin-bottom: -90px;
-}
-:host ::ng-deep  .sp-bar-total-sales{
-    margin-bottom: -90px;
-}
-:host ::ng-deep  .sp-bar-total-revenue{
-    margin-bottom: -90px;
-}
-:host ::ng-deep .feedbacks .ct-series-a .ct-slice-donut {
-    stroke: #28d094;
-    stroke-width: 10px !important;
-}
-:host ::ng-deep .Subscribers .ct-series-a .ct-slice-donut {
-    stroke: #ff9149;
-    stroke-width: 10px !important;
-}
-:host ::ng-deep .Users .ct-series-a .ct-slice-donut {
-    stroke: #ff4961;
-    stroke-width: 10px !important;
-}
-:host ::ng-deep  .ct-series-b .ct-slice-donut {
-    stroke: #eeeeee;
-    stroke-width: 12px !important;
-}
-:host ::ng-deep  .text-muted {
-   position: absolute;
-}
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.html b/src/app/content/hemat-app/monitoring/building/building.component.html
index d57cb32..eac34f8 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.html
+++ b/src/app/content/hemat-app/monitoring/building/building.component.html
@@ -6,181 +6,130 @@
     <div class="content-body">
       <section id="social-cards">
         <div class="row mt-2">
-          <div class="col-xl-4 col-md-6 col-12">
+          <div class="col-xl-4 col-md-6 col-12" *ngFor="let data of dataArray">
             <div class="card">
               <div class="card-content">
                 <div class="card-body text-center">
                   <div class="card-header mb-2">
-                    <span class="success">New Feedbacks</span>
-                    <h3 class="display-4 blue-grey darken-1">2,487</h3>
+                    <div class="row">
+                      <div class="col-12 text-center">
+                        <h4
+                          class="text-muted mb-1 font-weight-bold"
+                          style="font-family: Montserrat, sans-serif"
+                        >
+                          Building Name
+                        </h4>
+                        <h3
+                          class="text-muted mb-0"
+                          style="font-family: Montserrat, sans-serif"
+                        >
+                          {{data.build_name}}
+                        </h3>
+                      </div>
+                    </div>
+                    <hr style="border-top: 3px solid #100a0a" />
                   </div>
                   <div class="card-content">
-                    <i
-                      class="knob-center-icon icon-note knob hide-value responsive angle-offset"
-                      style="
-                        width: 79px;
-                        height: 50px;
-                        position: absolute;
-                        vertical-align: middle;
-                        margin-top: 70px;
-                        margin-left: -30px;
-                        border: 0px;
-                        background: none;
-                        font: bold 30px Arial;
-                        text-align: center;
-                        color: rgb(225, 225, 225);
-                        padding: 0px;
-                        font-size: 50px;
-                      "
-                    ></i>
                     <x-chartist
-                      *ngIf="feedbacksdonutChart"
-                      class="feedbacks"
-                      [data]="feedbacksdonutChart.data"
-                      [type]="feedbacksdonutChart.type"
-                      [options]="feedbacksdonutChart.options"
-                      [responsiveOptions]="
-                        feedbacksdonutChart.responsiveOptions
-                      "
-                      [events]="feedbacksdonutChart.events"
+                      *ngIf="data"
+                      [data]="data.donut"
+                      [type]="donutChart1.type"
+                      [options]="donutChart1.options"
+                      [events]="donutChart1.events"
                     >
                     </x-chartist>
-                    <ul class="list-inline clearfix mt-2">
-                      <li
-                        class="border-right-blue-grey border-right-lighten-2 pr-1"
-                      >
-                        <h1 class="blue-grey darken-1 text-bold-400">95%</h1>
-                        <span class="success"
-                          ><i class="la la-caret-up"></i> Positive</span
-                        >
-                      </li>
-                      <li>
-                        <h1 class="blue-grey darken-1 text-bold-400">5%</h1>
-                        <span class="danger darken-2"
-                          ><i class="la la-caret-down"></i> Negative</span
-                        >
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-xl-4 col-md-6 col-12">
-            <div class="card">
-              <div class="card-content">
-                <div class="card-body text-center">
-                  <div class="card-header mb-2">
-                    <span class="success">New Feedbacks</span>
-                    <h3 class="display-4 blue-grey darken-1">2,487</h3>
-                  </div>
-                  <div class="card-content">
-                    <i
-                      class="knob-center-icon icon-note knob hide-value responsive angle-offset"
+
+                    <div
+                      class="text-center"
                       style="
-                        width: 79px;
-                        height: 50px;
                         position: absolute;
-                        vertical-align: middle;
-                        margin-top: 70px;
-                        margin-left: -30px;
-                        border: 0px;
-                        background: none;
-                        font: bold 30px Arial;
-                        text-align: center;
-                        color: rgb(225, 225, 225);
-                        padding: 0px;
-                        font-size: 50px;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
                       "
-                    ></i>
-                    <x-chartist
-                      *ngIf="feedbacksdonutChart"
-                      class="feedbacks"
-                      [data]="feedbacksdonutChart.data"
-                      [type]="feedbacksdonutChart.type"
-                      [options]="feedbacksdonutChart.options"
-                      [responsiveOptions]="
-                        feedbacksdonutChart.responsiveOptions
-                      "
-                      [events]="feedbacksdonutChart.events"
                     >
-                    </x-chartist>
-                    <ul class="list-inline clearfix mt-2">
-                      <li
-                        class="border-right-blue-grey border-right-lighten-2 pr-1"
+                      <h3
+                        class="display-4 blue-grey darken-1"
+                        style="font-size: 2em"
                       >
-                        <h1 class="blue-grey darken-1 text-bold-400">95%</h1>
-                        <span class="success"
-                          ><i class="la la-caret-up"></i> Positive</span
-                        >
-                      </li>
-                      <li>
-                        <h1 class="blue-grey darken-1 text-bold-400">5%</h1>
-                        <span class="danger darken-2"
-                          ><i class="la la-caret-down"></i> Negative</span
-                        >
-                      </li>
-                    </ul>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-xl-4 col-md-6 col-12">
-            <div class="card">
-              <div class="card-content">
-                <div class="card-body text-center">
-                  <div class="card-header mb-2">
-                    <span class="success">New Feedbacks</span>
-                    <h3 class="display-4 blue-grey darken-1">2,487</h3>
-                  </div>
-                  <div class="card-content">
-                    <i
-                      class="knob-center-icon icon-note knob hide-value responsive angle-offset"
-                      style="
-                        width: 79px;
-                        height: 50px;
-                        position: absolute;
-                        vertical-align: middle;
-                        margin-top: 70px;
-                        margin-left: -30px;
-                        border: 0px;
-                        background: none;
-                        font: bold 30px Arial;
-                        text-align: center;
-                        color: rgb(225, 225, 225);
-                        padding: 0px;
-                        font-size: 50px;
-                      "
-                    ></i>
-                    <x-chartist
-                      *ngIf="feedbacksdonutChart"
-                      class="feedbacks"
-                      [data]="feedbacksdonutChart.data"
-                      [type]="feedbacksdonutChart.type"
-                      [options]="feedbacksdonutChart.options"
-                      [responsiveOptions]="
-                        feedbacksdonutChart.responsiveOptions
-                      "
-                      [events]="feedbacksdonutChart.events"
-                    >
-                    </x-chartist>
-                    <ul class="list-inline clearfix mt-2">
-                      <li
-                        class="border-right-blue-grey border-right-lighten-2 pr-1"
+                        {{data.total}} kWh
+                      </h3>
+                    </div>
+                    <div class="card-body" style="padding-top: 0">
+                      <div class="row mb-3">
+                        <div class="col Started">
+                          <span class="mb-1 text-muted cardtext d-block"
+                            >23% - Lighning</span
+                          >
+                          <div>
+                            <ngb-progressbar
+                              height="7px"
+                              type="success"
+                              [value]="23"
+                            ></ngb-progressbar>
+                          </div>
+                        </div>
+                        <div class="col Progress">
+                          <span class="mb-1 text-muted cardtext d-block"
+                            >14% - In Progress</span
+                          >
+                          <div>
+                            <ngb-progressbar
+                              height="7px"
+                              type="danger"
+                              [value]="14"
+                            ></ngb-progressbar>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="row mb-3">
+                        <div class="col Remaining">
+                          <span class="mb-1 text-muted cardtext d-block"
+                            >35% - Remaining</span
+                          >
+                          <div>
+                            <ngb-progressbar
+                              height="7px"
+                              type="warning"
+                              [value]="35"
+                            ></ngb-progressbar>
+                          </div>
+                        </div>
+                        <div class="col Done">
+                          <span class="mb-1 text-muted cardtext d-block"
+                            >28% - Started</span
+                          >
+                          <div>
+                            <ngb-progressbar
+                              height="7px"
+                              type="primary"
+                              [value]="28"
+                            ></ngb-progressbar>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="form-group text-center">
+                      <button
+                        type="button"
+                        class="btn btn-float btn-square btn-outline-secondary"
                       >
-                        <h1 class="blue-grey darken-1 text-bold-400">95%</h1>
-                        <span class="success"
-                          ><i class="la la-caret-up"></i> Positive</span
-                        >
-                      </li>
-                      <li>
-                        <h1 class="blue-grey darken-1 text-bold-400">5%</h1>
-                        <span class="danger darken-2"
-                          ><i class="la la-caret-down"></i> Negative</span
-                        >
-                      </li>
-                    </ul>
+                        <i class="feather ft-layers"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="gap_fl_btn btn btn-float btn-square btn-float-lg btn-outline-primary"
+                      >
+                        <i class="la la-building"></i>
+                      </button>
+                      <button
+                        type="button"
+                        class="btn btn-float btn-square btn-outline-secondary"
+                      >
+                        <i class="feather ft-log-in"></i>
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -188,7 +137,6 @@
           </div>
         </div>
       </section>
-      <!-- // Social cards section end -->
     </div>
   </div>
 </div>
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.ts b/src/app/content/hemat-app/monitoring/building/building.component.ts
index afd5575..48f80cb 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.ts
+++ b/src/app/content/hemat-app/monitoring/building/building.component.ts
@@ -10,49 +10,55 @@ export class BuildingComponent {
   Data: any;
   public breadcrumb: any;
   feedbacksdonutChart: any;
+  donutChart1: any;
+
+  dataArray = [
+    {
+      id: 1,
+      build_name: "PT Allbest Solusi Sistem",
+      total: "2345",
+      donut: {
+        series: [20, 80],
+        labels: [],
+      },
+    },
+    {
+      id: 2,
+      build_name: "PT Informa Media Pratama",
+      total: "342",
+      donut: {
+        series: [40, 60],
+        labels: [],
+      },
+    },
+  ];
 
   constructor(private chartApiservice: ChartApiService) {}
 
   ngOnInit() {
     this.breadcrumb = {
-      mainlabel: "Advance Social Cards",
+      mainlabel: "Dashboard",
       links: [
         {
-          name: "Home",
-          isLink: true,
-          link: "/dashboard/sales",
-        },
-        {
-          name: "Advance Cards",
-          isLink: true,
-          link: "#",
-        },
-        {
-          name: "Social",
+          name: "Dashboard",
           isLink: false,
-          link: "#",
         },
       ],
     };
-    this.chartApiservice.getStatisticsData().subscribe((Response) => {
-      this.Data = Response;
-      this.getlineArea();
-    });
-  }
 
-  getlineArea() {
-    const ChartData = this.Data;
-    this.feedbacksdonutChart = {
+    this.donutChart1 = {
       type: "Pie",
-      data: ChartData["feedbacksdonutChart"],
       options: {
-        showLabel: false,
-        chartPadding: 0,
         fullwidth: true,
-        height: "200px",
+        height: "250px",
         donut: true,
-        startAngle: 0,
+        donutWidth: 60,
+        startAngle: 270,
+        total: 200,
+        showLabel: false,
       },
     };
+
   }
+
 }