penambahan detail room dan penyesuaian device list

src/app/_layout/breadcrumb/breadcrumb.component.html

@@ -1,18 +1,28 @@
 <div class="row">
-  <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new" *ngIf="breadcrumb">
+  <div
-    <h3 class="content-header-title mb-0 d-inline-block">{{breadcrumb.mainlabel}}</h3>
+    class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new"
+    *ngIf="breadcrumb"
+  >
+    <button *ngIf="breadcrumb.isLinkBack" type="button" class="btn btn-icon btn-pure secondary mr-1" routerLink="{{ breadcrumb.linkBack }}">
+      <i class="feather ft-chevron-left"></i>
+    </button>
+    <h3 class="content-header-title mb-0 d-inline-block">
+      {{ breadcrumb.mainlabel }}
+    </h3>
     <div class="row breadcrumbs-top d-inline-block">
       <div class="breadcrumb-wrapper col-12">
         <ol class="breadcrumb">
           <li class="breadcrumb-item" *ngFor="let link of breadcrumb.links">
-            <a *ngIf="link.isLink" routerLink="{{link.link}}">{{link.name}}</a>
+            <a *ngIf="link.isLink" routerLink="{{ link.link }}">{{
+              link.name
+            }}</a>
             <span *ngIf="!link.isLink">{{ link.name }}</span>
           </li>
         </ol>
       </div>
     </div>
   </div>
-  <div class="content-header-right col-md-6 col-12">
+  <!-- <div class="content-header-right col-md-6 col-12">
     <div  class="d-inline-block float-md-right" ngbDropdown>
       <button class="btn btn-info" id="dropdownBasic1" ngbDropdownToggle>Action</button>
       <div ngbDropdownMenu class="arrow _dropdown_mob dropdown-menu-right" aria-labelledby="dropdownBasic1">
@@ -23,5 +33,5 @@
         <button class="dropdown-item">Settings</button>
       </div>
     </div>
-  </div>
+  </div> -->
 </div>

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">
+<footer
-  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2"><span
+  id="footer"
-      class="float-md-left d-block d-md-inline-block">Copyright &copy; 2022 <a [routerLink]=""
+  class="footer footer-static footer-light navbar-border navbar-shadow"
-        class="text-bold-800 grey darken-2" href="https://themeforest.net/user/pixinvent/portfolio?ref=pixinvent"
+  *ngIf="showFooter"
-        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
+  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
-        class="feather ft-heart pink"></i>
+    <span class="float-md-left d-block d-md-inline-block"
-      <span id="scroll-top"></span></span></p>
+      >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">
+<footer
-  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2"><span
+  id="footer"
-      class="float-md-left d-block d-md-inline-block">Copyright &copy; 2022 <a [routerLink]=""
+  class="footer fixed-bottom footer-light navbar-border navbar-shadow"
-        class="text-bold-800 grey darken-2" href="https://themeforest.net/user/pixinvent/portfolio?ref=pixinvent"
+  *ngIf="fixedFooter"
-        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
+  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
-        class="feather ft-heart pink"></i>
+    <span class="float-md-left d-block d-md-inline-block"
-      <span id="scroll-top"></span></span></p>
+      >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">
+<footer
-  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2"><span
+  id="footer"
-      class="float-md-left d-block d-md-inline-block">Copyright &copy; 2022 <a [routerLink]=""
+  class="footer fixed-bottom footer-dark navbar-border navbar-shadow"
-        class="text-bold-800 grey darken-2" href="https://themeforest.net/user/pixinvent/portfolio?ref=pixinvent"
+  *ngIf="darkFooter"
-        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
+  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
-        class="feather ft-heart pink"></i>
+    <span class="float-md-left d-block d-md-inline-block"
-      <span id="scroll-top"></span></span></p>
+      >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>

src/app/_layout/header/horizontal/horizontal.component.html

@@ -2,15 +2,17 @@
 <nav
   class="top-header header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow navbar-static-top navbar-light navbar-brand-center"
   id="top-header" [ngClass]="selectedHeaderNavBarClass">
-  <div class="navbar-wrapper">
+  <div class="navbar-wrapper" style="background-color: #2c343b !important;">
     <div id="navbar-header" class="navbar-header">
       <ul class="nav navbar-nav flex-row">
         <li class="nav-item mobile-menu d-md-none mr-auto" ><a
             class="nav-link nav-menu-main menu-toggle hidden-xs11" (click)="toggleNavigation($event)"><i
               class="feather ft-menu font-large-1" ></i></a></li>
-        <li class="nav-item"><a [routerLink]="['/dashboard/sales']" class="navbar-brand"><img class="brand-logo" alt="modern admin logo"
+        <li class="nav-item"><a [routerLink]="['/monitoring']" class="navbar-brand"><img class="brand-logo" alt="modern admin logo"
               src="../../../../assets/images/logo/logo.png">
-            <h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}}</h3>
+            <!-- <h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}}</h3> -->
+            <!-- <h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}} - (V@2024.05.22.01)</h3> -->
+            <h3 class="brand-text" style="color: aliceblue;">Hemat - (V@2024.05.27.01)</h3>
           </a></li>
 
         <li class="nav-item d-md-none"><a class="nav-link open-navbar-container" data-toggle="collapse"
@@ -20,7 +22,7 @@
     <div class="navbar-container content">
       <div class="collapse navbar-collapse show" id="navbar-mobile">
         <ul class="nav navbar-nav mr-auto float-left">
-          <li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-menu-main menu-toggle hidden-xs"
+          <!-- <li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-menu-main menu-toggle hidden-xs"
               (click)="toggleFixMenu($event)" ><i class="feather ft-menu"></i></a></li>
           <li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-link-expand"
               (click)="toggleFullScreen()" *ngIf ="maximize === 'on'"><i class="ficon feather ft-maximize"></i></a></li>
@@ -29,10 +31,10 @@
             <div class="search-input" [ngClass]="{'open': isHeaderSearchOpen}">
               <input class="input" type="text" placeholder="Explore Modern...">
             </div>
-          </li>
+          </li> -->
         </ul>
         <ul class="nav navbar-nav float-right" >
-          <li class="dropdown-language nav-item" ngbDropdown *ngIf ="internationalization === 'on'">
+          <!-- <li class="dropdown-language nav-item" ngbDropdown *ngIf ="internationalization === 'on'">
             <a [routerLink]="" class="dropdown-toggle nav-link" ngbDropdownToggle id="dropdown-flag">
               <i class="flag-icon flag-icon-gb"></i><span class="selected-language"></span>
             </a>
@@ -50,8 +52,8 @@
                 <i class="flag-icon flag-icon-de"></i> German
               </a>
             </div>
-          </li>
+          </li> -->
-          <li class="dropdown-notification nav-item dropdown" ngbDropdown *ngIf ="notification === 'on'">
+          <!-- <li class="dropdown-notification nav-item dropdown" ngbDropdown *ngIf ="notification === 'on'">
             <a class="nav-link nav-link-label" ngbDropdownToggle>
               <i class="ficon feather ft-bell"></i>
               <span class="badge badge-pill badge-danger badge-up badge-glow">5</span>
@@ -124,8 +126,8 @@
               <li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
                   href="javascript:void(0)">Read all notifications</a></li>
             </ul>
-          </li>
+          </li> -->
-          <li class="dropdown-notification nav-item" ngbDropdown *ngIf ="email === 'on'">
+          <!-- <li class="dropdown-notification nav-item" ngbDropdown *ngIf ="email === 'on'">
             <a class="nav-link nav-link-label" ngbDropdownToggle><i class="ficon feather ft-mail"></i></a>
             <ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
               <li class="dropdown-menu-header">
@@ -185,7 +187,7 @@
               <li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
                   href="javascript:void(0)">Read all messages</a></li>
             </ul>
-          </li>
+          </li> -->
 
           <li class="dropdown-user nav-item" ngbDropdown>
             <a class="nav-link dropdown-user-link" ngbDropdownToggle>

src/app/_layout/private-layout/private-layout.component.html

@@ -1,14 +1,20 @@
 <div (window:resize)="onResize($event)"></div>
 <app-navigation></app-navigation>
 <router-outlet></router-outlet>
-<div class="sidenav-overlay d-none" id="sidenav-overlay" (click)="rightbar($event)"></div>
+<div
+  class="sidenav-overlay d-none"
+  id="sidenav-overlay"
+  (click)="rightbar($event)"
+></div>
 <app-footer></app-footer>
-<div *ngIf ="customizer === 'on'">
+<!-- <div *ngIf="customizer === 'on'">
   <app-customizer *ngIf="layout === 'vertical'"></app-customizer>
-<app-horizontal-customizer *ngIf="layout === 'horizontal'"></app-horizontal-customizer>
+  <app-horizontal-customizer
-</div>
+    *ngIf="layout === 'horizontal'"
-<div *ngIf ="buybutton === 'on'">
+  ></app-horizontal-customizer>
+</div> -->
+<!-- <div *ngIf="buybutton === 'on'">
   <div class="buy-now" >
     <a href="https://1.envato.market/modern_admin_angular" target="_blank" class="btn bg-gradient-directional-purple round white btn-purple btn-glow px-2">Buy Now</a>
 </div>
-</div>
+</div> -->

src/app/_layout/settings/theme-settings.config.ts

@@ -3,7 +3,7 @@
 export const ThemeSettingsConfig = {
   colorTheme: 'semi-dark', // light, semi-light, semi-dark, dark
   layout: {
-    style: 'vertical', // style: 'vertical', horizontal,
+    style: 'horizontal', // style: 'vertical', horizontal,
     pattern: 'fixed' // fixed, boxed, static
   },
   menuColor: 'menu-dark', // Vertical: [menu-dark, menu-light] , Horizontal: [navbar-dark, navbar-light]

src/app/_services/table-api.service.ts

@@ -53,6 +53,8 @@ export class TableApiService {
   }
 
   private extractData(res: Response) {
+    console.log(res);
+    
     const body = res;
     return body || {};
   }

src/app/app.module.ts

@@ -67,7 +67,7 @@ import { FullLayoutComponent } from './_layout/full-layout/full-layout.component
 import { ToastrModule } from 'ngx-toastr';
 import { UserService } from './_api/user/user.service';
 import { PrivacyPolicyComponent } from './login/privacy-policy/privacy-policy.component';
-import { TermsConditionComponent } from './login/terms-condition/terms-condition.component';;
+import { TermsConditionComponent } from './login/terms-condition/terms-condition.component';
 
 @NgModule({
   imports: [

src/app/app.routing.ts

@@ -48,6 +48,26 @@ const appRoutes: Routes = [
     children: [
       { path: 'logout', component: LoginComponent, canActivate: [AuthGuard] },
       { path: 'changelog', component: ChangelogComponent, canActivate: [AuthGuard] },
+      {
+        path: 'monitoring', loadChildren: () => import('../app/content/hemat-app/monitoring/monitoring.module').then(m => m.MonitoringModule)
+        , canActivate: [AuthGuard]
+      },
+      {
+        path: 'device', loadChildren: () => import('../app/content/hemat-app/device/device.module').then(m => m.DeviceModule)
+        , canActivate: [AuthGuard]
+      },
+      {
+        path: 'cost-management', loadChildren: () => import('../app/content/hemat-app/cost-management/cost-management.module').then(m => m.CostManagementModule)
+        , canActivate: [AuthGuard]
+      },
+      {
+        path: 'user-access', loadChildren: () => import('../app/content/hemat-app/user-access/user-access.module').then(m => m.UserAccessModule)
+        , canActivate: [AuthGuard]
+      },
+      {
+        path: 'master', loadChildren: () => import('../app/content/hemat-app/master/master.module').then(m => m.MasterModule)
+        , canActivate: [AuthGuard]
+      },
       {
         path: 'dashboard', loadChildren: () => import('../app/content/dashboard/dashboard.module').then(m => m.DashboardModule)
         , canActivate: [AuthGuard]

src/app/content/dashboard/hospital/hospital.component.html

@@ -1,9 +1,9 @@
 <div class="app-content content">
   <div class="content-overlay"></div>
   <div class="content-wrapper">
-      <div class="content-header row">
+    <div class="content-header row"></div>
-      </div>
+    <div class="content-body">
-      <div class="content-body"><!-- Hospital Info cards -->
+      <!-- Hospital Info cards -->
       <div class="row">
         <div class="col-xl-3 col-lg-6 col-md-6 col-12">
           <div class="card pull-up">
@@ -83,15 +83,23 @@
             <section id="chartjs-bar-charts">
               <div class="row">
                 <div class="col-12" *blockUI="'barCharts'; message: 'Loading'">
-          <m-card [options]="options" (reloadFunction)="reloadBarCharts($event)">
+                  <m-card
-            <ng-container mCardHeaderTitle>
+                    [options]="options"
-              Appointment
+                    (reloadFunction)="reloadBarCharts($event)"
-            </ng-container>
+                  >
+                    <ng-container mCardHeaderTitle> Appointment </ng-container>
                     <ng-container mCardBody>
                       <div class="z">
-                <canvas class="barchart" height="328" baseChart [datasets]="barChartData" [labels]="barChartLabels"
+                        <canvas
-                  [options]="barChartOptions" [legend]="barChartLegend"
+                          class="barchart"
-                  [chartType]="barChartType"></canvas>
+                          height="328"
+                          baseChart
+                          [datasets]="barChartData"
+                          [labels]="barChartLabels"
+                          [options]="barChartOptions"
+                          [legend]="barChartLegend"
+                          [chartType]="barChartType"
+                        ></canvas>
                       </div>
                     </ng-container>
                   </m-card>
@@ -112,24 +120,35 @@
             </div>
             <div class="card-content">
               <div class="table-responsive">
-        <table id="recent-orders" class="table table-hover table-xl mb-0">
+                <table
+                  id="recent-orders"
+                  class="table table-hover table-xl mb-0"
+                >
                   <tbody>
                     <tr *ngFor="let doctor of doctors">
                       <td class="text-truncate p-1 border-top-0">
                         <div class="avatar avatar-md">
-                <img class="media-object rounded-circle" [src]= doctor.image
+                          <img
-                  alt="Avatar">
+                            class="media-object rounded-circle"
+                            [src]="doctor.image"
+                            alt="Avatar"
+                          />
                         </div>
                       </td>
                       <td class="text-truncate pl-0 border-top-0">
                         <div class="name">{{ doctor.name }}</div>
-              <div class="designation text-light font-small-2">Dentist</div>
+                        <div class="designation text-light font-small-2">
+                          Dentist
+                        </div>
                       </td>
                       <td class="text-right border-top-0">
-              <a href="hospital-book-appointment.html" class="btn btn-sm btn-outline-success">Book Appointment</a>
+                        <a
+                          href="hospital-book-appointment.html"
+                          class="btn btn-sm btn-outline-success"
+                          >Book Appointment</a
+                        >
                       </td>
                     </tr>
-      
                   </tbody>
                 </table>
               </div>
@@ -140,17 +159,28 @@
           <div class="card">
             <div class="card-header">
               <h4 class="card-title">Recent Appointments</h4>
-      <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
+              <a class="heading-elements-toggle"
+                ><i class="la la-ellipsis-v font-medium-3"></i
+              ></a>
               <div class="heading-elements">
                 <ul class="list-inline mb-0">
-          <li><a class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right" href="hospital-book-appointment.html"
+                  <li>
-              target="_blank">View all</a></li>
+                    <a
+                      class="btn btn-sm btn-danger box-shadow-2 round btn-min-width pull-right"
+                      href="hospital-book-appointment.html"
+                      target="_blank"
+                      >View all</a
+                    >
+                  </li>
                 </ul>
               </div>
             </div>
             <div class="card-content mt-1">
               <div class="table-responsive">
-          <table id="recent-orders-doctors" class="table table-hover table-xl mb-0">
+                <table
+                  id="recent-orders-doctors"
+                  class="table table-hover table-xl mb-0"
+                >
                   <thead>
                     <tr>
                       <th class="border-top-0">Doctor</th>
@@ -165,23 +195,38 @@
                       <td class="text-truncate">{{ doctor.name }}</td>
                       <td class="text-truncate p-1">
                         <ul class="list-unstyled users-list m-0">
-                <li data-toggle="tooltip" data-popup="tooltip-custom" data-original-title="Kimberly Simmons" class="avatar avatar-sm pull-up" *ngFor="let imageUrl of doctor.image">
+                          <li
-                    <img class="media-object rounded-circle" [src]="imageUrl" alt="Avatar">
+                            data-toggle="tooltip"
-                   
+                            data-popup="tooltip-custom"
+                            data-original-title="Kimberly Simmons"
+                            class="avatar avatar-sm pull-up"
+                            *ngFor="let imageUrl of doctor.image"
+                          >
+                            <img
+                              class="media-object rounded-circle"
+                              [src]="imageUrl"
+                              alt="Avatar"
+                            />
                           </li>
 
                           <li class="avatar avatar-sm">
-                  <span class="badge badge-info">{{doctor.bagde}}</span>
+                            <span class="badge badge-info">{{
+                              doctor.bagde
+                            }}</span>
                           </li>
                         </ul>
                       </td>
                       <td>
-              <button type="button" class="btn btn-sm btn-outline-{{doctor.type}} round">{{doctor.designation}}</button>
+                        <button
+                          type="button"
+                          class="btn btn-sm btn-outline-{{ doctor.type }} round"
+                        >
+                          {{ doctor.designation }}
+                        </button>
                       </td>
                       <td class="text-truncate">{{ doctor.time }}</td>
                       <td class="text-truncate">{{ doctor.amount }}</td>
                     </tr>
-    
                   </tbody>
                 </table>
               </div>

src/app/content/dashboard/sales/sales.component.css

@@ -52,7 +52,7 @@
 }
 
 :host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
-    stroke: #ff4961;
+    stroke: #7949ff;
     stroke-width: 5.5px !important;
 }
 :host ::ng-deep .donut-chart2 {

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

@@ -0,0 +1,447 @@
+<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="basic-form-layouts">
+          <div class="row">
+            <div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
+              <m-card>
+                <ng-container mCardHeaderTitle>
+                  <h2>
+                    {{
+                      isEditMode()
+                        ? "Edit Cost Management"
+                        : isViewMode()
+                        ? "View Cost Management"
+                        : "Add New Cost Management"
+                    }}
+                  </h2>
+                </ng-container>
+                <ng-container mCardBody>
+                  <form
+                    [formGroup]="projectInfo"
+                    (ngSubmit)="onProjectInfoSubmit()"
+                  >
+                    <div class="form-body">
+                      <h4 class="form-section">
+                        <i class="feather ft-user"></i> General Information
+                      </h4>
+                      <div class="row">
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput1">Estimation cost Name *</label>
+                            <input
+                              type="text"
+                              id="projectinput1"
+                              class="form-control"
+                              formControlName="firstName"
+                              placeholder="First Name"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.firstName.errors
+                              }"
+                            />
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.firstName.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.firstName.errors.required">
+                                First Name is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput5">Duration Use *</label>
+                            <div class="input-group">
+                              <select
+                                id="projectinput5"
+                                class="form-control"
+                                formControlName="interestedIn"
+                                [ngClass]="{
+                                  'is-invalid': submitted && f.interestedIn.errors
+                                }"
+                              >
+                                <option
+                                  *ngFor="let interest of interestedIn"
+                                  [value]="interest"
+                                >
+                                  {{ interest }}
+                                </option>
+                              </select>
+                              <div class="input-group-append">
+                                <button
+                                  type="button"
+                                  class="btn btn-primary"
+                                  (click)="addData()"
+                                >
+                                  Add
+                                </button>
+                              </div>
+                            </div>
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.interestedIn.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.interestedIn.errors.required">
+                                Interest is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="row">
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput5">Category *</label>
+                            <div class="input-group">
+                              <select
+                                id="projectinput5"
+                                class="form-control"
+                                formControlName="interestedIn"
+                                [ngClass]="{
+                                  'is-invalid': submitted && f.interestedIn.errors
+                                }"
+                              >
+                                <option
+                                  *ngFor="let interest of interestedIn"
+                                  [value]="interest"
+                                >
+                                  {{ interest }}
+                                </option>
+                              </select>
+                              <div class="input-group-append">
+                                <button
+                                  type="button"
+                                  class="btn btn-primary"
+                                  (click)="addData()"
+                                >
+                                  Add
+                                </button>
+                              </div>
+                            </div>
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.interestedIn.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.interestedIn.errors.required">
+                                Interest is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput5">Selection Option *</label>
+                            <select
+                              id="projectinput5"
+                              class="form-control"
+                              formControlName="interestedIn"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.interestedIn.errors
+                              }"
+                            >
+                              <option
+                                *ngFor="let interest of interestedIn"
+                                [value]="interest"
+                              >
+                                {{ interest }}
+                              </option>
+                            </select>
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.interestedIn.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.interestedIn.errors.required">
+                                Interest is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="row">
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput5">Location *</label>
+                            <select
+                              id="projectinput5"
+                              class="form-control"
+                              formControlName="interestedIn"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.interestedIn.errors
+                              }"
+                            >
+                              <option
+                                *ngFor="let interest of interestedIn"
+                                [value]="interest"
+                              >
+                                {{ interest }}
+                              </option>
+                            </select>
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.interestedIn.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.interestedIn.errors.required">
+                                Interest is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput5">Status *</label>
+                            <select
+                              id="projectinput5"
+                              class="form-control"
+                              formControlName="interestedIn"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.interestedIn.errors
+                              }"
+                            >
+                              <option
+                                *ngFor="let interest of interestedIn"
+                                [value]="interest"
+                              >
+                                {{ interest }}
+                              </option>
+                            </select>
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.interestedIn.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.interestedIn.errors.required">
+                                Interest is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="row">
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput5">Location Room *</label>
+                            <select
+                              id="projectinput5"
+                              class="form-control"
+                              formControlName="interestedIn"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.interestedIn.errors
+                              }"
+                            >
+                              <option
+                                *ngFor="let interest of interestedIn"
+                                [value]="interest"
+                              >
+                                {{ interest }}
+                              </option>
+                            </select>
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.interestedIn.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.interestedIn.errors.required">
+                                Interest is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput5">Type *</label>
+                            <select
+                              id="projectinput5"
+                              class="form-control"
+                              formControlName="interestedIn"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.interestedIn.errors
+                              }"
+                            >
+                              <option
+                                *ngFor="let interest of interestedIn"
+                                [value]="interest"
+                              >
+                                {{ interest }}
+                              </option>
+                            </select>
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.interestedIn.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.interestedIn.errors.required">
+                                Interest is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                      </div>
+  
+                      <h4 class="form-section">
+                        <i class="la la-paperclip"></i> Energy Information
+                      </h4>
+                      <div class="row">
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput1">Price/Kwh *</label>
+                            <input
+                              type="text"
+                              id="projectinput1"
+                              class="form-control"
+                              formControlName="firstName"
+                              placeholder="First Name"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.firstName.errors
+                              }"
+                            />
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.firstName.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.firstName.errors.required">
+                                First Name is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput1">Kwh *</label>
+                            <input
+                              type="text"
+                              id="projectinput1"
+                              class="form-control"
+                              formControlName="firstName"
+                              placeholder="First Name"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.firstName.errors
+                              }"
+                            />
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.firstName.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.firstName.errors.required">
+                                First Name is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="row">
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput1">Voltage *</label>
+                            <input
+                              type="text"
+                              id="projectinput1"
+                              class="form-control"
+                              formControlName="firstName"
+                              placeholder="First Name"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.firstName.errors
+                              }"
+                            />
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.firstName.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.firstName.errors.required">
+                                First Name is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="projectinput5">Auto update *</label>
+                            <select
+                              id="projectinput5"
+                              class="form-control"
+                              formControlName="interestedIn"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.interestedIn.errors
+                              }"
+                            >
+                              <option
+                                *ngFor="let interest of interestedIn"
+                                [value]="interest"
+                              >
+                                {{ interest }}
+                              </option>
+                            </select>
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.interestedIn.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.interestedIn.errors.required">
+                                Interest is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="form-group">
+                        <label for="projectinput5">Auto update *</label>
+                        <select
+                          id="projectinput5"
+                          class="form-control"
+                          formControlName="interestedIn"
+                          [ngClass]="{
+                            'is-invalid': submitted && f.interestedIn.errors
+                          }"
+                        >
+                          <option
+                            *ngFor="let interest of interestedIn"
+                            [value]="interest"
+                          >
+                            {{ interest }}
+                          </option>
+                        </select>
+                        <small
+                          class="form-text text-muted danger"
+                          *ngIf="submitted && f.interestedIn.errors"
+                          class="invalid-feedback"
+                        >
+                          <div *ngIf="f.interestedIn.errors.required">
+                            Interest is required
+                          </div>
+                        </small>
+                      </div>
+                    </div>
+                    <div class="form-actions">
+                      <button
+                        type="button"
+                        class="btn btn-warning mr-1"
+                        (click)="cancel()"
+                      >
+                        <i class="feather ft-x"></i> Cancel
+                      </button>
+                      <button type="submit" class="btn btn-primary">
+                        <i class="la la-check"></i> Save
+                      </button>
+                    </div>
+                  </form>
+                </ng-container>
+              </m-card>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+  
+  

src/app/content/hemat-app/cost-management/add-edit-cost/add-edit-cost.component.spec.ts

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

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

@@ -0,0 +1,162 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+
+@Component({
+  selector: 'app-add-edit-cost',
+  templateUrl: './add-edit-cost.component.html',
+  styleUrls: ['./add-edit-cost.component.css']
+})
+export class AddEditCostComponent implements OnInit{
+  @ViewChild("f", { read: true }) userProfileForm: NgForm;
+
+  model: any = {};
+  mode: string;
+  public breadcrumb: any;
+  projectInfo: FormGroup;
+  submitted = false;
+
+  @BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
+
+  interestedIn = [
+    "design",
+    "development",
+    "illustration",
+    "branding",
+    "video",
+    "design",
+    "development",
+    "illustration",
+    "branding",
+    "video",
+  ];
+  budget = [
+    "less than 5000$",
+    "5000$ - 10000$",
+    "10000$ - 20000$",
+    "more than 20000$",
+  ];
+  priority = ["Low", "Medium", "High"];
+  status = ["Not Started", "Started", "Fixed"];
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit() {
+    this.route.data.subscribe((data) => {
+      this.mode = data.mode;
+    });
+    this.setBreadcrumb()
+
+    this.projectInfo = this.formBuilder.group({
+      firstName: ["", Validators.required],
+      lastName: ["", Validators.required],
+      email: ["", [Validators.required, Validators.email]],
+      phone: ["", Validators.required],
+      company: ["", Validators.required],
+      interestedIn: ["", Validators.required],
+      budget: ["", Validators.required],
+      selectFile: [, Validators.required],
+      aboutProject: ["", Validators.required],
+    });
+  }
+
+  setBreadcrumb() {
+    if (this.isAddMode()) {
+      this.breadcrumb = {
+        mainlabel: "Cost Management",
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+          },
+          {
+            name: "Cost Management",
+            isLink: false,
+          },
+          {
+            name: "Add New Cost Management",
+            isLink: false,
+          },
+        ],
+      };
+    } else if (this.isEditMode()) {
+      this.breadcrumb = {
+        mainlabel: "Cost Management",
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+          },
+          {
+            name: "Cost Management",
+            isLink: false,
+          },
+          {
+            name: "Edit New Cost Management",
+            isLink: false,
+          },
+        ],
+      };
+    } else if (this.isViewMode()) {
+      this.breadcrumb = {
+        mainlabel: "Cost Management",
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+          },
+          {
+            name: "Cost Management",
+            isLink: false,
+          },
+          {
+            name: "View New Cost Management",
+            isLink: false,
+          },
+        ],
+      };
+    }
+  }
+
+  isEditMode() {
+    return this.mode === "edit";
+  }
+
+  isViewMode() {
+    return this.mode === "view";
+  }
+
+  isAddMode() {
+    return this.mode === "add";
+  }
+
+  get f() {
+    return this.projectInfo.controls;
+  }
+
+  onProjectInfoSubmit() {
+    this.submitted = true;
+    if (this.projectInfo.invalid) {
+      return;
+    }
+  }
+
+  keyPress(event: any) {
+    const pattern = /[0-9\+\-\ ]/;
+    const inputChar = String.fromCharCode(event.charCode);
+    if (event.keyCode !== 8 && !pattern.test(inputChar)) {
+      event.preventDefault();
+    }
+  }
+
+  addData() {}
+
+  cancel() {
+    this.router.navigate(["/device"]);
+  }
+}

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

@@ -0,0 +1,229 @@
+<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]="['/cost-management/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]="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>Estimasi Cost 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>
+      <section id="configuration">
+        <div class="row">
+          <div class="col-lg-6 col-12">
+            <div class="card pull-up">
+              <div class="card-content">
+                <div class="card-body">
+                  <div class="media d-flex">
+                    <div class="media-body text-left">
+                      <h6 class="text-muted">Total Use </h6>
+                      <h3>3,568</h3>
+                    </div>
+                    <div class="align-self-center">
+                      <i class="feather ft-zap danger font-large-2 float-right"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-6 col-12">
+            <div class="card pull-up">
+              <div class="card-content">
+                <div class="card-body">
+                  <div class="media d-flex">
+                    <div class="media-body text-left">
+                      <h6 class="text-muted">Estimation Cost</h6>
+                      <h3>Rp 1.000.000.000.000</h3>
+                    </div>
+                    <div class="align-self-center">
+                      <i class="feather ft-trending-up success font-large-2 float-right"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,84 @@
+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 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(["/cost-management/view", row.name]);
+  }
+
+  editRow(row) {
+    console.log("Edit row:", row);
+    this.router.navigate(["/cost-management/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

@@ -0,0 +1,59 @@
+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';
+import { AddEditCostComponent } from './add-edit-cost/add-edit-cost.component';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ClipboardModule } from 'ngx-clipboard';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+
+
+
+@NgModule({
+  declarations: [
+    CostManagementComponent,
+    AddEditCostComponent
+  ],
+  imports: [
+    CommonModule,
+    CardModule,
+    BreadcrumbModule,
+    NgSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ClipboardModule,
+    PerfectScrollbarModule,
+    NgxDatatableModule,
+    BlockUIModule.forRoot({
+      template: BlockTemplateComponent
+    }),
+    RouterModule.forChild([
+      {
+        path: '',
+        component: CostManagementComponent
+      },
+      {
+        path: 'add-row',
+        component: AddEditCostComponent,
+        data: { mode: 'add' }
+      },
+      {
+        path: 'edit/:id',
+        component: AddEditCostComponent,
+        data: { mode: 'edit' } 
+      },
+      {
+        path: 'view/:id',
+        component: AddEditCostComponent,
+        data: { mode: 'view' } 
+      }
+    ])
+  ]
+})
+export class CostManagementModule { }

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.css

@@ -0,0 +1,153 @@
+.form-control.is-invalid {
+    border-color: #CACFE7;
+    background-image: none !important;
+}
+
+.div.basicInfoCard {
+    height: 700px;
+}
+
+:host ::ng-deep .block-ui-wrapper {
+    background: rgba(255, 249, 249, 0.5) !important;
+}
+:host ::ng-deep .block-ui-wrapper {
+    background: rgba(255, 249, 249, 0.5) !important;
+  }
+  :host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
+    color: unset !important;
+    background-color: unset !important;
+    border-color: #d3d9df !important;
+  }
+  
+  :host ::ng-deep .btn-light:hover:not(.disabled):active {
+    background-color: #e2e6ea !important;
+    border-color: #dae0e5 !important;
+  }
+  
+  :host ::ng-deep .btn-light {
+    color: unset !important;
+    background-color: unset !important;
+    border-color: unset !important;
+  }
+  
+  :host ::ng-deep .bg-primary {
+    background-color: #007bff !important;
+  }
+  
+  :host ::ng-deep .text-white {
+    color: #fff !important;
+  }
+  
+  :host ::ng-deep .custom-day {
+    text-align: center;
+    padding: .185rem .25rem;
+    display: inline-block;
+    height: 2rem;
+    width: 2rem;
+  }
+  
+  :host ::ng-deep .custom-day:active {
+    color: #6d7183 !important;
+   background-color: #fff !important;
+   border-block-color: rgb(2, 117, 216) !important;
+   
+  }
+  
+  .bg-light {
+    background-color: #f8f9fa !important;
+  }
+  
+  :host ::ng-deep .hidden {
+    display: block !important;
+  }
+  
+  .ngb-dp-weekday {
+    color: #17a2b8;
+  }
+  
+  .ngb-dp-week-number,
+  .ngb-dp-weekday {
+    line-height: 2rem;
+    text-align: center;
+    font-style: italic;
+  }
+  
+  .ngb-datepicker-month-view {
+    pointer-events: auto;
+  }
+  
+  .small {
+    font-size: 80%;
+    font-weight: 400;
+  }
+  
+  .ngb-dp-day {
+    cursor: pointer !important;
+  }
+  
+  .ngb-dp-month {
+    pointer-events: none;
+  }
+  
+  .btn-light:hover {
+    color: #212529 !important;
+    background-color: #e2e6ea !important;
+    border-color: #dae0e5 !important;
+  }
+  
+  .ngb-datepicker-month-view {
+    pointer-events: auto;
+  }
+
+  :host ::ng-deep .ngb-dp-header {
+    background-color: var(--light) !important;
+}
+
+:host ::ng-deep .ngb-dp-weekdays {
+    background-color: var(--light);
+}
+
+:host ::ng-deep .ngb-dp-month-name {
+    background-color: var(--light);
+}
+  
+  .ngb-dp-header {
+    border-bottom: 0;
+    border-radius: .25rem .25rem 0 0;
+    padding-top: .25rem;
+  }
+  
+  .ngb-dp-day,
+  .ngb-dp-week-number,
+  .ngb-dp-weekday {
+    width: 2rem;
+    height: 2rem;
+  }
+  
+  .custom-day {
+    text-align: center;
+    padding: 0.185rem 0.25rem;
+    display: inline-block;
+    height: 2rem;
+    width: 2rem;
+  }
+  
+  .custom-day.focused {
+    background-color: #e6e6e6;
+  }
+  
+  .custom-day.range,
+  .custom-day:hover {
+    background-color: rgb(2, 117, 216);
+    color: white;
+  }
+  
+  .custom-day.faded {
+    background-color: rgba(2, 117, 216, 0.5);
+  }
+  
+  :host ::ng-deep .block-ui-wrapper {
+    background: rgba(255, 249, 249, 0.5) !important;
+  }
+  
+  

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

@@ -0,0 +1,342 @@
+<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="basic-form-layouts">
+        <div class="row">
+          <div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
+            <m-card>
+              <ng-container mCardHeaderTitle>
+                <h2>
+                  {{
+                    isEditMode()
+                      ? "Edit Device"
+                      : isViewMode()
+                      ? "View Device"
+                      : "Add New Device"
+                  }}
+                </h2>
+              </ng-container>
+              <ng-container mCardBody>
+                <form
+                  [formGroup]="projectInfo"
+                  (ngSubmit)="onProjectInfoSubmit()"
+                >
+                  <div class="form-body">
+                    <h4 class="form-section">
+                      <i class="feather ft-user"></i> General Information
+                    </h4>
+                    <div class="row">
+                      <div class="col-md-6">
+                        <div class="form-group">
+                          <label for="name">Device Name *</label>
+                          <input
+                            type="text"
+                            id="name"
+                            class="form-control"
+                            formControlName="name"
+                            placeholder="Device Name"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.name.errors
+                            }"
+                          />
+                          <small
+                            class="form-text text-muted danger"
+                            *ngIf="submitted && f.name.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.name.errors.required">
+                              Device Name is required
+                            </div>
+                          </small>
+                        </div>
+                      </div>
+                      <div class="col-md-6">
+                        <div class="form-group">
+                          <label for="projectinput5">Duration Use *</label>
+                          <div class="input-group">
+                            <select
+                              id="projectinput5"
+                              class="form-control"
+                              formControlName="interestedIn"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.interestedIn.errors
+                              }"
+                            >
+                              <option
+                                *ngFor="let interest of interestedIn"
+                                [value]="interest"
+                              >
+                                {{ interest }}
+                              </option>
+                            </select>
+                            <div class="input-group-append">
+                              <button
+                                type="button"
+                                class="btn btn-primary"
+                                (click)="addData()"
+                              >
+                                Add
+                              </button>
+                            </div>
+                          </div>
+                          <small
+                            class="form-text text-muted danger"
+                            *ngIf="submitted && f.interestedIn.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.interestedIn.errors.required">
+                              Interest is required
+                            </div>
+                          </small>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="col-md-6">
+                        <div class="form-group">
+                          <label for="projectinput5">Category *</label>
+                          <div class="input-group">
+                            <select
+                              id="projectinput5"
+                              class="form-control"
+                              formControlName="interestedIn"
+                              [ngClass]="{
+                                'is-invalid': submitted && f.interestedIn.errors
+                              }"
+                            >
+                              <option
+                                *ngFor="let interest of interestedIn"
+                                [value]="interest"
+                              >
+                                {{ interest }}
+                              </option>
+                            </select>
+                            <div class="input-group-append">
+                              <button
+                                type="button"
+                                class="btn btn-primary"
+                                (click)="addData()"
+                              >
+                                Add
+                              </button>
+                            </div>
+                          </div>
+                          <small
+                            class="form-text text-muted danger"
+                            *ngIf="submitted && f.interestedIn.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.interestedIn.errors.required">
+                              Interest is required
+                            </div>
+                          </small>
+                        </div>
+                      </div>
+                      <div class="col-md-6">
+                        <div class="form-group">
+                          <label for="projectinput5">Selection Option *</label>
+                          <select
+                            id="projectinput5"
+                            class="form-control"
+                            formControlName="interestedIn"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.interestedIn.errors
+                            }"
+                          >
+                            <option
+                              *ngFor="let interest of interestedIn"
+                              [value]="interest"
+                            >
+                              {{ interest }}
+                            </option>
+                          </select>
+                          <small
+                            class="form-text text-muted danger"
+                            *ngIf="submitted && f.interestedIn.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.interestedIn.errors.required">
+                              Interest is required
+                            </div>
+                          </small>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="col-md-6">
+                        <div class="form-group">
+                          <label for="projectinput5">Location *</label>
+                          <select
+                            id="projectinput5"
+                            class="form-control"
+                            formControlName="interestedIn"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.interestedIn.errors
+                            }"
+                          >
+                            <option
+                              *ngFor="let interest of interestedIn"
+                              [value]="interest"
+                            >
+                              {{ interest }}
+                            </option>
+                          </select>
+                          <small
+                            class="form-text text-muted danger"
+                            *ngIf="submitted && f.interestedIn.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.interestedIn.errors.required">
+                              Interest is required
+                            </div>
+                          </small>
+                        </div>
+                      </div>
+                      <div class="col-md-6">
+                        <div class="form-group">
+                          <label for="projectinput5">Status *</label>
+                          <select
+                            id="projectinput5"
+                            class="form-control"
+                            formControlName="interestedIn"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.interestedIn.errors
+                            }"
+                          >
+                            <option
+                              *ngFor="let interest of interestedIn"
+                              [value]="interest"
+                            >
+                              {{ interest }}
+                            </option>
+                          </select>
+                          <small
+                            class="form-text text-muted danger"
+                            *ngIf="submitted && f.interestedIn.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.interestedIn.errors.required">
+                              Interest is required
+                            </div>
+                          </small>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="row">
+                      <div class="col-md-6">
+                        <div class="form-group">
+                          <label for="projectinput5">Location Room *</label>
+                          <select
+                            id="projectinput5"
+                            class="form-control"
+                            formControlName="interestedIn"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.interestedIn.errors
+                            }"
+                          >
+                            <option
+                              *ngFor="let interest of interestedIn"
+                              [value]="interest"
+                            >
+                              {{ interest }}
+                            </option>
+                          </select>
+                          <small
+                            class="form-text text-muted danger"
+                            *ngIf="submitted && f.interestedIn.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.interestedIn.errors.required">
+                              Interest is required
+                            </div>
+                          </small>
+                        </div>
+                      </div>
+                      <div class="col-md-6">
+                        <div class="form-group">
+                          <label for="projectinput5">Type *</label>
+                          <select
+                            id="projectinput5"
+                            class="form-control"
+                            formControlName="interestedIn"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.interestedIn.errors
+                            }"
+                          >
+                            <option
+                              *ngFor="let interest of interestedIn"
+                              [value]="interest"
+                            >
+                              {{ interest }}
+                            </option>
+                          </select>
+                          <small
+                            class="form-text text-muted danger"
+                            *ngIf="submitted && f.interestedIn.errors"
+                            class="invalid-feedback"
+                          >
+                            <div *ngIf="f.interestedIn.errors.required">
+                              Interest is required
+                            </div>
+                          </small>
+                        </div>
+                      </div>
+                    </div>
+
+                    <h4 class="form-section">
+                      <i class="la la-paperclip"></i> Energy Information
+                    </h4>
+                    
+                    <div class="form-group">
+                      <label for="projectinput5">Auto update *</label>
+                      <select
+                        id="projectinput5"
+                        class="form-control"
+                        formControlName="interestedIn"
+                        [ngClass]="{
+                          'is-invalid': submitted && f.interestedIn.errors
+                        }"
+                      >
+                        <option
+                          *ngFor="let interest of interestedIn"
+                          [value]="interest"
+                        >
+                          {{ interest }}
+                        </option>
+                      </select>
+                      <small
+                        class="form-text text-muted danger"
+                        *ngIf="submitted && f.interestedIn.errors"
+                        class="invalid-feedback"
+                      >
+                        <div *ngIf="f.interestedIn.errors.required">
+                          Interest is required
+                        </div>
+                      </small>
+                    </div>
+                  </div>
+                  <div class="form-actions">
+                    <button
+                      type="button"
+                      class="btn btn-warning mr-1"
+                      (click)="cancel()"
+                    >
+                      <i class="feather ft-x"></i> Cancel
+                    </button>
+                    <button type="submit" class="btn btn-primary" (click)="saveEdit()">
+                      <i class="la la-check"></i> Save
+                    </button>
+                  </div>
+                </form>
+              </ng-container>
+            </m-card>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>
+

src/app/content/hemat-app/device/add-edit-device/add-edit-device.component.spec.ts

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

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

@@ -0,0 +1,198 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { FormBuilder, FormGroup, NgForm, Validators } from "@angular/forms";
+import { ActivatedRoute, Router } from "@angular/router";
+import { BlockUI, NgBlockUI } from "ng-block-ui";
+import { BuildingService } from "../../service/monitoring-api.service";
+
+@Component({
+  selector: "app-add-edit-device",
+  templateUrl: "./add-edit-device.component.html",
+  styleUrls: ["./add-edit-device.component.css"],
+})
+export class AddEditDeviceComponent implements OnInit{
+  @ViewChild("f", { read: true }) userProfileForm: NgForm;
+
+  model: any = {};
+  dataDevice: any;
+  mode: string;
+
+  @BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
+  @BlockUI("userProfile") blockUIUserProfile: NgBlockUI;
+
+  options = {
+    minimize: true,
+    reload: true,
+    expand: true,
+    close: true,
+  };
+  public breadcrumb: any;
+
+  projectInfo: FormGroup;
+
+  submitted = false;
+
+  interestedIn = [
+    "design",
+    "development",
+    "illustration",
+    "branding",
+    "video",
+    "design",
+    "development",
+    "illustration",
+    "branding",
+    "video",
+  ];
+  budget = [
+    "less than 5000$",
+    "5000$ - 10000$",
+    "10000$ - 20000$",
+    "more than 20000$",
+  ];
+  priority = ["Low", "Medium", "High"];
+  status = ["Not Started", "Started", "Fixed"];
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+    private monitoringApiService: BuildingService,
+  ) {}
+
+  ngOnInit() {
+    this.route.data.subscribe((data) => {
+      this.mode = data.mode;
+    });
+    this.route.params.subscribe(params => {
+      const deviceId = params['id'];
+      
+      if (deviceId) {
+        this.loadDevice(deviceId);
+      }
+    });
+    this.setBreadcrumb()
+
+    this.projectInfo = this.formBuilder.group({
+      name: ["", Validators.required],
+      lastName: ["", Validators.required],
+      email: ["", [Validators.required, Validators.email]],
+      phone: ["", Validators.required],
+      company: ["", Validators.required],
+      interestedIn: ["", Validators.required],
+      budget: ["", Validators.required],
+      selectFile: [, Validators.required],
+      aboutProject: ["", Validators.required],
+    });
+  }
+
+  loadDevice(deviceId: string) {
+    this.monitoringApiService.getDeviceById(deviceId).subscribe(data => {
+      this.dataDevice = data;
+      this.formGetDevice(data)
+    });
+  }
+
+  formGetDevice(data){
+    console.log(data);
+    this.projectInfo.patchValue({
+      name: data.data.name,
+    });
+  }
+
+  setBreadcrumb() {
+    if (this.isAddMode()) {
+      this.breadcrumb = {
+        mainlabel: "Device",
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+          },
+          {
+            name: "Device",
+            isLink: false,
+          },
+          {
+            name: "Add new device",
+            isLink: false,
+          },
+        ],
+      };
+    } else if (this.isEditMode()) {
+      this.breadcrumb = {
+        mainlabel: "Device",
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+          },
+          {
+            name: "Device",
+            isLink: false,
+          },
+          {
+            name: "Edit new device",
+            isLink: false,
+          },
+        ],
+      };
+    } else if (this.isViewMode()) {
+      this.breadcrumb = {
+        mainlabel: "Device",
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+          },
+          {
+            name: "Device",
+            isLink: false,
+          },
+          {
+            name: "View new device",
+            isLink: false,
+          },
+        ],
+      };
+    }
+  }
+
+  isEditMode() {
+    return this.mode === "edit";
+  }
+
+  isViewMode() {
+    return this.mode === "view";
+  }
+
+  isAddMode() {
+    return this.mode === "add";
+  }
+
+  get f() {
+    return this.projectInfo.controls;
+  }
+
+  onProjectInfoSubmit() {
+    this.submitted = true;
+    if (this.projectInfo.invalid) {
+      return;
+    }
+  }
+
+  keyPress(event: any) {
+    const pattern = /[0-9\+\-\ ]/;
+    const inputChar = String.fromCharCode(event.charCode);
+    if (event.keyCode !== 8 && !pattern.test(inputChar)) {
+      event.preventDefault();
+    }
+  } 
+
+  saveEdit() {
+    
+  }
+
+  cancel() {
+    this.router.navigate(["/device"]);
+  }
+}

src/app/content/hemat-app/device/device.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/device/device.component.html

@@ -0,0 +1,251 @@
+<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> Device 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()"
+                    />
+                  </div>
+                  <div class="col-md-6 text-right">
+                    <button
+                      class="btn btn-secondary"
+                      [disabled]="spinnerActive"
+                      (click)="addDevice()"
+                    >
+                      <i
+                        class="la la-spinner spinner"
+                        *ngIf="spinnerActive"
+                      ></i>
+                      <i class="feather ft-plus" *ngIf="!spinnerActive"></i
+                      >&nbsp;
+                      <span>Syncing Data</span>
+                    </button>
+                  </div>
+                </div>
+                <div class="card-dashboard">
+                  <ngx-datatable
+                    class="bootstrap table-bordered"
+                    [limit]="15"
+                    [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="icon"
+                      [flexGrow]="1"
+                      [minWidth]="140"
+                    >
+                    <ng-template ngx-datatable-header-template>
+                      <span>Image</span>
+                    </ng-template>
+                      <ng-template ngx-datatable-cell-template let-row="row">
+                        <span class="avatar avatar-sm rounded-circle">
+                          <img [src]="row.icon" /><i></i
+                        ></span>
+                      </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="watt"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template ngx-datatable-header-template>
+                        <span>watt</span>
+                      </ng-template>
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
+                        {{ value }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="typeId"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template ngx-datatable-header-template>
+                        <span>typeId</span>
+                      </ng-template>
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
+                        {{ value }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="roomBuildingId"
+                      [flexGrow]="1"
+                      [minWidth]="40"
+                    >
+                      <ng-template ngx-datatable-header-template>
+                        <span>roomBuildingId</span>
+                      </ng-template>
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
+                        {{ value }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="voltageId"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template ngx-datatable-header-template>
+                        <span>voltageId</span>
+                      </ng-template>
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
+                        {{ value }}
+                      </ng-template>
+                    </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="statusId"
+                      [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 === 2 ? "Aktif" : "Tidak Aktif" }}
+                      </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>
+      <section id="configuration">
+        <div class="row">
+          <div class="col-lg-6 col-12">
+            <div class="card pull-up">
+              <div class="card-content">
+                <div class="card-body">
+                  <div class="media d-flex">
+                    <div class="media-body text-left">
+                      <h6 class="text-muted">Total Use</h6>
+                      <h3>3,568</h3>
+                    </div>
+                    <div class="align-self-center">
+                      <i
+                        class="feather ft-zap danger font-large-2 float-right"
+                      ></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-6 col-12">
+            <div class="card pull-up">
+              <div class="card-content">
+                <div class="card-body">
+                  <div class="media d-flex">
+                    <div class="media-body text-left">
+                      <h6 class="text-muted">Estimation Cost</h6>
+                      <h3>Rp 1.000.000.000.000</h3>
+                    </div>
+                    <div class="align-self-center">
+                      <i
+                        class="feather ft-trending-up success font-large-2 float-right"
+                      ></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,131 @@
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { NgBlockUI, BlockUI } from "ng-block-ui";
+import { TableApiService } from "src/app/_services/table-api.service";
+import { ModalAddEditComponent } from "./modal-add-edit/modal-add-edit.component";
+import { ActivatedRoute, Router } from "@angular/router";
+import { BuildingService } from "../service/monitoring-api.service";
+
+@Component({
+  selector: "app-device",
+  templateUrl: "./device.component.html",
+  styleUrls: ["./device.component.css"],
+})
+export class DeviceComponent implements OnInit {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
+  spinnerActive: boolean = false;
+
+  @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Device",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+          link: "/dashboard/sales",
+        },
+        {
+          name: "Device",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.monitoringApiService.getDeviceData().subscribe((res) => {
+      this.data = res;
+      this.filteredRows = this.data.results.data;
+      console.log(this.filteredRows);
+      
+    });
+  }
+
+  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)
+    );
+  }
+
+  addFieldValue() {
+    const modalRef = this.modalService.open(ModalAddEditComponent, {
+      size: "lg",
+    });
+    modalRef.componentInstance.newAttribute = {
+      id: null,
+      name: "",
+      position: "",
+      office: "",
+      age: "",
+      salary: "",
+      startdate: "",
+    };
+
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          this.rows.push(result);
+          this.rows = [...this.rows];
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  viewRow(row) {
+    this.router.navigate(["/device/view", row.id]);
+  }
+
+  editRow(row) {
+    this.router.navigate(["/device/edit", row.id]);
+  }
+
+  deleteRow(row) {
+    console.log("Delete row:", row);
+  }
+
+  addDevice(): void {
+    // Aktifkan spinner
+    this.spinnerActive = true;
+    this.monitoringApiService.getSyncDeviceData().subscribe((res) => {
+      console.log(res);
+    });
+
+    // Lakukan proses tambahan (misalnya, panggil API atau proses yang memakan waktu)
+    setTimeout(() => {
+      // Selesaikan proses tambahan di sini
+
+      // Nonaktifkan spinner setelah proses selesai
+      this.spinnerActive = false;
+      this.fetchData();
+    }, 3000); // Ganti 3000 dengan waktu yang sesuai dengan proses tambahan Anda (dalam milidetik)
+  }
+}

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

@@ -0,0 +1,62 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DeviceComponent } from './device.component';
+import { RouterModule } from '@angular/router';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+
+import { NgSelectModule } from '@ng-select/ng-select';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ClipboardModule } from 'ngx-clipboard';
+import { CardModule } from '../../partials/general/card/card.module';
+import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
+import { BlockUIModule } from 'ng-block-ui';
+import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { AddEditDeviceComponent } from './add-edit-device/add-edit-device.component';
+import { ModalAddEditComponent } from './modal-add-edit/modal-add-edit.component';
+
+
+
+@NgModule({
+  declarations: [
+    DeviceComponent,
+    AddEditDeviceComponent,
+    ModalAddEditComponent
+  ],
+  imports: [
+    CommonModule,
+    CardModule,
+    BreadcrumbModule,
+    NgSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ClipboardModule,
+    PerfectScrollbarModule,
+    NgxDatatableModule,
+    BlockUIModule.forRoot({
+      template: BlockTemplateComponent
+    }),
+    RouterModule.forChild([
+      {
+        path: '',
+        component: DeviceComponent
+      },
+      {
+        path: 'add-row',
+        component: AddEditDeviceComponent,
+        data: { mode: 'add' }
+      },
+      {
+        path: 'edit/:id',
+        component: AddEditDeviceComponent,
+        data: { mode: 'edit' } 
+      },
+      {
+        path: 'view/:id',
+        component: AddEditDeviceComponent,
+        data: { mode: 'view' } 
+      }
+    ])
+  ]
+})
+export class DeviceModule { }

src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.css

@@ -0,0 +1,55 @@
+/* modal-add-edit.component.css */
+::ng-deep .modal-backdrop.show {
+  z-index: auto !important;
+}
+
+::ng-deep .input-group-append .btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-radius: 0;
+    border-left: 0;
+    flex-grow: 0;
+    border-left: 1px solid #ced4da;
+    padding: 0.375rem 0.75rem;
+}
+
+::ng-deep .input-group {
+  display: flex;
+  flex-wrap: nowrap; /* Prevents wrapping of the items */
+  align-items: center;
+}
+
+::ng-deep .form-control {
+  flex-grow: 1; /* Ensures select takes up available space */
+  padding-right: 0.5rem;
+}
+
+::ng-deep .input-group select, 
+::ng-deep .input-group .input-group-append .btn {
+  padding-right: 5px; /* Adjust padding if necessary */
+}
+
+::ng-deep .input-group .form-control {
+  margin-right: 2px; /* Adjust margin to make space */
+}
+
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}

src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.html

@@ -0,0 +1,43 @@
+<div class="modal-header">
+  <h4 class="modal-title">Add New Row</h4>
+  <button type="button" class="close" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <form [formGroup]="myForm">
+    <div class="form-row">
+      <div class="form-group col-md-6">
+        <label for="name">Name:</label>
+        <input type="text" class="form-control" id="name" formControlName="name">
+      </div>
+      <div class="form-group col-md-6">
+        <label for="position">Position:</label>
+        <input type="text" class="form-control" id="position" formControlName="position">
+      </div>
+    </div>
+    <div class="form-row">
+      <div class="form-group col-md-6">
+        <label for="age">Age:</label>
+        <input type="number" class="form-control" id="age" formControlName="age">
+      </div>
+      <div class="form-group col-md-6">
+        <label for="department">Department:</label>
+        <div class="input-group">
+          <select class="form-control" formControlName="department">
+            <option>IT</option>
+            <option>HR</option>
+            <option>Finance</option>
+          </select>
+          <div class="input-group-append">
+            <button class="btn btn-outline-secondary" type="button" (click)="addDepartment()">+</button>
+          </div>
+        </div>
+      </div>            
+    </div>
+  </form>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-secondary" (click)="activeModal.dismiss('Cross click')">Close</button>
+  <button type="button" class="btn btn-primary" (click)="addRow()">Save Changes</button>
+</div>

src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.spec.ts

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

src/app/content/hemat-app/device/modal-add-edit/modal-add-edit.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input } from "@angular/core";
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: "app-modal-add-edit",
+  templateUrl: "./modal-add-edit.component.html",
+  styleUrls: ["./modal-add-edit.component.css"],
+})
+export class ModalAddEditComponent {
+  @Input() newAttribute: any = {};
+  myForm: FormGroup;
+
+  constructor(public activeModal: NgbActiveModal, private fb: FormBuilder) {
+    this.createForm();
+  }
+
+  createForm() {
+    this.myForm = this.fb.group({
+      name: ['', Validators.required],
+      position: ['', Validators.required],
+      age: [null, [Validators.required, Validators.min(18)]],
+      department: ['', Validators.required]
+    });
+  }
+
+  addRow() {
+    if (this.myForm.valid) {
+      this.activeModal.close(this.myForm.value);
+    }
+  }
+
+  addDepartment() {
+    // Example function to simulate adding a department
+    let newDept = prompt("Enter new department name:");
+    if (newDept) {
+      // Normally you would add to a database or a service
+      alert(`Department ${newDept} added! (simulated)`);
+    }
+  }
+}

src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.css

@@ -0,0 +1,56 @@
+/* modal-add-edit.component.css */
+::ng-deep .modal-backdrop.show {
+    z-index: auto !important;
+  }
+  
+  ::ng-deep .input-group-append .btn {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-radius: 0;
+      border-left: 0;
+      flex-grow: 0;
+      border-left: 1px solid #ced4da;
+      padding: 0.375rem 0.75rem;
+  }
+  
+  ::ng-deep .input-group {
+    display: flex;
+    flex-wrap: nowrap; /* Prevents wrapping of the items */
+    align-items: center;
+  }
+  
+  ::ng-deep .form-control {
+    flex-grow: 1; /* Ensures select takes up available space */
+    padding-right: 0.5rem;
+  }
+  
+  ::ng-deep .input-group select, 
+  ::ng-deep .input-group .input-group-append .btn {
+    padding-right: 5px; /* Adjust padding if necessary */
+  }
+  
+  ::ng-deep .input-group .form-control {
+    margin-right: 2px; /* Adjust margin to make space */
+  }
+  
+  
+  .form-group {
+    margin-bottom: 1rem;
+  }
+  
+  .form-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  

src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.html

@@ -0,0 +1,44 @@
+<div class="modal-header">
+  <h4 class="modal-title">Add New Row</h4>
+  <button type="button" class="close" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <form [formGroup]="myForm">
+    <div class="form-row">
+      <div class="form-group col-md-6">
+        <label for="name">Name:</label>
+        <input
+          type="text"
+          class="form-control"
+          id="name"
+          formControlName="name"
+        />
+      </div>
+      <div class="form-group col-md-6">
+        <label for="status">Status:</label>
+        <select
+          id="projectinput5"
+          class="form-control"
+          formControlName="status"
+        >
+          <option value="1">Aktif</option>
+          <option value="0">Tidak Aktif</option>
+        </select>
+      </div>
+    </div>
+  </form>
+</div>
+<div class="modal-footer">
+  <button
+    type="button"
+    class="btn btn-secondary"
+    (click)="activeModal.dismiss('Cross click')"
+  >
+    Close
+  </button>
+  <button type="button" class="btn btn-primary" (click)="addRow()">
+    Save Changes
+  </button>
+</div>

src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.spec.ts

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

src/app/content/hemat-app/master/add-edit-master/add-edit-master.component.ts

@@ -0,0 +1,57 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-add-edit-master',
+  templateUrl: './add-edit-master.component.html',
+  styleUrls: ['./add-edit-master.component.css']
+})
+export class AddEditMasterComponent implements OnInit{
+  @Input() headerId: number;
+  @Input() dataRow: any;
+  @Input() mode: any;
+  myForm: FormGroup;
+
+  constructor(public activeModal: NgbActiveModal, private fb: FormBuilder) {}
+
+  ngOnInit() {
+    this.createForm();
+    console.log(this.dataRow);
+    console.log(this.headerId);
+    console.log(this.mode);
+    if (this.dataRow) {
+      this.editForm();
+    }
+  }
+
+  createForm() {
+    this.myForm = this.fb.group({
+      name: ['', Validators.required],
+      status: ['', Validators.required],
+      headerId: this.headerId
+    });
+  }
+
+  editForm(){
+    this.myForm = this.fb.group({
+      id: this.dataRow.id,
+      name: this.dataRow.name,
+      status: this.dataRow.status,
+      headerId: this.dataRow.headerId
+    });
+  }
+
+  addRow() {
+    if (this.myForm.valid) {
+      this.activeModal.close(this.myForm.value);
+    }
+  }
+
+  addDepartment() {
+    let newDept = prompt("Enter new department name:");
+    if (newDept) {
+      alert(`Department ${newDept} added! (simulated)`);
+    }
+  }
+}

src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.css

@@ -0,0 +1,56 @@
+/* modal-add-edit.component.css */
+::ng-deep .modal-backdrop.show {
+    z-index: auto !important;
+  }
+  
+  ::ng-deep .input-group-append .btn {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-radius: 0;
+      border-left: 0;
+      flex-grow: 0;
+      border-left: 1px solid #ced4da;
+      padding: 0.375rem 0.75rem;
+  }
+  
+  ::ng-deep .input-group {
+    display: flex;
+    flex-wrap: nowrap; /* Prevents wrapping of the items */
+    align-items: center;
+  }
+  
+  ::ng-deep .form-control {
+    flex-grow: 1; /* Ensures select takes up available space */
+    padding-right: 0.5rem;
+  }
+  
+  ::ng-deep .input-group select, 
+  ::ng-deep .input-group .input-group-append .btn {
+    padding-right: 5px; /* Adjust padding if necessary */
+  }
+  
+  ::ng-deep .input-group .form-control {
+    margin-right: 2px; /* Adjust margin to make space */
+  }
+  
+  
+  .form-group {
+    margin-bottom: 1rem;
+  }
+  
+  .form-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  

src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.html

@@ -0,0 +1,90 @@
+<div class="modal-header">
+  <h4 class="modal-title">Add New Row</h4>
+  <button type="button" class="close" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+  </button>
+</div>
+<div class="modal-body">
+  <form [formGroup]="myForm">
+    <div class="form-row">
+      <div class="form-group col-md-6">
+        <label for="name">Name Building:</label>
+        <input
+          type="text"
+          class="form-control"
+          id="name"
+          formControlName="name"
+        />
+      </div>
+      <div class="form-group col-md-6">
+        <label for="name">Email:</label>
+        <input
+          type="text"
+          class="form-control"
+          id="email"
+          formControlName="email"
+        />
+      </div>
+      <div class="form-group col-md-6">
+        <label for="phone">Phone:</label>
+        <input
+          type="text"
+          class="form-control"
+          id="phone"
+          formControlName="phone"
+        />
+      </div>
+      <div class="form-group col-md-6">
+        <label for="owner">Owner:</label>
+        <input
+          type="text"
+          class="form-control"
+          id="owner"
+          formControlName="owner"
+        />
+      </div>
+      <div class="form-group col-md-6">
+        <label for="address">Address:</label>
+        <input
+          type="text"
+          class="form-control"
+          id="address"
+          formControlName="address"
+        />
+      </div>
+      <div class="form-group col-md-6">
+        <label for="statusId">Status:</label>
+        <!-- <select
+          id="projectinput5"
+          class="form-control"
+          formControlName="statusId"
+        >
+          <option value="1">Aktif</option>
+          <option value="0">Tidak Aktif</option>
+        </select> -->
+
+        <select
+          id="projectinput5"
+          class="form-control"
+          formControlName="statusId"
+        >
+          <option *ngFor="let data of filteredDataStatus" [value]="data.id">
+            {{ data.name }}
+          </option>
+        </select>
+      </div>
+    </div>
+  </form>
+</div>
+<div class="modal-footer">
+  <button
+    type="button"
+    class="btn btn-secondary"
+    (click)="activeModal.dismiss('Cross click')"
+  >
+    Close
+  </button>
+  <button type="button" class="btn btn-primary" (click)="addRow()">
+    Save Changes
+  </button>
+</div>

src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddEditMasterBuildingComponent } from './add-edit-master-building.component';
+
+describe('AddEditMasterBuildingComponent', () => {
+  let component: AddEditMasterBuildingComponent;
+  let fixture: ComponentFixture<AddEditMasterBuildingComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddEditMasterBuildingComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddEditMasterBuildingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/master/master-building/add-edit-master-building/add-edit-master-building.component.ts

@@ -0,0 +1,84 @@
+import { Component, Input } from "@angular/core";
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import { BuildingService } from "../../../service/monitoring-api.service";
+
+@Component({
+  selector: "app-add-edit-master-building",
+  templateUrl: "./add-edit-master-building.component.html",
+  styleUrls: ["./add-edit-master-building.component.css"],
+})
+export class AddEditMasterBuildingComponent {
+  @Input() dataRow: any;
+  @Input() mode: any;
+  myForm: FormGroup;
+
+  data: any;
+  dataStatus: any[];
+  filteredDataStatus: any[];
+  dataMasterStatus: any;
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    private fb: FormBuilder,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.createForm();
+    this.listDataStatus();
+
+    if (this.dataRow) {
+      this.editForm();
+    }
+  }
+
+  createForm() {
+    this.myForm = this.fb.group({
+      name: ["", Validators.required],
+      statusId: [0, Validators.required],
+      email: ["", Validators.required],
+      owner: ["", Validators.required],
+      address: ["", Validators.required],
+      phone: ["", Validators.required],
+    });
+  }
+
+  editForm() {
+    this.myForm = this.fb.group({
+      id: this.dataRow.id,
+      name: this.dataRow.name,
+      statusId: this.dataRow.statusId,
+      email: this.dataRow.email,
+      owner: this.dataRow.owner,
+      address: this.dataRow.address,
+      phone: this.dataRow.phone,
+    });
+  }
+
+  listDataStatus() {
+    this.monitoringApiService.getMasterData().subscribe((res) => {
+      this.data = res.results.data;
+      this.dataMasterStatus = res.results.data.find(
+        (item) => item.name === "master_status"
+      );
+      this.dataStatus = this.dataMasterStatus.headerDetailParam;
+      this.filteredDataStatus = this.dataStatus.filter(
+        (item) => item.status === "1"
+      );
+    });
+  }
+
+  addRow() {
+    if (this.myForm.valid) {
+      this.activeModal.close(this.myForm.value);
+    }
+  }
+
+  addDepartment() {
+    let newDept = prompt("Enter new department name:");
+    if (newDept) {
+      alert(`Department ${newDept} added! (simulated)`);
+    }
+  }
+}

src/app/content/hemat-app/master/master-building/master-building.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/master/master-building/master-building.component.html

@@ -0,0 +1,188 @@
+<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 Building 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"
+                        (click)="openAddMasterModal()"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="5"
+                      [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>Building Name</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          {{ value }}
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="email"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span>Email</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          {{ value }}
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="phone"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span>Phone</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          {{ value }}
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="owner"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span>Owner</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          {{ value }}
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="address"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span>Address</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          {{ value }}
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="statusId"
+                        [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 === 2 ? 'Aktif' : 'Tidak Aktif'}}
+                        </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-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/master/master-building/master-building.component.spec.ts

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

src/app/content/hemat-app/master/master-building/master-building.component.ts

@@ -0,0 +1,125 @@
+import { Component } from '@angular/core';
+import { AddEditMasterComponent } from '../add-edit-master/add-edit-master.component';
+import { TableApiService } from 'src/app/_services/table-api.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Router } from '@angular/router';
+import { BuildingService } from '../../service/monitoring-api.service';
+import { AddEditMasterBuildingComponent } from './add-edit-master-building/add-edit-master-building.component';
+
+@Component({
+  selector: 'app-master-building',
+  templateUrl: './master-building.component.html',
+  styleUrls: ['./master-building.component.css']
+})
+export class MasterBuildingComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Building",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Building",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.monitoringApiService.getMasterBuildingData().subscribe((res) => {
+      this.data = res.results.data;
+      this.filteredRows = this.data;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [...this.data];
+    } else {
+      this.filteredRows = this.data.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)
+    );
+  }
+
+  openAddMasterModal() {
+    const modalRef = this.modalService.open(AddEditMasterBuildingComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          this.monitoringApiService
+            .postMasterBuildingParam(result)
+            .subscribe((res) => {
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  editRow(row) {
+    const modalRef = this.modalService.open(AddEditMasterBuildingComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.dataRow = row;
+    modalRef.componentInstance.mode = "edit";
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          this.monitoringApiService
+            .putMasterBuildingParam(result, row.id)
+            .subscribe((res) => {
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  deleteRow(row) {
+    const confirmDelete = confirm("Are you sure you want to delete this item?");
+    if (confirmDelete) {
+      this.monitoringApiService
+        .deleteHeaderDetailParam(row.id)
+        .subscribe((res) => {
+          this.fetchData();
+        });
+    }
+  }
+}

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;
+}
+

src/app/content/hemat-app/master/master-category/master-category.component.html

@@ -0,0 +1,128 @@
+<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"
+                        (click)="openAddMasterModal()"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="5"
+                      [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="Status"
+                        [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 === '1' ? 'Aktif' : 'Tidak Aktif'}}
+                        </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-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/master/master-category/master-category.component.spec.ts

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

src/app/content/hemat-app/master/master-category/master-category.component.ts

@@ -0,0 +1,140 @@
+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";
+import { BuildingService } from "../../service/monitoring-api.service";
+import { AddEditMasterComponent } from "../add-edit-master/add-edit-master.component";
+
+@Component({
+  selector: "app-master-category",
+  templateUrl: "./master-category.component.html",
+  styleUrls: ["./master-category.component.css"],
+})
+export class MasterCategoryComponent implements OnInit {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
+  dataMasterCategori: any;
+
+  @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Category",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Category",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.monitoringApiService.getMasterData().subscribe((res) => {
+      this.data = res.results.data;
+      this.dataMasterCategori = res.results.data.find(
+        (item) => item.name === "master_category"
+      );
+      this.filteredRows = this.dataMasterCategori.headerDetailParam;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [
+        ...this.data.find((item) => item.name === "master_category")
+          .headerDetailParam,
+      ];
+    } else {
+      this.filteredRows = this.data
+        .find((item) => item.name === "master_category")
+        .headerDetailParam.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)
+    );
+  }
+
+  openAddMasterModal() {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .postHeaderDetailParam(result)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  editRow(row) {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.dataRow = row;
+    modalRef.componentInstance.mode = "edit";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .putHeaderDetailParam(result, row.id)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  deleteRow(row) {
+    const confirmDelete = confirm("Are you sure you want to delete this item?");
+    if (confirmDelete) {
+      this.monitoringApiService
+        .deleteHeaderDetailParam(row.id)
+        .subscribe((res) => {
+          this.fetchData();
+        });
+    }
+  }
+}

src/app/content/hemat-app/master/master-duration-use/master-duration-use.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/master/master-duration-use/master-duration-use.component.html

@@ -0,0 +1,128 @@
+<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 Duration 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"
+                        (click)="openAddMasterModal()"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="5"
+                      [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="Status"
+                        [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 === '1' ? 'Aktif' : 'Tidak Aktif'}}
+                        </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-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/master/master-duration-use/master-duration-use.component.spec.ts

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

src/app/content/hemat-app/master/master-duration-use/master-duration-use.component.ts

@@ -0,0 +1,137 @@
+import { Component } from '@angular/core';
+import { AddEditMasterComponent } from '../add-edit-master/add-edit-master.component';
+import { TableApiService } from 'src/app/_services/table-api.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Router } from '@angular/router';
+import { BuildingService } from '../../service/monitoring-api.service';
+
+@Component({
+  selector: 'app-master-duration-use',
+  templateUrl: './master-duration-use.component.html',
+  styleUrls: ['./master-duration-use.component.css']
+})
+export class MasterDurationUseComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
+  dataMasterCategori: any;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Duration Use",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Duration Use",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.monitoringApiService.getMasterData().subscribe((res) => {
+      this.data = res.results.data;
+      this.dataMasterCategori = res.results.data.find(
+        (item) => item.name === "master_duration"
+      );
+      this.filteredRows = this.dataMasterCategori.headerDetailParam;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [
+        ...this.data.find((item) => item.name === "master_duration")
+          .headerDetailParam,
+      ];
+    } else {
+      this.filteredRows = this.data
+        .find((item) => item.name === "master_duration")
+        .headerDetailParam.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)
+    );
+  }
+
+  openAddMasterModal() {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .postHeaderDetailParam(result)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  editRow(row) {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.dataRow = row;
+    modalRef.componentInstance.mode = "edit";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .putHeaderDetailParam(result, row.id)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  deleteRow(row) {
+    const confirmDelete = confirm("Are you sure you want to delete this item?");
+    if (confirmDelete) {
+      this.monitoringApiService
+        .deleteHeaderDetailParam(row.id)
+        .subscribe((res) => {
+          this.fetchData();
+        });
+    }
+  }
+}

src/app/content/hemat-app/master/master-floor/master-floor.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/master/master-floor/master-floor.component.html

@@ -0,0 +1,128 @@
+<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 Floor 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"
+                        (click)="openAddMasterModal()"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="5"
+                      [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="Status"
+                        [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 === '1' ? 'Aktif' : 'Tidak Aktif'}}
+                        </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-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/master/master-floor/master-floor.component.spec.ts

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

src/app/content/hemat-app/master/master-floor/master-floor.component.ts

@@ -0,0 +1,137 @@
+import { Component } from '@angular/core';
+import { AddEditMasterComponent } from '../add-edit-master/add-edit-master.component';
+import { TableApiService } from 'src/app/_services/table-api.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Router } from '@angular/router';
+import { BuildingService } from '../../service/monitoring-api.service';
+
+@Component({
+  selector: 'app-master-floor',
+  templateUrl: './master-floor.component.html',
+  styleUrls: ['./master-floor.component.css']
+})
+export class MasterFloorComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
+  dataMasterCategori: any;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Floor",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Floor",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.monitoringApiService.getMasterData().subscribe((res) => {
+      this.data = res.results.data;
+      this.dataMasterCategori = res.results.data.find(
+        (item) => item.name === "master_floor"
+      );
+      this.filteredRows = this.dataMasterCategori.headerDetailParam;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [
+        ...this.data.find((item) => item.name === "master_floor")
+          .headerDetailParam,
+      ];
+    } else {
+      this.filteredRows = this.data
+        .find((item) => item.name === "master_floor")
+        .headerDetailParam.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)
+    );
+  }
+
+  openAddMasterModal() {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .postHeaderDetailParam(result)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  editRow(row) {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.dataRow = row;
+    modalRef.componentInstance.mode = "edit";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .putHeaderDetailParam(result, row.id)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  deleteRow(row) {
+    const confirmDelete = confirm("Are you sure you want to delete this item?");
+    if (confirmDelete) {
+      this.monitoringApiService
+        .deleteHeaderDetailParam(row.id)
+        .subscribe((res) => {
+          this.fetchData();
+        });
+    }
+  }
+}

src/app/content/hemat-app/master/master-role/master-role.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/master/master-role/master-role.component.html

@@ -0,0 +1,128 @@
+<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 Role 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"
+                        (click)="openAddMasterModal()"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="5"
+                      [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="Status"
+                        [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 === '1' ? 'Aktif' : 'Tidak Aktif'}}
+                        </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-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/master/master-role/master-role.component.spec.ts

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

src/app/content/hemat-app/master/master-role/master-role.component.ts

@@ -0,0 +1,137 @@
+import { Component } from '@angular/core';
+import { AddEditMasterComponent } from '../add-edit-master/add-edit-master.component';
+import { TableApiService } from 'src/app/_services/table-api.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Router } from '@angular/router';
+import { BuildingService } from '../../service/monitoring-api.service';
+
+@Component({
+  selector: 'app-master-role',
+  templateUrl: './master-role.component.html',
+  styleUrls: ['./master-role.component.css']
+})
+export class MasterRoleComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
+  dataMasterCategori: any;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Role",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Role",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.monitoringApiService.getMasterData().subscribe((res) => {
+      this.data = res.results.data;
+      this.dataMasterCategori = res.results.data.find(
+        (item) => item.name === "master_role"
+      );
+      this.filteredRows = this.dataMasterCategori.headerDetailParam;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [
+        ...this.data.find((item) => item.name === "master_role")
+          .headerDetailParam,
+      ];
+    } else {
+      this.filteredRows = this.data
+        .find((item) => item.name === "master_role")
+        .headerDetailParam.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)
+    );
+  }
+
+  openAddMasterModal() {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .postHeaderDetailParam(result)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  editRow(row) {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.dataRow = row;
+    modalRef.componentInstance.mode = "edit";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .putHeaderDetailParam(result, row.id)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  deleteRow(row) {
+    const confirmDelete = confirm("Are you sure you want to delete this item?");
+    if (confirmDelete) {
+      this.monitoringApiService
+        .deleteHeaderDetailParam(row.id)
+        .subscribe((res) => {
+          this.fetchData();
+        });
+    }
+  }
+}

src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.css

@@ -0,0 +1,56 @@
+/* modal-add-edit.component.css */
+::ng-deep .modal-backdrop.show {
+    z-index: auto !important;
+  }
+  
+  ::ng-deep .input-group-append .btn {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-radius: 0;
+      border-left: 0;
+      flex-grow: 0;
+      border-left: 1px solid #ced4da;
+      padding: 0.375rem 0.75rem;
+  }
+  
+  ::ng-deep .input-group {
+    display: flex;
+    flex-wrap: nowrap; /* Prevents wrapping of the items */
+    align-items: center;
+  }
+  
+  ::ng-deep .form-control {
+    flex-grow: 1; /* Ensures select takes up available space */
+    padding-right: 0.5rem;
+  }
+  
+  ::ng-deep .input-group select, 
+  ::ng-deep .input-group .input-group-append .btn {
+    padding-right: 5px; /* Adjust padding if necessary */
+  }
+  
+  ::ng-deep .input-group .form-control {
+    margin-right: 2px; /* Adjust margin to make space */
+  }
+  
+  
+  .form-group {
+    margin-bottom: 1rem;
+  }
+  
+  .form-control {
+    display: block;
+    width: 100%;
+    height: calc(1.5em + 0.75rem + 2px);
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  }
+  

src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.html

@@ -0,0 +1,55 @@
+<div class="modal-header">
+    <h4 class="modal-title">Add New Row</h4>
+    <button type="button" class="close" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <form [formGroup]="myForm">
+      <div class="form-row">
+        <div class="form-group col-md-6">
+          <label for="name">Name Room:</label>
+          <input
+            type="text"
+            class="form-control"
+            id="name"
+            formControlName="name"
+          />
+        </div>
+        <div class="form-group col-md-6">
+          <label for="description">Description:</label>
+          <input
+            type="text"
+            class="form-control"
+            id="description"
+            formControlName="description"
+          />
+        </div>
+        <!-- <div class="form-group col-md-6">
+          <label for="statusId">Status:</label>
+          <select
+            id="projectinput5"
+            class="form-control"
+            formControlName="statusId"
+          >
+            <option *ngFor="let data of filteredDataStatus" [value]="data.id">
+              {{ data.name }}
+            </option>
+          </select>
+        </div> -->
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button
+      type="button"
+      class="btn btn-secondary"
+      (click)="activeModal.dismiss('Cross click')"
+    >
+      Close
+    </button>
+    <button type="button" class="btn btn-primary" (click)="addRow()">
+      Save Changes
+    </button>
+  </div>
+  

src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddEditMasterRoomComponent } from './add-edit-master-room.component';
+
+describe('AddEditMasterRoomComponent', () => {
+  let component: AddEditMasterRoomComponent;
+  let fixture: ComponentFixture<AddEditMasterRoomComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddEditMasterRoomComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddEditMasterRoomComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/master/master-room/add-edit-master-room/add-edit-master-room.component.ts

@@ -0,0 +1,78 @@
+import { Component, Input } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { BuildingService } from '../../../service/monitoring-api.service';
+
+@Component({
+  selector: 'app-add-edit-master-room',
+  templateUrl: './add-edit-master-room.component.html',
+  styleUrls: ['./add-edit-master-room.component.css']
+})
+export class AddEditMasterRoomComponent {
+  @Input() dataRow: any;
+  @Input() mode: any;
+  myForm: FormGroup;
+
+  data: any;
+  dataStatus: any[];
+  filteredDataStatus: any[];
+  dataMasterStatus: any;
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    private fb: FormBuilder,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.createForm();
+    this.listDataStatus();
+
+    if (this.dataRow) {
+      this.editForm();
+    }
+  }
+
+  createForm() {
+    this.myForm = this.fb.group({
+      name: ["", Validators.required],
+      // statusId: [0, Validators.required],
+      description: ["", Validators.required],
+    });
+  }
+
+  editForm() {
+    this.myForm = this.fb.group({
+      id: this.dataRow.id,
+      name: this.dataRow.name,
+      // statusId: this.dataRow.statusId,
+      description: this.dataRow.description,
+    });
+  }
+
+  listDataStatus() {
+    this.monitoringApiService.getMasterData().subscribe((res) => {
+      this.data = res.results.data;
+      this.dataMasterStatus = res.results.data.find(
+        (item) => item.name === "master_status"
+      );
+      this.dataStatus = this.dataMasterStatus.headerDetailParam;
+      this.filteredDataStatus = this.dataStatus.filter(
+        (item) => item.status === "1"
+      );
+    });
+  }
+
+  addRow() {
+    if (this.myForm.valid) {
+      this.activeModal.close(this.myForm.value);
+    }
+  }
+
+  addDepartment() {
+    let newDept = prompt("Enter new department name:");
+    if (newDept) {
+      alert(`Department ${newDept} added! (simulated)`);
+    }
+  }
+}

src/app/content/hemat-app/master/master-room/master-room.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/master/master-room/master-room.component.html

@@ -0,0 +1,129 @@
+<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 Building 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"
+                        (click)="openAddMasterModal()"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="5"
+                      [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>Room Name</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          {{ value }}
+                        </ng-template>
+                      </ngx-datatable-column>
+                      
+                      <ngx-datatable-column
+                        name="statusId"
+                        [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 === 2 ? 'Aktif' : 'Tidak Aktif'}}
+                        </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-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/master/master-room/master-room.component.spec.ts

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

src/app/content/hemat-app/master/master-room/master-room.component.ts

@@ -0,0 +1,124 @@
+import { Component } from '@angular/core';
+import { AddEditMasterRoomComponent } from './add-edit-master-room/add-edit-master-room.component';
+import { TableApiService } from 'src/app/_services/table-api.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Router } from '@angular/router';
+import { BuildingService } from '../../service/monitoring-api.service';
+
+@Component({
+  selector: 'app-master-room',
+  templateUrl: './master-room.component.html',
+  styleUrls: ['./master-room.component.css']
+})
+export class MasterRoomComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Building",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Building",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.monitoringApiService.getMasterRoomData().subscribe((res) => {
+      this.data = res.results.data;
+      this.filteredRows = this.data;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [...this.data];
+    } else {
+      this.filteredRows = this.data.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)
+    );
+  }
+
+  openAddMasterModal() {
+    const modalRef = this.modalService.open(AddEditMasterRoomComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          this.monitoringApiService
+            .postMasterRoomParam(result)
+            .subscribe((res) => {
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  editRow(row) {
+    const modalRef = this.modalService.open(AddEditMasterRoomComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.dataRow = row;
+    modalRef.componentInstance.mode = "edit";
+    modalRef.result.then(
+      (result) => {
+        if (result) {
+          this.monitoringApiService
+            .putMasterRoomParam(result, row.id)
+            .subscribe((res) => {
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  deleteRow(row) {
+    const confirmDelete = confirm("Are you sure you want to delete this item?");
+    if (confirmDelete) {
+      this.monitoringApiService
+        .deleteHeaderDetailParam(row.id)
+        .subscribe((res) => {
+          this.fetchData();
+        });
+    }
+  }
+}

src/app/content/hemat-app/master/master-status/master-status.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/master/master-status/master-status.component.html

@@ -0,0 +1,128 @@
+<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 Status 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"
+                        (click)="openAddMasterModal()"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="5"
+                      [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="Status"
+                        [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 === '1' ? 'Aktif' : 'Tidak Aktif'}}
+                        </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-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/master/master-status/master-status.component.spec.ts

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

src/app/content/hemat-app/master/master-status/master-status.component.ts

@@ -0,0 +1,137 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { TableApiService } from 'src/app/_services/table-api.service';
+import { BuildingService } from '../../service/monitoring-api.service';
+import { AddEditMasterComponent } from '../add-edit-master/add-edit-master.component';
+
+@Component({
+  selector: 'app-master-status',
+  templateUrl: './master-status.component.html',
+  styleUrls: ['./master-status.component.css']
+})
+export class MasterStatusComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
+  dataMasterCategori: any;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Status",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Status",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.monitoringApiService.getMasterData().subscribe((res) => {
+      this.data = res.results.data;
+      this.dataMasterCategori = res.results.data.find(
+        (item) => item.name === "master_status"
+      );
+      this.filteredRows = this.dataMasterCategori.headerDetailParam;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [
+        ...this.data.find((item) => item.name === "master_status")
+          .headerDetailParam,
+      ];
+    } else {
+      this.filteredRows = this.data
+        .find((item) => item.name === "master_status")
+        .headerDetailParam.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)
+    );
+  }
+
+  openAddMasterModal() {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .postHeaderDetailParam(result)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  editRow(row) {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.dataRow = row;
+    modalRef.componentInstance.mode = "edit";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .putHeaderDetailParam(result, row.id)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  deleteRow(row) {
+    const confirmDelete = confirm("Are you sure you want to delete this item?");
+    if (confirmDelete) {
+      this.monitoringApiService
+        .deleteHeaderDetailParam(row.id)
+        .subscribe((res) => {
+          this.fetchData();
+        });
+    }
+  }
+}

src/app/content/hemat-app/master/master-type/master-type.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/master/master-type/master-type.component.html

@@ -0,0 +1,128 @@
+<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 Type 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"
+                        (click)="openAddMasterModal()"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="5"
+                      [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="Status"
+                        [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 === '1' ? 'Aktif' : 'Tidak Aktif'}}
+                        </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-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/master/master-type/master-type.component.spec.ts

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

src/app/content/hemat-app/master/master-type/master-type.component.ts

@@ -0,0 +1,137 @@
+import { Component } from '@angular/core';
+import { AddEditMasterComponent } from '../add-edit-master/add-edit-master.component';
+import { TableApiService } from 'src/app/_services/table-api.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Router } from '@angular/router';
+import { BuildingService } from '../../service/monitoring-api.service';
+
+@Component({
+  selector: 'app-master-type',
+  templateUrl: './master-type.component.html',
+  styleUrls: ['./master-type.component.css']
+})
+export class MasterTypeComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
+  dataMasterCategori: any;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Type",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Type",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.monitoringApiService.getMasterData().subscribe((res) => {
+      this.data = res.results.data;
+      this.dataMasterCategori = res.results.data.find(
+        (item) => item.name === "master_type"
+      );
+      this.filteredRows = this.dataMasterCategori.headerDetailParam;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [
+        ...this.data.find((item) => item.name === "master_type")
+          .headerDetailParam,
+      ];
+    } else {
+      this.filteredRows = this.data
+        .find((item) => item.name === "master_type")
+        .headerDetailParam.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)
+    );
+  }
+
+  openAddMasterModal() {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .postHeaderDetailParam(result)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  editRow(row) {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.dataRow = row;
+    modalRef.componentInstance.mode = "edit";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .putHeaderDetailParam(result, row.id)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  deleteRow(row) {
+    const confirmDelete = confirm("Are you sure you want to delete this item?");
+    if (confirmDelete) {
+      this.monitoringApiService
+        .deleteHeaderDetailParam(row.id)
+        .subscribe((res) => {
+          this.fetchData();
+        });
+    }
+  }
+}

src/app/content/hemat-app/master/master-user/master-user.component.html

@@ -0,0 +1 @@
+<p>master-user works!</p>

src/app/content/hemat-app/master/master-user/master-user.component.spec.ts

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

src/app/content/hemat-app/master/master-user/master-user.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-master-user',
+  templateUrl: './master-user.component.html',
+  styleUrls: ['./master-user.component.css']
+})
+export class MasterUserComponent {
+
+}

src/app/content/hemat-app/master/master-voltage/master-voltage.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/master/master-voltage/master-voltage.component.html

@@ -0,0 +1,128 @@
+<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 Voltage 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"
+                        (click)="openAddMasterModal()"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="5"
+                      [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="Status"
+                        [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 === '1' ? 'Aktif' : 'Tidak Aktif'}}
+                        </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-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/master/master-voltage/master-voltage.component.spec.ts

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

src/app/content/hemat-app/master/master-voltage/master-voltage.component.ts

@@ -0,0 +1,137 @@
+import { Component } from '@angular/core';
+import { AddEditMasterComponent } from '../add-edit-master/add-edit-master.component';
+import { TableApiService } from 'src/app/_services/table-api.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Router } from '@angular/router';
+import { BuildingService } from '../../service/monitoring-api.service';
+
+@Component({
+  selector: 'app-master-voltage',
+  templateUrl: './master-voltage.component.html',
+  styleUrls: ['./master-voltage.component.css']
+})
+export class MasterVoltageComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
+  dataMasterCategori: any;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Voltage",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Voltage",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.monitoringApiService.getMasterData().subscribe((res) => {
+      this.data = res.results.data;
+      this.dataMasterCategori = res.results.data.find(
+        (item) => item.name === "master_voltage"
+      );
+      this.filteredRows = this.dataMasterCategori.headerDetailParam;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [
+        ...this.data.find((item) => item.name === "master_voltage")
+          .headerDetailParam,
+      ];
+    } else {
+      this.filteredRows = this.data
+        .find((item) => item.name === "master_voltage")
+        .headerDetailParam.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)
+    );
+  }
+
+  openAddMasterModal() {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .postHeaderDetailParam(result)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  editRow(row) {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.dataRow = row;
+    modalRef.componentInstance.mode = "edit";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .putHeaderDetailParam(result, row.id)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  deleteRow(row) {
+    const confirmDelete = confirm("Are you sure you want to delete this item?");
+    if (confirmDelete) {
+      this.monitoringApiService
+        .deleteHeaderDetailParam(row.id)
+        .subscribe((res) => {
+          this.fetchData();
+        });
+    }
+  }
+}

src/app/content/hemat-app/master/master.module.ts

@@ -0,0 +1,107 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MasterCategoryComponent } from './master-category/master-category.component';
+import { MasterTypeComponent } from './master-type/master-type.component';
+
+import { RouterModule } from '@angular/router';
+import { ChartistModule } from 'ng-chartist';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgChartsModule } from 'ng2-charts';
+import { BlockUIModule } from 'ng-block-ui';
+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';
+import { MasterStatusComponent } from './master-status/master-status.component';
+import { MasterDurationUseComponent } from './master-duration-use/master-duration-use.component';
+import { MasterUserComponent } from './master-user/master-user.component';
+import { MasterRoleComponent } from './master-role/master-role.component';
+import { AddEditMasterComponent } from './add-edit-master/add-edit-master.component';
+import { MasterVoltageComponent } from './master-voltage/master-voltage.component';
+import { MasterFloorComponent } from './master-floor/master-floor.component';
+import { MasterRoomComponent } from './master-room/master-room.component';
+import { MasterBuildingComponent } from './master-building/master-building.component';
+import { AddEditMasterBuildingComponent } from './master-building/add-edit-master-building/add-edit-master-building.component';
+import { AddEditMasterRoomComponent } from './master-room/add-edit-master-room/add-edit-master-room.component';
+
+
+
+@NgModule({
+  declarations: [
+    MasterCategoryComponent,
+    MasterTypeComponent,
+    MasterStatusComponent,
+    MasterDurationUseComponent,
+    MasterUserComponent,
+    MasterRoleComponent,
+    AddEditMasterComponent,
+    MasterVoltageComponent,
+    MasterFloorComponent,
+    MasterRoomComponent,
+    MasterBuildingComponent,
+    AddEditMasterBuildingComponent,
+    AddEditMasterRoomComponent
+  ],
+  imports: [
+    CommonModule,
+    ChartistModule,
+    FormsModule,
+    NgChartsModule,
+    CardModule,
+    MatchHeightModule,
+    NgxDatatableModule,
+    PerfectScrollbarModule,
+    BreadcrumbModule,
+    ReactiveFormsModule,
+    NgbModule,
+    BlockUIModule.forRoot({
+      template: BlockTemplateComponent
+    }),
+    RouterModule.forChild([
+      {
+        path: 'master-category',
+        component: MasterCategoryComponent
+      },
+      {
+        path: 'master-floor',
+        component: MasterFloorComponent
+      },
+      {
+        path: 'master-voltage',
+        component: MasterVoltageComponent
+      },
+      {
+        path: 'master-type',
+        component: MasterTypeComponent
+      },
+      {
+        path: 'master-status',
+        component: MasterStatusComponent
+      },
+      {
+        path: 'master-duration-use',
+        component: MasterDurationUseComponent
+      },
+      {
+        path: 'master-user',
+        component: MasterUserComponent
+      },
+      {
+        path: 'master-role',
+        component: MasterRoleComponent
+      },
+      {
+        path: 'master-room',
+        component: MasterRoomComponent
+      },
+      {
+        path: 'master-building',
+        component: MasterBuildingComponent
+      }
+    ])
+  ]
+})
+export class MasterModule { }

src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.css

@@ -0,0 +1,329 @@
+.tab-content .tab-pane {
+    padding-top: 20px;
+}
+
+.alert {
+    padding: 8px;
+    margin-bottom: 8px;
+}
+
+.form-control.is-invalid {
+    border-color: #CACFE7;
+    background-image: none !important;
+}
+
+:host ::ng-deep .block-ui-wrapper {
+    background: rgba(255, 249, 249, 0.5) !important;
+}
+
+:host ::ng-deep .wizard-steps.vertical {
+    width: 90%;
+
+}
+
+:host ::ng-deep .vertical .large-filled-symbols {
+    width: 10;
+
+}
+
+@media screen and (max-width: 480px) {
+    .wizard-steps.vertical {
+        width: 80% !important;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .vertical .large-filled-symbols {
+        width: 20% !important;
+    }
+}
+
+:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li .step-indicator {
+    color: #999;
+    font-size: 19px;
+    text-align: center;
+    border: 5px solid #f4f5fa;
+    background-color: #fff;
+    line-height: 40px;
+}
+
+:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.editing:after {
+    color: #e6e6e6;
+    border: 3px solid #e6e6e6 !important;
+    background-color: #fff;
+    line-height: 40px;
+}
+
+:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.editing1:after {
+    color: #666EE8;
+    border: 5px solid #666EE8 !important;
+    background-color: #fff;
+    line-height: 40px;
+}
+
+
+
+:host ::ng-deep.horizontal.large-filled-symbols ul.steps-indicator li.done .step-indicator {
+    color: #fff;
+    border: 5px solid #666EE8;
+    background-color: #666EE8;
+    line-height: 40px;
+}
+
+:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li:not(:last-child):before {
+    background-color: #e6e6e6;
+    content: '';
+    position: absolute;
+    height: 5px !important;
+    width: calc(100% - 50px);
+    top: -25px;
+    left: calc(50% + 25px);
+}
+
+:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.done:before {
+    background-color: #666EE8;
+    content: '';
+    position: absolute;
+    height: 5px !important;
+    width: calc(100% - 50px);
+    top: -25px;
+    left: calc(50% + 25px);
+}
+
+:host ::ng-deep :host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done:not(:last-child):before  {
+    background-color: #f4f5fa;
+    height: 10px;
+    line-height: 40px;
+}
+
+:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done:not(:last-child):before {
+    background-color: #666EE8;
+    height: 5px;
+    line-height: 40px;
+}
+
+:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li .step-indicator {
+    color: #999;
+    font-size: 18px;
+    border: 5px solid #f4f5fa;
+    background-color: #fff;
+    line-height: 40px;
+}
+
+:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.editing:after {
+    color: #666EE8;
+    border: 5px solid #666EE8 !important;
+    background-color: #fff;
+    line-height: 40px;
+}
+
+:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.current .step-indicator {
+    color: #666EE8;
+    border: 5px solid #666EE8;
+    background-color: #fff;
+    line-height: 40px;
+}
+
+:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.done .step-indicator {
+    color: #fff;
+    border: 5px solid #666EE8;
+    background-color: #666EE8;
+    line-height: 40px;
+}
+
+:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li:not(:last-child):before {
+    background-color: #f4f5fa;
+    height: 10px;
+    line-height: 10px;
+}
+
+:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.navigable.done a:hover .step-indicator {
+    background-color: #666EE8;
+    color: #FFF;
+}
+
+:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li:not(:last-child):after {
+    background-color: #666EE8;
+    content: "";
+    position: absolute;
+    left: -25px;
+    top: 50px;
+    height: 10px;
+    width: 1px;
+}
+
+:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.current:after {
+    color: #666EE8;
+    border: 1px solid #f4f5fa;
+    background-color: #fff;
+    line-height: 40px;
+}
+
+:host ::ng-deep .vertical.large-filled-symbols ul.steps-indicator li.editing:after {
+    color: #e6e6e6;
+    border: 1px solid #e6e6e6 !important;
+    background-color: #fff;
+    line-height: 40px;
+}
+
+:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.done.step:after {
+    background-color: #666EE8;
+    border-color: #666EE8;
+    color: #FFF;
+    line-height: 40px;
+}
+
+:host ::ng-deep .horizontal ul.steps-indicator li .step-indicator {
+    position: relative;
+    margin: 0px;
+    text-align: center;
+}
+
+:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.navigable.done a:hover .step-indicator {
+    background-color: #666EE8;
+    color: #FFF;
+}
+
+:host ::ng-deep .btn-light:not(:disabled):not(.disabled):active {
+    color: unset !important;
+    background-color: unset !important;
+    border-color: #d3d9df !important;
+}
+
+:host ::ng-deep .btn-light:hover:not(.disabled):active {
+    background-color: #e2e6ea !important;
+    border-color: #dae0e5 !important;
+}
+
+:host ::ng-deep .btn-light {
+    color: unset !important;
+    background-color: unset !important;
+    border-color: unset !important;
+}
+
+:host ::ng-deep .bg-primary {
+    background-color: #007bff !important;
+}
+
+:host ::ng-deep .text-white {
+    color: #fff !important;
+}
+
+:host ::ng-deep .custom-day {
+    text-align: center;
+    padding: .185rem .25rem;
+    display: inline-block;
+    height: 2rem;
+    width: 2rem;
+}
+
+:host ::ng-deep .custom-day:active {
+    color: #6d7183 !important;
+    background-color: #fff !important;
+    border-block-color: rgb(2, 117, 216) !important;
+
+}
+
+.bg-light {
+    background-color: #f8f9fa !important;
+}
+
+:host ::ng-deep .hidden {
+    display: block !important;
+}
+
+.ngb-dp-weekday {
+    color: #17a2b8;
+}
+
+.ngb-dp-week-number,
+.ngb-dp-weekday {
+    line-height: 2rem;
+    text-align: center;
+    font-style: italic;
+}
+
+.ngb-datepicker-month-view {
+    pointer-events: auto;
+}
+
+:host ::ng-deep .ngb-dp-header {
+    background-color: var(--light) !important;
+}
+
+:host ::ng-deep .ngb-dp-weekdays {
+    background-color: var(--light);
+}
+
+:host ::ng-deep .ngb-dp-month-name {
+    background-color: var(--light);
+}
+
+.small {
+    font-size: 80%;
+    font-weight: 400;
+}
+
+.ngb-dp-day {
+    cursor: pointer !important;
+}
+
+.ngb-dp-month {
+    pointer-events: none;
+}
+
+.btn-light:hover {
+    color: #212529 !important;
+    background-color: #e2e6ea !important;
+    border-color: #dae0e5 !important;
+}
+
+.ngb-datepicker-month-view {
+    pointer-events: auto;
+}
+
+.ngb-dp-header {
+    border-bottom: 0;
+    border-radius: .25rem .25rem 0 0;
+    padding-top: .25rem;
+}
+
+.ngb-dp-day,
+.ngb-dp-week-number,
+.ngb-dp-weekday {
+    width: 2rem;
+    height: 2rem;
+}
+
+.custom-day {
+    text-align: center;
+    padding: 0.185rem 0.25rem;
+    display: inline-block;
+    height: 2rem;
+    width: 2rem;
+}
+
+.custom-day.focused {
+    background-color: #e6e6e6;
+}
+
+.custom-day.range,
+.custom-day:hover {
+    background-color: rgb(2, 117, 216);
+    color: white;
+}
+
+.custom-day.faded {
+    background-color: rgba(2, 117, 216, 0.5);
+}
+
+:host ::ng-deep .block-ui-wrapper {
+    background: rgba(255, 249, 249, 0.5) !important;
+}
+
+:host ::ng-deep .horizontal.large-filled-symbols ul.steps-indicator li.current .step-indicator {
+    color: #666EE8;
+    border: 5px solid #666EE8;
+    background-color: #fff;
+    line-height: 40px;
+}

src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.html

@@ -0,0 +1,175 @@
+<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="basic-form-layouts">
+        <div class="row">
+          <div class="col-6" *blockUI="'numberTabs'; message: 'Loading'">
+            <m-card>
+              <ng-container mCardHeaderTitle>
+                <!-- <h2>Add New</h2> -->
+              </ng-container>
+              <ng-container mCardBody>
+                <div class="card-block">
+                  <div class="card-content collapse show">
+                    <div class="card-body">
+                      <form [formGroup]="userProfileForm" class="row">
+                        <div class="form-group col-md-6 mb-2">
+                          <label for="name">Building Name *</label>
+                          <select
+                            id="buildingId"
+                            class="form-control"
+                            formControlName="buildingId"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.interestedIn.errors
+                            }"
+                          >
+                            <option
+                              *ngFor="let interest of interestedIn"
+                              [value]="interest"
+                            >
+                              {{ interest }}
+                            </option>
+                          </select>
+                        </div>
+                        <div class="form-group col-md-6 mb-2">
+                          <label for="name">Floor*</label>
+                          <select
+                            id="floorId"
+                            class="form-control"
+                            formControlName="floorId"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.interestedIn.errors
+                            }"
+                          >
+                            <option
+                              *ngFor="let interest of interestedIn"
+                              [value]="interest"
+                            >
+                              {{ interest }}
+                            </option>
+                          </select>
+                        </div>
+                        <div class="form-group col-12 mb-2">
+                          <label for="name">Status*</label>
+                          <select
+                            id="statusId"
+                            class="form-control"
+                            formControlName="statusId"
+                            [ngClass]="{
+                              'is-invalid': submitted && f.interestedIn.errors
+                            }"
+                          >
+                            <option
+                              *ngFor="let interest of interestedIn"
+                              [value]="interest"
+                            >
+                              {{ interest }}
+                            </option>
+                          </select>
+                        </div>
+                        <div class="form-group col-12 mb-2 contact-repeater">
+                          <div class="" formArrayName="userArray">
+                            <div
+                              class=""
+                              *ngFor="
+                                let userForm of userFormGroup.controls;
+                                let i = index
+                              "
+                            >
+                              <div [formGroupName]="i" class="">
+                                <div class="input-group mb-1">
+                                  <select
+                                    id="roomId"
+                                    class="form-control"
+                                    formControlName="roomId"
+                                    [ngClass]="{
+                                      'is-invalid':
+                                        submitted && f.interestedIn.errors
+                                    }"
+                                  >
+                                    <option
+                                      *ngFor="let interest of interestedIn"
+                                      [value]="interest"
+                                    >
+                                      {{ interest }}
+                                    </option>
+                                  </select>
+                                  <button
+                                    class="btn btn-danger"
+                                    type="button"
+                                    (click)="removePhone(i)"
+                                  >
+                                    <i class="feather ft-x"></i>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <button
+                            type="button"
+                            class="btn btn-primary"
+                            (click)="addPhone()"
+                          >
+                            <i class="feather ft-plus"></i> Add Room
+                          </button>
+                        </div>
+
+                        <div class="form-group text-center">
+                          <button
+                            uiSref="personal"
+                            type="button"
+                            class="btn btn-raised btn-danger mr-1"
+                            (click)="cancel()"
+                          >
+                            <span style="margin-right: 10px">
+                              <i class="feather ft-x"></i>
+                            </span>
+                            Cancel
+                          </button>
+                          <button
+                            type="button"
+                            uiSref="work"
+                            class="btn btn-info btn-raised"
+                          >
+                            Save
+                            <span style="margin-left: 10px">
+                              <i class="feather ft-chevron-right"></i>
+                            </span>
+                          </button>
+                        </div>
+                      </form>
+                    </div>
+                  </div>
+                </div>
+              </ng-container>
+            </m-card>
+          </div>
+          <div class="col-6">
+            <m-card style="background: transparent !important">
+              <ng-container mCardHeaderTitle>
+                <!-- <h2>Profile Image</h2> -->
+              </ng-container>
+              <ng-container mCardBody>
+                <div class="card-block">
+                  <div class="card-content collapse show">
+                    <div class="card-body text-center">
+                      <img
+                        src="../../../assets/images/backgrounds/smart3.jpg"
+                        alt="Profile Image"
+                        class="img-fluid rounded-circle"
+                        style="max-width: 50%"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </ng-container>
+            </m-card>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>

src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddNewBuildingRoomComponent } from './add-new-building-room.component';
+
+describe('AddNewBuildingRoomComponent', () => {
+  let component: AddNewBuildingRoomComponent;
+  let fixture: ComponentFixture<AddNewBuildingRoomComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddNewBuildingRoomComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddNewBuildingRoomComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/content/hemat-app/monitoring/add-new-building-room/add-new-building-room.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnInit } from "@angular/core";
+import { FormArray, FormBuilder, FormGroup, Validators } from "@angular/forms";
+import { ActivatedRoute, Router } from "@angular/router";
+import { BlockUI, NgBlockUI } from "ng-block-ui";
+
+@Component({
+  selector: "app-add-new-building-room",
+  templateUrl: "./add-new-building-room.component.html",
+  styleUrls: ["./add-new-building-room.component.css"],
+})
+export class AddNewBuildingRoomComponent implements OnInit {
+  public breadcrumb: any;
+  mode: string;
+  userProfileForm: FormGroup;
+  public userList: FormArray;
+  submitted = false;
+  get userFormGroup() {
+    return this.userProfileForm.get('userArray') as FormArray;
+  }
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Add building",
+      links: [
+        {
+          name: "Add Building",
+          isLink: false,
+        },
+      ],
+    };
+    this.userProfileForm = this.formBuilder.group({
+      buildingId: ['', Validators.required],
+      roomId: ['', Validators.required],
+      floorId: ['', Validators.required],
+      userArray: this.formBuilder.array([this.createPhone()]),
+    });
+
+    this.userList = this.userProfileForm.get('userArray') as FormArray;
+  }
+
+  createPhone(): FormGroup {
+    return this.formBuilder.group({
+      roomId: ['', Validators.required]
+    });
+  }
+
+  addPhone() {
+    this.userList.push(this.createPhone());
+  }
+
+  removePhone(index) {
+    this.userList.removeAt(index);
+  }
+
+  cancel() {
+    this.router.navigate(["/monitoring"]);
+  }
+}

src/app/content/hemat-app/monitoring/building/building.component.css

@@ -0,0 +1,46 @@
+:host ::ng-deep .gap_fl_btn {
+    margin: 0 0.3rem;
+}
+
+:host ::ng-deep .block-ui-wrapper {
+  background: rgba(255, 249, 249, 0.5) !important;
+}
+
+:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
+  stroke: #01a32f;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
+  stroke: #757575;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
+  stroke: #dcdf03;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
+  stroke: #757575;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart3 .ct-series-a .ct-slice-donut {
+  stroke: #d50c08;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart3 .ct-series-b .ct-slice-donut {
+  stroke: #757575;
+  stroke-width: 20px !important;
+}
+
+.btn-no-hover {
+  border: none !important;
+}
+
+.btn-no-hover:hover {
+  background-color: transparent !important;
+  color: inherit !important;
+}

src/app/content/hemat-app/monitoring/building/building.component.html

@@ -0,0 +1,162 @@
+<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="social-cards">
+        <div class="row mb-2">
+          <div class="col-md-6">
+            <input
+              type="text"
+              class="form-control"
+              placeholder="Search..."
+              [(ngModel)]="searchTerm"
+              (input)="filterRows()"
+            />
+          </div>
+          <div class="col-md-6 text-right">
+            <button
+              class="btn btn-secondary"
+              [routerLink]="['/monitoring/add-new-building']"
+            >
+              <i class="feather ft-plus"></i>&nbsp; Add new building
+            </button>
+          </div>
+        </div>
+        <div class="row mt-2">
+          <div
+            class="col-xl-4 col-md-6 col-12"
+            *ngFor="let data of filteredRows"
+          >
+            <div class="card">
+              <div class="card-header mb-2">
+                <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 ? data.build_name : data.name}}
+                    </h3>
+                  </div>
+                </div>
+                <hr style="border-top: 3px solid #100a0a" />
+              </div>
+              <div class="card-content">
+                <div
+                  [ngClass]="{
+                    'donut-chart1': data.donut.series[0] <= 50,
+                    'donut-chart2':
+                      data.donut.series[0] > 50 && data.donut.series[0] < 75,
+                    'donut-chart3': data.donut.series[0] >= 75
+                  }"
+                >
+                  <x-chartist
+                    *ngIf="data"
+                    [data]="data.donut"
+                    [type]="donutChart1.type"
+                    [options]="donutChart1.options"
+                    [events]="donutChart1.events"
+                  >
+                  </x-chartist>
+                </div>
+
+                <div
+                  class="text-center"
+                  style="
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                  "
+                >
+                  <h3
+                    class="display-4 blue-grey darken-1"
+                    style="font-size: 2em"
+                  >
+                    {{ data.total }} kWh
+                  </h3>
+                </div>
+                <div class="card-body" style="padding-top: 0">
+                  <div class="row mb-3">
+                    <div
+                      class="col-xl-6 col-md-6 col-12"
+                      *ngFor="let top of data.topUse; let i = index"
+                    >
+                      <div>
+                        <span class="mb-1 text-muted cardtext d-block"
+                          >{{ top.value }}% - {{ top.label }}</span
+                        >
+                        <div>
+                          <ngb-progressbar
+                            height="7px"
+                            type="danger"
+                            [value]="top.value"
+                          ></ngb-progressbar>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="form-group text-center">
+                  <button
+                    type="button"
+                    class="btn btn-float btn-square btn-outline-secondary"
+                    triggers="hover:click:hover"
+                    ngbTooltip="Edit"
+                    (click)="editRow(data)"
+                  >
+                    <i class="feather ft-edit"></i>
+                  </button>
+
+                  <button
+                    type="button"
+                    class="gap_fl_btn btn btn-float btn-square btn-float-lg btn-outline-primary"
+                    triggers="hover:click:hover"
+                    ngbTooltip="Detail"
+                    (click)="viewRow(data)"
+                  >
+                    <i class="la la-building"></i>
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-float btn-square btn-outline-secondary"
+                    triggers="hover:click:hover"
+                    ngbTooltip="Room"
+                    (click)="viewRoom(data)"
+                  >
+                    <i class="feather ft-log-in"></i>
+                  </button>
+                </div>
+                <!-- <div class="form-group text-center">
+                  <button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-adn"><span
+                      class="la la-adn"></span></button>
+                  <button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-bitbucket"><span
+                      class="la la-bitbucket font-medium-4"></span></button>
+                  <button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-dropbox"><span
+                      class="la la-dropbox font-medium-4"></span></button>
+                  <button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
+                      class="la la-facebook"></span></button>
+                  <button [routerLink]="" n class="btn btn-social-icon mr-1 mb-1 btn-outline-flickr"><span
+                      class="la la-flickr font-medium-4"></span></button>
+                  <button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-foursquare"><span
+                      class="la la-foursquare font-medium-4"></span></button>
+                  <button [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
+                      class="la la-github font-medium-4"></span></button>
+                </div> -->
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>

src/app/content/hemat-app/monitoring/building/building.component.spec.ts

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

src/app/content/hemat-app/monitoring/building/building.component.ts

@@ -0,0 +1,97 @@
+import { Component } from "@angular/core";
+import { TableMonitoringService } from "../monitoring.service";
+import { Router } from "@angular/router";
+import { BuildingService } from "../../service/monitoring-api.service";
+
+@Component({
+  selector: "app-building",
+  templateUrl: "./building.component.html",
+  styleUrls: ["./building.component.css"],
+})
+export class BuildingComponent {
+  data: any;
+  public breadcrumb: any;
+  feedbacksdonutChart: any;
+  donutChart1: any;
+  filteredRows: any[];
+  dataTop: any;
+  searchTerm: string = "";
+  colorChart: string = "";
+
+  constructor(
+    private monitoringService: TableMonitoringService,
+    private monitoringApiService: BuildingService,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Dashboard",
+      links: [
+        {
+          name: "Dashboard",
+          isLink: false,
+        },
+      ],
+    };
+
+    this.donutChart1 = {
+      type: "Pie",
+      options: {
+        fullwidth: true,
+        height: "250px",
+        donut: true,
+        donutWidth: 60,
+        startAngle: 270,
+        total: 200,
+        showLabel: false,
+      },
+    };
+    this.listBuilding();
+  }
+
+  listBuilding() {
+    this.monitoringApiService.listBuilding().subscribe((res) => {
+      console.log(res.data);
+      this.data = res.data;
+      this.filteredRows = res.data;
+    });
+  }
+
+  buildingData() {
+    this.monitoringApiService.getBuildingData().subscribe((res) => {
+      console.log(res);
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [...this.data];
+    } else {
+      this.filteredRows = this.data.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) {
+    this.router.navigate(["/monitoring/view-new-building", row.id]);
+  }
+
+  editRow(row) {
+    this.router.navigate(["/monitoring/edit-new-building", row.id]);
+  }
+
+  viewRoom(row) {
+    console.log(row);
+    this.router.navigate(["/monitoring/monitoring-room", row.id]);
+  }
+}

src/app/content/hemat-app/monitoring/detail-room/detail-room.component.html

@@ -0,0 +1 @@
+<p>detail-room works!</p>

src/app/content/hemat-app/monitoring/detail-room/detail-room.component.spec.ts

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

src/app/content/hemat-app/monitoring/detail-room/detail-room.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-detail-room',
+  templateUrl: './detail-room.component.html',
+  styleUrls: ['./detail-room.component.css']
+})
+export class DetailRoomComponent {
+
+}

src/app/content/hemat-app/monitoring/detail/detail.component.css

@@ -0,0 +1,140 @@
+:host ::ng-deep .Likes .ct-series-a .ct-point {
+    stroke: #28d094;
+}
+: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 .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;
+}