From 468045384e4a07b28ca1e6d8ce588093cd5c8393 Mon Sep 17 00:00:00 2001
From: Fuzi_fauzia <fuzi.fauzia@allbestsistem.com>
Date: Wed, 12 Jun 2024 15:17:08 +0700
Subject: [PATCH] penyesuaian UI sesuai Figma

---
 .../breadcrumb/breadcrumb.component.css       |   1 +
 .../breadcrumb/breadcrumb.component.html      |  16 +-
 src/app/_layout/footer/footer.component.html  |   6 +-
 .../header/vertical/vertical.component.css    |   6 +
 .../header/vertical/vertical.component.html   | 268 ++++++---
 .../verticalnav/verticalnav.component.css     |  23 +
 .../verticalnav/verticalnav.component.html    |  23 +-
 .../verticalnav/verticalnav.component.ts      |   3 +-
 .../cost-management.component.css             | 222 +++++--
 .../cost-management.component.html            | 543 ++++++++++--------
 .../device-control.component.css              |   0
 .../device-control.component.html             |   1 +
 .../device-control.component.spec.ts          |  23 +
 .../device-control.component.ts               |  10 +
 .../hemat-app/device/device.component.css     | 376 ++++++++----
 .../hemat-app/device/device.component.html    | 513 +++++++++--------
 .../content/hemat-app/device/device.module.ts |   4 +-
 .../list-monitoring.component.html            |   2 +-
 .../building/building.component.css           |  28 +-
 .../building/building.component.html          |  29 +-
 .../monitoring/detail/detail.component.css    |  12 +-
 .../monitoring/detail/detail.component.html   | 139 +++--
 .../monitoring/detail/detail.component.ts     |  32 +-
 src/assets/images/Smart-Building.png          | Bin 0 -> 2287 bytes
 src/assets/sass/scss/bootstrap/_forms.scss    |   6 +-
 25 files changed, 1419 insertions(+), 867 deletions(-)
 create mode 100644 src/app/content/hemat-app/device/device-control/device-control.component.css
 create mode 100644 src/app/content/hemat-app/device/device-control/device-control.component.html
 create mode 100644 src/app/content/hemat-app/device/device-control/device-control.component.spec.ts
 create mode 100644 src/app/content/hemat-app/device/device-control/device-control.component.ts
 create mode 100644 src/assets/images/Smart-Building.png

diff --git a/src/app/_layout/breadcrumb/breadcrumb.component.css b/src/app/_layout/breadcrumb/breadcrumb.component.css
index 38fdf49..54851f7 100644
--- a/src/app/_layout/breadcrumb/breadcrumb.component.css
+++ b/src/app/_layout/breadcrumb/breadcrumb.component.css
@@ -18,3 +18,4 @@
       transform: translate(40px, 40px) !important;
   }
 }
+
diff --git a/src/app/_layout/breadcrumb/breadcrumb.component.html b/src/app/_layout/breadcrumb/breadcrumb.component.html
index 3e170af..c58fc34 100644
--- a/src/app/_layout/breadcrumb/breadcrumb.component.html
+++ b/src/app/_layout/breadcrumb/breadcrumb.component.html
@@ -6,7 +6,7 @@
     <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">
+    <h3 class="content-header-title mb-0 d-inline-block" style="color: #ffffff;">
       {{ breadcrumb.mainlabel }}
     </h3>
     <div class="row breadcrumbs-top d-inline-block">
@@ -16,22 +16,10 @@
             <a *ngIf="link.isLink" routerLink="{{ link.link }}">{{
               link.name
             }}</a>
-            <span *ngIf="!link.isLink">{{ link.name }}</span>
+            <span *ngIf="!link.isLink" style="color: #ffffff;">{{ link.name }}</span>
           </li>
         </ol>
       </div>
     </div>
   </div>
-  <!-- <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">
-        <button class="dropdown-item">Calender</button>
-        <button class="dropdown-item">Cart</button>
-        <button class="dropdown-item">Support</button>
-        <div class="dropdown-divider"></div>
-        <button class="dropdown-item">Settings</button>
-      </div>
-    </div>
-  </div> -->
 </div>
diff --git a/src/app/_layout/footer/footer.component.html b/src/app/_layout/footer/footer.component.html
index 5d61067..19f0ad1 100644
--- a/src/app/_layout/footer/footer.component.html
+++ b/src/app/_layout/footer/footer.component.html
@@ -2,15 +2,17 @@
   id="footer"
   class="footer footer-static footer-light navbar-border navbar-shadow"
   *ngIf="showFooter"
+  style="background-color: #000000 !important; border: none !important;"
 >
-  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
-    <span class="float-md-left d-block d-md-inline-block"
+  <p class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2" style="background-color: #000000 !important;">
+    <span class="float-md-ceter d-block d-md-inline-block" style="background-color: #000000 !important;"
       >Copyright &copy; 2024
       <a
         [routerLink]=""
         class="text-bold-800 grey darken-2"
         href="https://allbestsistem.com/"
         target="_blank"
+        style="background-color: #000000 !important;"
         >Allbest Solusi Sistem (V@2024-06-11.01)
       </a></span
     >
diff --git a/src/app/_layout/header/vertical/vertical.component.css b/src/app/_layout/header/vertical/vertical.component.css
index 3017bf8..db66d04 100644
--- a/src/app/_layout/header/vertical/vertical.component.css
+++ b/src/app/_layout/header/vertical/vertical.component.css
@@ -33,3 +33,9 @@
 .header-navbar .navbar-header .navbar-brand .brand-text {
   padding-left: 11px !important;
 }
+
+.brand-text-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+}
+
diff --git a/src/app/_layout/header/vertical/vertical.component.html b/src/app/_layout/header/vertical/vertical.component.html
index f195fea..b22479b 100644
--- a/src/app/_layout/header/vertical/vertical.component.html
+++ b/src/app/_layout/header/vertical/vertical.component.html
@@ -1,27 +1,71 @@
-<nav class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-shadow"
-  [ngClass]="selectedHeaderNavBarClass">
+<nav
+  class="header-navbar navbar-expand-md navbar navbar-with-menu navbar-without-dd-arrow fixed-top navbar-shadow"
+  [ngClass]="selectedHeaderNavBarClass"
+  style="background-color: #000000 !important"
+>
   <div class="navbar-wrapper">
-    <div id="navbar-header" class="navbar-header" [ngClass]="selectedNavBarHeaderClass"
-      (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)">
+    <div
+      id="navbar-header"
+      class="navbar-header"
+      [ngClass]="selectedNavBarHeaderClass"
+      (mouseenter)="mouseEnter($event)"
+      (mouseleave)="mouseLeave($event)"
+      style="background-color: #252525 !important"
+    >
       <ul class="nav navbar-nav flex-row">
         <!-- Remove position relative in responsive -->
-        <li class="nav-item mobile-menu d-lg-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 mr-auto"><a [routerLink]="['/dashboard/sales']" class="navbar-brand"
-            routerLink="/dashboard/sales"><img class="brand-logo" alt="modern admin logo"
-              [src]="_themeSettingsConfig.brand.logo.value">
-            <h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}}</h3>
-          </a></li>
-        <li class="nav-item d-none d-md-block nav-toggle">
-          <a [routerLink]="" class="nav-link modern-nav-toggle pr-0" data-toggle="collapse"
-            (click)="toggleFixMenu($event)">
-            <i class="feather toggle-icon font-medium-3 white"
-              [ngClass]="{'ft-toggle-left': _themeSettingsConfig.menu === 'collapse','ft-toggle-right': _themeSettingsConfig.menu === 'expand'}"></i>
+        <li class="nav-item mobile-menu d-lg-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 mr-auto">
+          <a
+            [routerLink]="['/dashboard/sales']"
+            class="navbar-brand"
+            routerLink="/dashboard/sales"
+            >
+            <!-- <img
+              class="brand-logo"
+              alt="modern admin logo"
+              src="../../../../assets/images/Smart-Building.png"
+            /> -->
+            <!-- <h3 class="brand-text" style="color: #ffffff;">{{_themeSettingsConfig.brand.brand_name}}</h3> -->
+            <div class="brand-text-wrapper" style="max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+              <h3 class="brand-text" style="color: #ffffff; margin: 0;">
+                Smart Building
+              </h3>
+            </div>
           </a>
         </li>
-        <li class="nav-item d-lg-none"><a class="nav-link open-navbar-container" data-toggle="collapse"
-            data-target="#navbar-mobile" (click)="toggleNavbar($event)"><i class="la la-ellipsis-v"></i></a></li>
+        <li class="nav-item d-none d-md-block nav-toggle">
+          <a
+            [routerLink]=""
+            class="nav-link modern-nav-toggle pr-0"
+            data-toggle="collapse"
+            (click)="toggleFixMenu($event)"
+          >
+            <i
+              class="feather toggle-icon font-medium-3 white"
+              [ngClass]="{
+                'ft-toggle-left': _themeSettingsConfig.menu === 'collapse',
+                'ft-toggle-right': _themeSettingsConfig.menu === 'expand'
+              }"
+            ></i>
+          </a>
+        </li>
+        <li class="nav-item d-lg-none">
+          <a
+            class="nav-link open-navbar-container"
+            data-toggle="collapse"
+            data-target="#navbar-mobile"
+            (click)="toggleNavbar($event)"
+            ><i class="la la-ellipsis-v"></i
+          ></a>
+        </li>
       </ul>
     </div>
     <!-- New-->
@@ -57,80 +101,144 @@
               </a>
             </div>
           </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>
+              <i class="ficon feather ft-bell" style="color: #bef264"></i>
+              <!-- <span class="badge badge-pill badge-danger badge-up badge-glow">5</span> -->
             </a>
             <ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
               <li class="dropdown-menu-header">
-                <h6 class="dropdown-header m-0"><span class="grey darken-2">Notifications</span></h6><span
-                  class="notification-tag badge badge-default badge-danger float-right m-0">5 New</span>
+                <h6 class="dropdown-header m-0">
+                  <span class="grey darken-2">Notifications</span>
+                </h6>
+                <span
+                  class="notification-tag badge badge-default badge-danger float-right m-0"
+                  >5 New</span
+                >
               </li>
-              <li class="scrollable-container media-list w-100 ps-container ps-theme-dark ps-active-y" fxFlex="auto" [perfectScrollbar]="config">
+              <li
+                class="scrollable-container media-list w-100 ps-container ps-theme-dark ps-active-y"
+                fxFlex="auto"
+                [perfectScrollbar]="config"
+              >
                 <a href="javascript:void(0)">
                   <div class="media">
-                    <div class="media-left align-self-center"><i
-                        class="feather ft-plus-square icon-bg-circle bg-cyan"></i>
+                    <div class="media-left align-self-center">
+                      <i
+                        class="feather ft-plus-square icon-bg-circle bg-cyan"
+                      ></i>
                     </div>
                     <div class="media-body">
                       <h6 class="media-heading">You have new order!</h6>
-                      <p class="notification-text font-small-3 text-muted">Lorem ipsum dolor sit amet, consectetuer
-                        elit.</p><small>
-                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">30 minutes
-                          ago</time></small>
+                      <p class="notification-text font-small-3 text-muted">
+                        Lorem ipsum dolor sit amet, consectetuer elit.
+                      </p>
+                      <small>
+                        <time
+                          class="media-meta text-muted"
+                          datetime="2015-06-11T18:29:20+08:00"
+                          >30 minutes ago</time
+                        ></small
+                      >
                     </div>
                   </div>
                 </a>
                 <a href="javascript:void(0)">
                   <div class="media">
-                    <div class="media-left align-self-center"><i
-                        class="feather ft-download-cloud icon-bg-circle bg-red bg-darken-1"></i></div>
+                    <div class="media-left align-self-center">
+                      <i
+                        class="feather ft-download-cloud icon-bg-circle bg-red bg-darken-1"
+                      ></i>
+                    </div>
                     <div class="media-body">
-                      <h6 class="media-heading red darken-1">99% Server load</h6>
-                      <p class="notification-text font-small-3 text-muted">Aliquam tincidunt mauris eu risus.</p><small>
-                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Five hour
-                          ago</time></small>
+                      <h6 class="media-heading red darken-1">
+                        99% Server load
+                      </h6>
+                      <p class="notification-text font-small-3 text-muted">
+                        Aliquam tincidunt mauris eu risus.
+                      </p>
+                      <small>
+                        <time
+                          class="media-meta text-muted"
+                          datetime="2015-06-11T18:29:20+08:00"
+                          >Five hour ago</time
+                        ></small
+                      >
                     </div>
                   </div>
                 </a>
                 <a href="javascript:void(0)">
                   <div class="media">
-                    <div class="media-left align-self-center"><i
-                        class="feather ft-alert-triangle icon-bg-circle bg-yellow bg-darken-3"></i></div>
+                    <div class="media-left align-self-center">
+                      <i
+                        class="feather ft-alert-triangle icon-bg-circle bg-yellow bg-darken-3"
+                      ></i>
+                    </div>
                     <div class="media-body">
-                      <h6 class="media-heading yellow darken-3">Warning notifixation</h6>
-                      <p class="notification-text font-small-3 text-muted">Vestibulum auctor dapibus neque.</p><small>
-                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Today</time></small>
+                      <h6 class="media-heading yellow darken-3">
+                        Warning notifixation
+                      </h6>
+                      <p class="notification-text font-small-3 text-muted">
+                        Vestibulum auctor dapibus neque.
+                      </p>
+                      <small>
+                        <time
+                          class="media-meta text-muted"
+                          datetime="2015-06-11T18:29:20+08:00"
+                          >Today</time
+                        ></small
+                      >
                     </div>
                   </div>
                 </a>
                 <a href="javascript:void(0)">
                   <div class="media">
-                    <div class="media-left align-self-center"><i
-                        class="feather ft-check-circle icon-bg-circle bg-cyan"></i>
+                    <div class="media-left align-self-center">
+                      <i
+                        class="feather ft-check-circle icon-bg-circle bg-cyan"
+                      ></i>
                     </div>
                     <div class="media-body">
-                      <h6 class="media-heading">Complete the task</h6><small>
-                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Last
-                          week</time></small>
+                      <h6 class="media-heading">Complete the task</h6>
+                      <small>
+                        <time
+                          class="media-meta text-muted"
+                          datetime="2015-06-11T18:29:20+08:00"
+                          >Last week</time
+                        ></small
+                      >
                     </div>
                   </div>
                 </a>
                 <a href="javascript:void(0)">
                   <div class="media">
-                    <div class="media-left align-self-center"><i class="feather ft-file icon-bg-circle bg-teal"></i>
+                    <div class="media-left align-self-center">
+                      <i class="feather ft-file icon-bg-circle bg-teal"></i>
                     </div>
                     <div class="media-body">
-                      <h6 class="media-heading">Generate monthly report</h6><small>
-                        <time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">Last
-                          month</time></small>
+                      <h6 class="media-heading">Generate monthly report</h6>
+                      <small>
+                        <time
+                          class="media-meta text-muted"
+                          datetime="2015-06-11T18:29:20+08:00"
+                          >Last month</time
+                        ></small
+                      >
                     </div>
                   </div>
                 </a>
               </li>
-              <li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
-                  href="javascript:void(0)">Read all notifications</a></li>
+              <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 class="dropdown-notification nav-item" ngbDropdown>
@@ -198,24 +306,52 @@
 
           <li class="dropdown-user nav-item" ngbDropdown>
             <a class="nav-link dropdown-user-link" ngbDropdownToggle>
-              <span *ngIf="currentUser.displayName"
-                class="mr-1 user-name text-bold-700">{{currentUser.displayName}}</span>
-              <span *ngIf="!currentUser.displayName" class="mr-1 user-name text-bold-700">John Doe</span>
+              <span
+                *ngIf="currentUser.displayName"
+                class="mr-1 user-name text-bold-700"
+                style="color: #ffffff"
+                >{{ currentUser.displayName }}</span
+              >
+              <span
+                *ngIf="!currentUser.displayName"
+                class="mr-1 user-name text-bold-700"
+                >John Doe</span
+              >
               <span class="avatar avatar-online">
-                <img *ngIf="currentUser.photoURL" src="{{currentUser.photoURL}}" alt="avatar">
-                <img *ngIf="!currentUser.photoURL" src="../../../assets/images/portrait/small/avatar-s-19.png"
-                  alt="avatar">
+                <img
+                  *ngIf="currentUser.photoURL"
+                  src="{{ currentUser.photoURL }}"
+                  alt="avatar"
+                />
+                <img
+                  *ngIf="!currentUser.photoURL"
+                  src="../../../assets/images/portrait/small/avatar-s-19.png"
+                  alt="avatar"
+                />
                 <i></i>
               </span>
             </a>
-            <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownProfileMenu">
-              <a class="dropdown-item" [routerLink]="['/user/user-profile']"><i class="feather ft-user"></i> Edit
-                Profile </a>
-              <a class="dropdown-item" [routerLink]="['/email']"><i class="feather ft-mail"></i> My Inbox </a>
-              <a class="dropdown-item" [routerLink]="['/todos']"><i class="feather ft-check-square"></i> Task </a>
-              <a class="dropdown-item" [routerLink]="['/chats']"><i class="feather ft-message-square"></i> Chats </a>
+            <div
+              ngbDropdownMenu
+              class="dropdown-menu dropdown-menu-right"
+              aria-labelledby="dropdownProfileMenu"
+            >
+              <a class="dropdown-item" [routerLink]="['/user/user-profile']"
+                ><i class="feather ft-user"></i> Edit Profile
+              </a>
+              <a class="dropdown-item" [routerLink]="['/email']"
+                ><i class="feather ft-mail"></i> My Inbox
+              </a>
+              <a class="dropdown-item" [routerLink]="['/todos']"
+                ><i class="feather ft-check-square"></i> Task
+              </a>
+              <a class="dropdown-item" [routerLink]="['/chats']"
+                ><i class="feather ft-message-square"></i> Chats
+              </a>
               <div class="dropdown-divider"></div>
-              <a class="dropdown-item" [routerLink]="" (click)="logout()"><i class="feather ft-power"></i> Logout</a>
+              <a class="dropdown-item" [routerLink]="" (click)="logout()"
+                ><i class="feather ft-power"></i> Logout</a
+              >
             </div>
           </li>
         </ul>
diff --git a/src/app/_layout/navigation/verticalnav/verticalnav.component.css b/src/app/_layout/navigation/verticalnav/verticalnav.component.css
index e69de29..bce29d4 100644
--- a/src/app/_layout/navigation/verticalnav/verticalnav.component.css
+++ b/src/app/_layout/navigation/verticalnav/verticalnav.component.css
@@ -0,0 +1,23 @@
+.menu-item {
+    position: relative;
+}
+
+.menu-item.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 5px;
+    background-color: green;
+}
+
+.active-link::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background-color: green;
+}
diff --git a/src/app/_layout/navigation/verticalnav/verticalnav.component.html b/src/app/_layout/navigation/verticalnav/verticalnav.component.html
index dd766f6..811ddd6 100644
--- a/src/app/_layout/navigation/verticalnav/verticalnav.component.html
+++ b/src/app/_layout/navigation/verticalnav/verticalnav.component.html
@@ -1,8 +1,8 @@
 <div (mouseenter)="mouseEnter($event)" (mouseleave)="mouseLeave($event)" id="main-menu"
-	class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true">
+	class="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true" style="background-color: #252525 !important;">
 	<div id="main-menu-content" class="main-menu-content ps-container ps-theme-light" fxFlex="auto"
-		[perfectScrollbar]="config">
-		<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
+		[perfectScrollbar]="config" >
+		<ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation" style="background-color: #252525 !important;">
 			<!-- Menu -->
 			{{child?child.title:''}}
 			<li *ngFor="let child of _menuSettingsConfig.vertical_menu.items" class="" [ngClass]="{
@@ -13,7 +13,7 @@
             'active': child.isSelected && !child.submenu,
             'menu-collapsed-open': child.isSelected && child.submenu,
             'hover': child.hover
-          }">
+          }" >
 				<!-- Section -->
 				<span class="menu-title" *ngIf="child.section">{{child.section}}</span>
 				<i class="la" *ngIf="child.section" [ngClass]="child.icon" data-toggle="tooltip" data-placement="right"
@@ -21,7 +21,8 @@
 
 				<!-- Root Menu -->
 				<a *ngIf="child.title && !child.submenu && !child.excludeInVertical && !child.isExternalLink && !child.issupportExternalLink && !child.isStarterkitExternalLink"
-					routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)">
+					routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)"
+					style="background-color: #252525 !important;">
 					<i class="la" [ngClass]="child.icon"></i>
 					<span class="menu-title" data-i18n="">{{child.title}}</span>
 					<span *ngIf="child.badge" class="badge badge-pill float-right"
@@ -29,6 +30,7 @@
 						{{child.badge.value}}
 					</span>
 				</a>
+				
 				<a *ngIf="child.title && !child.submenu && !child.excludeInVertical && child.isExternalLink"
           [href]="child.page"  target="_blank" (click)="toggleMenu($event, child)">
 					<i class="la" [ngClass]="child.icon"></i>
@@ -51,7 +53,7 @@
 
 				<!-- Submenu -->
 				<a *ngIf="child.title && child.submenu && !child.excludeInVertical"
-					routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)">
+					routerLink="{{child.page !== 'null'?child.page:router.url}}" (click)="toggleMenu($event, child)" style="background-color: #252525 !important;">
 					<i class="la" [ngClass]="child.icon"></i>
 					<span class="menu-title" data-i18n="">{{child.title}}</span>
 					<span *ngIf="child.badge" class="badge badge-pill float-right"
@@ -59,12 +61,15 @@
 						{{child.badge.value}}
 					</span>
 				</a>
-				<ul *ngIf="child.submenu" class="menu-content" [@popOverState]="child.isOpen">
+				<ul *ngIf="child.submenu" class="menu-content" [@popOverState]="child.isOpen" style="background-color: #252525 !important;">
           <!-- Submenu of Submenu -->
 					<li *ngFor="let subchild of child.submenu.items" class="isShown"
 						[ngClass]="{'has-sub':(subchild.submenu),'active': subchild.isSelected && !subchild.submenu, 'open': subchild.isOpen && subchild.submenu}">
-						<a class="menu-item" *ngIf="!subchild.submenu && !subchild.excludeInVertical" (click)="toggleMenu($event, subchild, true)"
-							routerLink="{{subchild.page !== 'null'?subchild.page:router.url}}">{{subchild.title}}</a>
+						<a class="menu-item" *ngIf="!subchild.submenu && !subchild.excludeInVertical"
+                (click)="toggleMenu($event, subchild, true)" 
+                routerLink="{{subchild.page !== 'null'?subchild.page:router.url}}" 
+                [ngClass]="{'active': subchild.isSelected}" 
+                style="background-color: #252525 !important;">{{subchild.title}}</a>
 						<a class="menu-item" *ngIf="subchild.submenu && !subchild.excludeInVertical" (click)="toggleMenu($event, subchild, true)"
 							routerLink="{{subchild.page !== 'null'?subchild.page:router.url}}">{{subchild.title}}</a>
 						<ul *ngIf="subchild.submenu && !subchild.excludeInVertical" class="menu-content">
diff --git a/src/app/_layout/navigation/verticalnav/verticalnav.component.ts b/src/app/_layout/navigation/verticalnav/verticalnav.component.ts
index 02edc99..dd2583a 100644
--- a/src/app/_layout/navigation/verticalnav/verticalnav.component.ts
+++ b/src/app/_layout/navigation/verticalnav/verticalnav.component.ts
@@ -384,6 +384,7 @@ export class VerticalnavComponent implements OnInit {
     } else if ( child.page === '/chats' && this.loggedInUser.email !== 'john@pixinvent.com') {
       this.router.navigate(['/chats']);
     }
-   
   }
+
+  
 }
diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.css b/src/app/content/hemat-app/cost-management/cost-management.component.css
index 6d44dfa..e167e44 100644
--- a/src/app/content/hemat-app/cost-management/cost-management.component.css
+++ b/src/app/content/hemat-app/cost-management/cost-management.component.css
@@ -61,29 +61,36 @@
 }
 
  /* table */
- :host ::ng-deep .ngx-datatable.bootstrap .datatable-header .datatable-header-cell .datatable-header-cell-label {
+ :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;
+  color: #6b6f82;
 }
-:host ::ng-deep .ngx-datatable .datatable-row-center, .ngx-datatable .datatable-row-group, .ngx-datatable .datatable-row-right {
+: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-family: "icofont";
   font-style: normal;
 }
 
 :host ::ng-deep .datatable-icon-skip:before {
-  font-family: 'icofont';
+  font-family: "icofont";
   font-style: normal;
 }
 
 :host ::ng-deep .datatable-icon-left:before {
-  font-family: 'icofont';
+  font-family: "icofont";
   font-style: normal;
 }
 
@@ -107,39 +114,79 @@
   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 {
+: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 {
+: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 {
+: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 {
+: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] {
+: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;
@@ -160,67 +207,140 @@
   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] {
+: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] {
+: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] {
+: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] {
+: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] {
+: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 {
+: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;
+: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: #252525;
   font-weight: bold;
   color: white;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-  background: #727e8e;
+  background: #252525;
   color: #ededed;
   margin-top: -1px;
   overflow: inherit;
@@ -229,7 +349,7 @@
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
   font-weight: bold;
   height: unset !important;
-  overflow: inherit
+  overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
@@ -240,14 +360,30 @@
   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
+  .datatable-footer
+  .selected-count
+  .datatable-pager {
+  flex: 0 0 0%;
 }
 
 :host ::ng-deep .ngx-datatable {
-display: -webkit-box;
+  display: -webkit-box;
+}
+
+:host ::ng-deep .ng-select .ng-select-container {
+  color: #ffffff !important;
+  background-color: #252525 !important;
+  height: 40px !important;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
+  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
+  background-color: #1a1a1a; /* Darker black for hover effect */
 }
 
diff --git a/src/app/content/hemat-app/cost-management/cost-management.component.html b/src/app/content/hemat-app/cost-management/cost-management.component.html
index fe19f82..51a28cb 100644
--- a/src/app/content/hemat-app/cost-management/cost-management.component.html
+++ b/src/app/content/hemat-app/cost-management/cost-management.component.html
@@ -1,4 +1,4 @@
-<div class="app-content content">
+<div class="app-content content" style="background-color: #000000 !important">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -113,263 +113,296 @@
             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-3">
-                    <div class="form-group">
-                      <ng-select
-                        [items]="dataBuildingList"
-                        [searchable]="true"
-                        bindLabel="name"
-                        bindValue="id"
-                        placeholder="Select Building"
-                        [(ngModel)]="buildingSelected"
-                      >
-                      </ng-select>
-                    </div>
-                  </div>
-                  <div class="col-3">
-                    <div class="form-group">
-                      <input
-                        type="month"
-                        class="form-control"
-                        [(ngModel)]="dateSelected"
-                        id="month12"
-                        (focus)="focusElement('month12')"
-                      />
-                    </div>
-                  </div>
-                  <div class="col-3">
-                    <div class="form-group">
-                      <ng-select
-                        [items]="dataMasterCategori"
-                        [searchable]="true"
-                        bindLabel="name"
-                        bindValue="id"
-                        placeholder="Select Category"
-                        [(ngModel)]="categorySelected"
-                      >
-                      </ng-select>
-                    </div>
-                  </div>
-
-                  <div class="col-3">
-                    <div class="d-flex">
-                      <input
-                        type="text"
-                        class="form-control"
-                        placeholder="Search..."
-                        [(ngModel)]="searchTerm"
-                      />
-
-                      <button
-                        type="button"
-                        class="btn btn-outline-success ml-2"
-                        (click)="doFilter()"
-                        [disabled]="spinnerFilterActive"
-                      >
-                        <i class="la la-search" *ngIf="!spinnerFilterActive"></i>
-                        <i class="la la-spinner spinner" *ngIf="spinnerFilterActive"></i>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="row mb-2">
-                  <div class="col-4">
-                    <div class="form-group">
-                      <input
-                        type="text"
-                        class="form-control"
-                        placeholder="Kwh"
-                        [(ngModel)]="kwhTerm"
-                        disabled
-                      />
-                    </div>
-                  </div>
-                  <div class="col-4">
-                    <div class="form-group">
-                      <input
-                        type="text"
-                        class="form-control"
-                        placeholder="Cost"
-                        [(ngModel)]="costTerm"
-                        disabled
-                      />
-                    </div>
-                  </div>
-
-                  <div class="col-4">
-                    <div class="d-flex justify-content-end">
-                      <button
-                        class="btn btn-secondary mr-2"
-                        style="width: 100%"
-                        (click)="syncData()"
-                      >
-                        <i
-                          class="la la-spinner spinner"
-                          *ngIf="spinnerActive"
-                        ></i>
-                        <i class="la la-spinner" *ngIf="!spinnerActive"></i
-                        >&nbsp;
-                        <span>Syncing Data</span>
-                      </button>
-                      <button
-                        class="btn btn-secondary"
-                        style="width: 100%"
-                        (click)="addFieldValue()"
-                      >
-                        <i class="feather ft-plus"></i
-                        >&nbsp;
-                        <span>Add Actual Cost</span>
-                      </button>
-                    </div>
-                  </div>
-                </div>
-
-                <div class="card-dashboard">
-                  <ngx-datatable
-                    class="bootstrap table-bordered"
-                    [limit]="5"
-                    [rows]="data_cost"
-                    [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="building"
-                      [flexGrow]="1"
-                      [minWidth]="90"
-                    >
-                      <ng-template ngx-datatable-header-template>
-                        <span>Building</span>
-                      </ng-template>
-                      <ng-template
-                        let-value="value"
-                        ngx-datatable-cell-template
-                      >
-                        {{ value }}
-                      </ng-template>
-                    </ngx-datatable-column>
-                    <ngx-datatable-column
-                      name="categoryName"
-                      [flexGrow]="1"
-                      [minWidth]="90"
-                    >
-                      <ng-template ngx-datatable-header-template>
-                        <span>Category</span>
-                      </ng-template>
-                      <ng-template
-                        let-value="value"
-                        ngx-datatable-cell-template
-                      >
-                        {{ value }}
-                      </ng-template>
-                    </ngx-datatable-column>
-                    <ngx-datatable-column
-                      name="estimationCost"
-                      [flexGrow]="1"
-                      [minWidth]="90"
-                    >
-                      <ng-template ngx-datatable-header-template>
-                        <span>Estimation Cost</span>
-                      </ng-template>
-                      <ng-template
-                        let-value="value"
-                        ngx-datatable-cell-template
-                      >
-                        {{
-                          value.toLocaleString("id-ID", {
-                            style: "currency",
-                            currency: "IDR"
-                          })
-                        }}
-                      </ng-template>
-                    </ngx-datatable-column>
-                    <ngx-datatable-column
-                      name="totalUse"
-                      [flexGrow]="1"
-                      [minWidth]="90"
-                    >
-                      <ng-template ngx-datatable-header-template>
-                        <span>Total Use</span>
-                      </ng-template>
-                      <ng-template
-                        let-value="value"
-                        ngx-datatable-cell-template
-                      >
-                        {{ value }} kWh
-                      </ng-template>
-                    </ngx-datatable-column>
-                    <ngx-datatable-column
-                      name="endDate"
-                      [flexGrow]="1"
-                      [minWidth]="90"
-                    >
-                      <ng-template ngx-datatable-header-template>
-                        <span>Tanggal</span>
-                      </ng-template>
-                      <ng-template
-                        let-value="value"
-                        ngx-datatable-cell-template
-                      >
-                        {{ value | date : "MM/yyyy" }}
-                      </ng-template>
-                    </ngx-datatable-column>
-                    <ngx-datatable-column
-                      name="status_id"
-                      [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)="viewRow(row)"
+            <div class="card" style="background-color: #252525 !important">
+              <div class="card-content">
+                <div class="card-body">
+                  <div class="row">
+                    <div class="col-3">
+                      <div class="form-group">
+                        <ng-select
+                          [items]="dataBuildingList"
+                          [searchable]="true"
+                          bindLabel="name"
+                          bindValue="id"
+                          placeholder="Select Building"
+                          [(ngModel)]="buildingSelected"
                         >
-                          <i class="ficon feather ft-eye"></i>
+                        </ng-select>
+                      </div>
+                    </div>
+                    <div class="col-3">
+                      <div class="form-group">
+                        <input
+                          type="month"
+                          class="form-control"
+                          [(ngModel)]="dateSelected"
+                          id="month12"
+                          (focus)="focusElement('month12')"
+                        />
+                      </div>
+                    </div>
+
+                    <div class="col-3">
+                      <div class="form-group">
+                        <ng-select
+                          [items]="dataMasterCategori"
+                          [searchable]="true"
+                          bindLabel="name"
+                          bindValue="id"
+                          placeholder="Select Building"
+                          [(ngModel)]="categorySelected"
+                        >
+                        </ng-select>
+                      </div>
+                    </div>
+
+                    <div class="col-3">
+                      <div class="d-flex">
+                        <!-- <input
+                          type="text"
+                          class="form-control"
+                          placeholder="Search..."
+                          [(ngModel)]="searchTerm"
+                        /> -->
+
+                        <button
+                          type="button"
+                          class="btn btn-outline-success ml-2"
+                          (click)="doFilter()"
+                          style="background-color: #252525 !important; border-color: #BEF264 !important;"
+                          [disabled]="spinnerFilterActive"
+                        >
+                          <i
+                            class="la la-search"
+                            style="color: #ffffff !important;"
+                            *ngIf="!spinnerFilterActive"
+                          ></i>
+                          <i
+                            class="la la-spinner spinner"
+                            style="color: #ffffff !important;"
+                            *ngIf="spinnerFilterActive"
+                          ></i>
                         </button>
-                      </ng-template>
-                    </ngx-datatable-column>
-                  </ngx-datatable>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="row mb-2">
+                    <div class="col-4">
+                      <div class="form-group">
+                        <input
+                          type="text"
+                          class="form-control"
+                          placeholder="Kwh"
+                          [(ngModel)]="kwhTerm"
+                          disabled
+                        />
+                      </div>
+                    </div>
+                    <div class="col-4">
+                      <div class="form-group">
+                        <input
+                          type="text"
+                          class="form-control"
+                          placeholder="Cost"
+                          [(ngModel)]="costTerm"
+                          disabled
+                        />
+                      </div>
+                    </div>
+
+                    <div class="col-4">
+                      <div class="d-flex justify-content-end">
+                        <button
+                          class="btn btn-secondary mr-2"
+                          style="
+                            width: 100%;
+                            background-color: #bef264 !important;
+                            border-color: #bef264 !important;
+                            color: #000000 !important;
+                          "
+                          (click)="syncData()"
+                        >
+                          <i
+                            class="la la-spinner spinner"
+                            *ngIf="spinnerActive"
+                          ></i>
+                          <i class="la la-spinner" *ngIf="!spinnerActive"></i
+                          >&nbsp;
+                          <span>Syncing Data</span>
+                        </button>
+                        <button
+                          class="btn btn-secondary"
+                          style="
+                            width: 100%;
+                            background-color: #bef264 !important;
+                            border-color: #bef264 !important;
+                            color: #000000 !important;
+                          "
+                          (click)="addFieldValue()"
+                        >
+                          <i class="feather ft-plus"></i>&nbsp;
+                          <span>Add Actual Cost</span>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="5"
+                      [rows]="data_cost"
+                      [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="building"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important"
+                            >Building</span
+                          >
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          <p style="color: #ffffff !important">{{ value }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="categoryName"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important"
+                            >Category</span
+                          >
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          <p style="color: #ffffff !important">{{ value }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="estimationCost"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important"
+                            >Estimation Cost</span
+                          >
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          
+                          <p style="color: #ffffff !important">{{
+                            value.toLocaleString("id-ID", {
+                              style: "currency",
+                              currency: "IDR"
+                            })
+                          }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="totalUse"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important"
+                            >Total Use</span
+                          >
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                        <p style="color: #ffffff !important">{{ value }}</p> kWh
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="endDate"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important">Tanggal</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                        <p style="color: #ffffff !important">{{ value | date : "MM/yyyy" }}</p> 
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="status_id"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important">Status</span>
+                        </ng-template>
+                        <ng-template
+                          ngx-datatable-cell-template
+                          let-value="value"
+                        >
+                        <p style="color: #ffffff !important">{{ value === 2 ? "Aktif" : "Tidak Aktif" }}</p> 
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="Actions"
+                        [flexGrow]="1"
+                        [minWidth]="150"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important">Actions</span>
+                        </ng-template>
+                        <ng-template
+                          ngx-datatable-cell-template
+                          let-rowIndex="rowIndex"
+                          let-row="row"
+                        >
+                          <button
+                            class="btn btn-sm btn-warning mr-1"
+                            style="background-color: #000000 !important; border-color: #BEF264 !important;"
+                            (click)="viewRow(row)"
+                          >
+                            <i class="ficon feather ft-eye"></i>
+                          </button>
+                        </ng-template>
+                      </ngx-datatable-column>
+                    </ngx-datatable>
+                  </div>
                 </div>
-              </ng-container>
-            </m-card>
+              </div>
+            </div>
           </div>
         </div>
       </section>
diff --git a/src/app/content/hemat-app/device/device-control/device-control.component.css b/src/app/content/hemat-app/device/device-control/device-control.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/content/hemat-app/device/device-control/device-control.component.html b/src/app/content/hemat-app/device/device-control/device-control.component.html
new file mode 100644
index 0000000..97ead01
--- /dev/null
+++ b/src/app/content/hemat-app/device/device-control/device-control.component.html
@@ -0,0 +1 @@
+<p>device-control works!</p>
diff --git a/src/app/content/hemat-app/device/device-control/device-control.component.spec.ts b/src/app/content/hemat-app/device/device-control/device-control.component.spec.ts
new file mode 100644
index 0000000..0dd56da
--- /dev/null
+++ b/src/app/content/hemat-app/device/device-control/device-control.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeviceControlComponent } from './device-control.component';
+
+describe('DeviceControlComponent', () => {
+  let component: DeviceControlComponent;
+  let fixture: ComponentFixture<DeviceControlComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DeviceControlComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeviceControlComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/content/hemat-app/device/device-control/device-control.component.ts b/src/app/content/hemat-app/device/device-control/device-control.component.ts
new file mode 100644
index 0000000..2873629
--- /dev/null
+++ b/src/app/content/hemat-app/device/device-control/device-control.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-device-control',
+  templateUrl: './device-control.component.html',
+  styleUrls: ['./device-control.component.css']
+})
+export class DeviceControlComponent {
+
+}
diff --git a/src/app/content/hemat-app/device/device.component.css b/src/app/content/hemat-app/device/device.component.css
index bd893c0..2b78be7 100644
--- a/src/app/content/hemat-app/device/device.component.css
+++ b/src/app/content/hemat-app/device/device.component.css
@@ -1,190 +1,324 @@
-: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.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 .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;
+  font-family: "icofont";
+  font-style: normal;
 }
 
 :host ::ng-deep .datatable-icon-skip:before {
-    font-family: 'icofont';
-    font-style: normal;
+  font-family: "icofont";
+  font-style: normal;
 }
 
 :host ::ng-deep .datatable-icon-left:before {
-    font-family: 'icofont';
-    font-style: normal;
+  font-family: "icofont";
+  font-style: normal;
 }
 
 :host ::ng-deep .datatable-icon-left:before {
-    content: "\2039";
-    font-size: x-large;
+  content: "\2039";
+  font-size: x-large;
 }
 
 :host ::ng-deep .datatable-icon-prev:before {
-    content: "\00AB";
-    font-size: x-large;
+  content: "\00AB";
+  font-size: x-large;
 }
 
 :host ::ng-deep .datatable-icon-right:before {
-    content: "\203A";
-    font-size: x-large;
+  content: "\203A";
+  font-size: x-large;
 }
 
 :host ::ng-deep .datatable-icon-skip:before {
-    content: "\00BB";
-    font-size: x-large;
+  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-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-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-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
+  .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
+  .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;
+  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: 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-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-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-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
+  .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):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
+  .datatable-pager
+  ul
+  li:not(.disabled).active
+  a,
+.ngx-datatable.bootstrap
+  .datatable-footer
+  .datatable-pager
+  ul
+  li:not(.disabled):hover
+  a {
+  background-color: #252525;
+  font-weight: bold;
+  color: white;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
-    background: #727e8e;
-    color: #ededed;
-    margin-top: -1px;
-    overflow: inherit;
+  background: #252525;
+  color: #ededed;
+  margin-top: -1px;
+  overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
-    font-weight: bold;
-    height: unset !important;
-    overflow: inherit
+  font-weight: bold;
+  height: unset !important;
+  overflow: inherit;
 }
 
 :host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
-    flex: 0 0 0%;
+  flex: 0 0 0%;
 }
 
 :host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
-    display: flex;
+  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
+  .datatable-footer
+  .selected-count
+  .datatable-pager {
+  flex: 0 0 0%;
 }
 
 :host ::ng-deep .ngx-datatable {
   display: -webkit-box;
 }
 
+:host ::ng-deep .ng-select .ng-select-container {
+  color: #ffffff !important;
+  background-color: #252525 !important;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
+  background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
+  background-color: #1a1a1a; /* Darker black for hover effect */
+}
diff --git a/src/app/content/hemat-app/device/device.component.html b/src/app/content/hemat-app/device/device.component.html
index 2ceb3db..486d16f 100644
--- a/src/app/content/hemat-app/device/device.component.html
+++ b/src/app/content/hemat-app/device/device.component.html
@@ -1,4 +1,4 @@
-<div class="app-content content">
+<div class="app-content content" style="background-color: #000000 !important">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -7,13 +7,20 @@
       <section id="configuration">
         <div class="row">
           <div class="col-lg-4 col-12">
-            <div class="card pull-up">
+            <div
+              class="card pull-up"
+              style="background-color: #252525 !important"
+            >
               <div class="card-content">
                 <div class="card-body">
                   <div class="media d-flex">
                     <div class="media-body text-left">
-                      <h6 class="text-muted">Total Device</h6>
-                      <h3>{{filteredRows.length}}</h3>
+                      <h6 class="text-muted" style="color: #ffffff !important">
+                        Total Device
+                      </h6>
+                      <h3 style="color: #ffffff !important">
+                        {{ filteredRows.length }}
+                      </h3>
                     </div>
                     <div class="align-self-center">
                       <i
@@ -26,13 +33,18 @@
             </div>
           </div>
           <div class="col-lg-4 col-12">
-            <div class="card pull-up">
+            <div
+              class="card pull-up"
+              style="background-color: #252525 !important"
+            >
               <div class="card-content">
                 <div class="card-body">
                   <div class="media d-flex">
                     <div class="media-body text-left">
-                      <h6 class="text-muted">Total Device Aktive</h6>
-                      <h3>{{totalOn}}</h3>
+                      <h6 class="text-light" style="color: #ffffff !important">
+                        Total Device Aktive
+                      </h6>
+                      <h3 style="color: #ffffff !important">{{ totalOn }}</h3>
                     </div>
                     <div class="align-self-center">
                       <i
@@ -45,13 +57,18 @@
             </div>
           </div>
           <div class="col-lg-4 col-12">
-            <div class="card pull-up">
+            <div
+              class="card pull-up"
+              style="background-color: #252525 !important"
+            >
               <div class="card-content">
                 <div class="card-body">
                   <div class="media d-flex">
                     <div class="media-body text-left">
-                      <h6 class="text-muted">Total Device Non-Active</h6>
-                      <h3>{{totalOff}}</h3>
+                      <h6 class="text-muted" style="color: #ffffff !important">
+                        Total Device Non-Active
+                      </h6>
+                      <h3 style="color: #ffffff !important">{{ totalOff }}</h3>
                     </div>
                     <div class="align-self-center">
                       <i
@@ -70,246 +87,260 @@
         <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-2">
-                    <div class="form-group">
-                      <ng-select
-                        [items]="singleSelectArray"
-                        [searchable]="true"
-                        bindLabel="item_text"
-                        placeholder="Select Building"
-                        [(ngModel)]="singlebasicSelected"
-                      >
-                      </ng-select>
-                    </div>
-                  </div>
-                  <div class="col-2">
-                    <div class="form-group">
-                      <ng-select
-                        [items]="singleSelectArray"
-                        [searchable]="true"
-                        bindLabel="item_text"
-                        placeholder="Select Type"
-                        [(ngModel)]="singlebasicSelected"
-                      >
-                      </ng-select>
-                    </div>
-                  </div>
-                  <div class="col-2">
-                    <div class="form-group">
-                      <ng-select
-                        [items]="singleSelectArray"
-                        [searchable]="true"
-                        bindLabel="item_text"
-                        placeholder="Select Category"
-                        [(ngModel)]="singlebasicSelected"
-                      >
-                      </ng-select>
-                    </div>
-                  </div>
-
-                  <div class="col-2">
-                    <div class="form-group">
-                      <input
-                        type="text"
-                        class="form-control"
-                        placeholder="Search..."
-                        [(ngModel)]="searchTerm"
-                        (input)="filterRows()"
-                      />
-                    </div>
-                  </div>
-
-                  <div class="col-2 text-left">
-                    <button type="button" class="btn btn-outline-success mr-1">
-                      <i class="la la-search"></i>
-                    </button>
-                  </div>
-
-                  <div class="col-2 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="categoryEntity"
-                      [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.name }}
-                      </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="typeEntity"
-                      [flexGrow]="1"
-                      [minWidth]="90"
-                    >
-                      <ng-template ngx-datatable-header-template>
-                        <span>Type</span>
-                      </ng-template>
-                      <ng-template
-                        ngx-datatable-cell-template
-                        let-value="value"
-                      >
-                        {{ value.name }}
-                      </ng-template>
-                    </ngx-datatable-column>
-                    <ngx-datatable-column
-                      name="voltageEntity"
-                      [flexGrow]="1"
-                      [minWidth]="90"
-                    >
-                      <ng-template ngx-datatable-header-template>
-                        <span>Voltage</span>
-                      </ng-template>
-                      <ng-template
-                        ngx-datatable-cell-template
-                        let-value="value"
-                      >
-                        {{ value.name }}
-                      </ng-template>
-                    </ngx-datatable-column>
-                    <ngx-datatable-column
-                      name="statusEntity"
-                      [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.name }}
-                      </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)"
+            <div class="card" style="background-color: #252525 !important">
+              <div class="card-content">
+                <div class="card-body">
+                  <div class="row mb-2">
+                    <div class="col-2">
+                      <div class="form-group">
+                        <ng-select
+                          [items]="singleSelectArray"
+                          [searchable]="true"
+                          bindLabel="item_text"
+                          placeholder="Select Building"
+                          [(ngModel)]="singlebasicSelected"
                         >
-                          <i class="ficon feather ft-eye"></i>
-                        </button>
-                        <button
-                          class="btn btn-sm btn-warning mr-1"
-                          (click)="editRow(row)"
+                        </ng-select>
+                      </div>
+                    </div>
+                    <div class="col-2">
+                      <div class="form-group">
+                        <ng-select
+                          [items]="singleSelectArray"
+                          [searchable]="true"
+                          bindLabel="item_text"
+                          placeholder="Select Type"
+                          [(ngModel)]="singlebasicSelected"
                         >
-                          <i class="ficon feather ft-edit"></i>
-                        </button>
-                        <!-- <button
+                        </ng-select>
+                      </div>
+                    </div>
+                    <div class="col-2">
+                      <div class="form-group">
+                        <ng-select
+                          [items]="singleSelectArray"
+                          [searchable]="true"
+                          bindLabel="item_text"
+                          placeholder="Select Category"
+                          [(ngModel)]="singlebasicSelected"
+                        >
+                        </ng-select>
+                      </div>
+                    </div>
+
+                    <div class="col-2">
+                      <div class="form-group">
+                        <input
+                          type="text"
+                          class="form-control"
+                          placeholder="Search..."
+                          [(ngModel)]="searchTerm"
+                          (input)="filterRows()"
+                        />
+                      </div>
+                    </div>
+
+                    <div class="col-2 text-left">
+                      <button
+                        type="button"
+                        class="btn btn-success mr-1"
+                        style="background-color: #252525 !important; border-color: #BEF264 !important;"
+                      >
+                        <i class="la la-search" style="color: #ffffff !important;"></i>
+                      </button>
+                    </div>
+
+                    <div class="col-2 text-right">
+                      <button
+                        class="btn btn-secondary"
+                        [disabled]="spinnerActive"
+                        (click)="addDevice()"
+                        style="background-color: #BEF264 !important; border-color: #BEF264 !important; color: #000000 !important;"
+                      >
+                        <i
+                          class="la la-spinner spinner"
+                          *ngIf="spinnerActive"
+                        ></i>
+                        <i class="feather ft-plus" *ngIf="!spinnerActive"></i
+                        >&nbsp;
+                        <span style="font-weight: 600;">Synchronization</span>
+                      </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="icon"
+                        [flexGrow]="1"
+                        [minWidth]="140"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important">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 style="color: #ffffff !important"
+                            >Device Name</span
+                          >
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          <p style="color: #ffffff !important">{{ value }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="categoryEntity"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important"
+                            >Category</span
+                          >
+                        </ng-template>
+                        <ng-template
+                          ngx-datatable-cell-template
+                          let-value="value"
+                        >
+                          <p style="color: #ffffff !important">{{ value.name }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="watt"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important">Watt</span>
+                        </ng-template>
+                        <ng-template
+                          ngx-datatable-cell-template
+                          let-value="value"
+                        >
+                        <p style="color: #ffffff !important">{{ value }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="typeEntity"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important">Type</span>
+                        </ng-template>
+                        <ng-template
+                          ngx-datatable-cell-template
+                          let-value="value"
+                        >
+                        <p style="color: #ffffff !important">{{ value.name }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="voltageEntity"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important">Voltage</span>
+                        </ng-template>
+                        <ng-template
+                          ngx-datatable-cell-template
+                          let-value="value"
+                        >
+                        <p style="color: #ffffff !important">{{ value.name }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="statusEntity"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important">Status</span>
+                        </ng-template>
+                        <ng-template
+                          ngx-datatable-cell-template
+                          let-value="value"
+                        >
+                        <p style="color: #ffffff !important">{{ value.name }}</p>
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="Actions"
+                        [flexGrow]="1"
+                        [minWidth]="150"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span style="color: #ffffff !important">Actions</span>
+                        </ng-template>
+                        <ng-template
+                          ngx-datatable-cell-template
+                          let-rowIndex="rowIndex"
+                          let-row="row"
+                        >
+                          <button
+                            class="btn btn-sm btn-info mr-1"
+                            style="background-color: #000000 !important; border-color: #BEF264 !important;"
+                            (click)="viewRow(row)"
+                          >
+                            <i class="ficon feather ft-eye" style="color: #BEF264 !important;"></i>
+                          </button>
+                          <button
+                            class="btn btn-sm btn-warning mr-1"
+                            style="background-color: #000000 !important; border-color: #BEF264 !important;"
+                            (click)="editRow(row)"
+                          >
+                            <i class="ficon feather ft-edit" style="color: #BEF264 !important;"></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>
+                        </ng-template>
+                      </ngx-datatable-column>
+                    </ngx-datatable>
+                  </div>
                 </div>
-              </ng-container>
-            </m-card>
+              </div>
+            </div>
           </div>
         </div>
       </section>
diff --git a/src/app/content/hemat-app/device/device.module.ts b/src/app/content/hemat-app/device/device.module.ts
index c0fb3e4..254a26f 100644
--- a/src/app/content/hemat-app/device/device.module.ts
+++ b/src/app/content/hemat-app/device/device.module.ts
@@ -14,6 +14,7 @@ import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.
 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';
+import { DeviceControlComponent } from './device-control/device-control.component';
 
 
 
@@ -21,7 +22,8 @@ import { ModalAddEditComponent } from './modal-add-edit/modal-add-edit.component
   declarations: [
     DeviceComponent,
     AddEditDeviceComponent,
-    ModalAddEditComponent
+    ModalAddEditComponent,
+    DeviceControlComponent
   ],
   imports: [
     CommonModule,
diff --git a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
index e4619fa..fdf3057 100644
--- a/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
+++ b/src/app/content/hemat-app/list-monitoring/list-monitoring.component.html
@@ -12,7 +12,7 @@
             >
               <m-card>
                 <ng-container mCardHeaderTitle>
-                  Cost Management Table
+                  List Monitoring
                 </ng-container>
                 <ng-container mCardBody>
                   <div class="row mb-2">
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.css b/src/app/content/hemat-app/monitoring/building/building.component.css
index ab56d4f..ad59ed0 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.css
+++ b/src/app/content/hemat-app/monitoring/building/building.component.css
@@ -7,33 +7,13 @@
 }
 
 :host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
-  stroke: #01a32f;
-  stroke-width: 20px !important;
+  stroke: #BEF264;
+  stroke-width: 30px !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;
+  stroke: #ffffff;
+  stroke-width: 30px !important;
 }
 
 .btn-no-hover {
diff --git a/src/app/content/hemat-app/monitoring/building/building.component.html b/src/app/content/hemat-app/monitoring/building/building.component.html
index 9724f26..a6dc9f9 100644
--- a/src/app/content/hemat-app/monitoring/building/building.component.html
+++ b/src/app/content/hemat-app/monitoring/building/building.component.html
@@ -1,4 +1,4 @@
-<div class="app-content content">
+<div class="app-content content" style="background-color: #000000 !important;">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -21,35 +21,28 @@
             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="card" style="background-color: #252525 !important;">
+              <div class="card-header mb-2" style="background-color: #252525 !important;">
                 <div class="row">
                   <div class="col-12 text-center">
                     <h4
                       class="text-muted mb-1 font-weight-bold"
-                      style="font-family: Montserrat, sans-serif"
+                      style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
                     >
                       Building Name
                     </h4>
                     <h3
                       class="text-muted mb-0"
-                      style="font-family: Montserrat, sans-serif"
+                      style="font-family: Montserrat, sans-serif; color: #ffffff !important;"
                     >
                       {{ data.build_name ? data.build_name : data.name }}
                     </h3>
                   </div>
                 </div>
-                <hr style="border-top: 3px solid #100a0a" />
+                <hr style="border-top: 4px solid #ffffff; border-color: #ffffff !important;" />
               </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
-                  }"
-                >
+                <div class="donut-chart1">
                   <x-chartist
                     *ngIf="data"
                     [data]="data.donut"
@@ -71,11 +64,11 @@
                 >
                   <h3
                     class="display-4 blue-grey darken-1"
-                    style="font-size: 2em"
+                    style="font-size: 2em; color: #ffffff !important;"
                   >
                     {{ data.total }} kWh
                   </h3>
-                  <h6>Consumtion</h6>
+                  <h6 style="color: #ffffff !important;">Consumtion</h6>
                 </div>
 
                 <div class="form-group text-center">
@@ -83,8 +76,8 @@
                     type="button"
                     class="btn btn-primary round btn-min-width mr-1 mb-1"
                     (click)="viewRoom(data)"
-                    triggers="hover:click:hover"
                     ngbTooltip="Room"
+                    style="background-color: #ffffff !important; color: #000000;"
                   >
                     Room
                   </button>
@@ -92,8 +85,8 @@
                     type="button"
                     class="btn btn-success round btn-min-width mr-1 mb-1"
                     (click)="viewRow(data)"
-                    triggers="hover:click:hover"
                     ngbTooltip="Detail"
+                    style="background-color: #BEF264 !important; color: #000000;"
                   >
                     Detail
                   </button>
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.css b/src/app/content/hemat-app/monitoring/detail/detail.component.css
index 39d3165..1abb48c 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.css
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.css
@@ -55,14 +55,14 @@ canvas {
   stroke-width: 20px !important;
 }
 
-:host ::ng-deep .donut-chart2 {
+/* :host ::ng-deep .donut-chart2 {
 -webkit-filter: drop-shadow(0px 10px 11px rgba(187,187,187)) !important;
   filter: drop-shadow(0px 10px 11px rgba(187,187,187));
-}
+} */
 
 :host ::ng-deep .donut-chart2 .ct-label {
-  fill: #111010;
-  color: rgba(0, 0, 0, 0.4);
+  fill: #ffffff;
+  color: rgb(255, 255, 255);
   font-size: 1.75rem;
   line-height: 1;
 }
@@ -80,3 +80,7 @@ canvas {
 :host ::ng-deep .sp-line-total-cost .ct-point{
   stroke-width: 0px;
 }
+
+:host ::ng-deep .progress-bar {
+  background-color: #BEF264 !important;
+}
\ No newline at end of file
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.html b/src/app/content/hemat-app/monitoring/detail/detail.component.html
index d3d417f..4380feb 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.html
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html
@@ -1,4 +1,4 @@
-<div class="app-content content">
+<div class="app-content content" style="background-color: #000000 !important">
   <div class="content-wrapper">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
@@ -6,12 +6,12 @@
     <div class="content-body">
       <div class="row">
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card">
+          <div class="card" style="background-color: #252525 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h5>Electricity</h5>
+                    <h5 style="color: #ffffff">Electricity</h5>
                     <h3 class="danger">{{ topCard?.kwh_consumption }} Kwh</h3>
                   </div>
                   <div class="align-self-center">
@@ -23,12 +23,12 @@
           </div>
         </div>
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card">
+          <div class="card" style="background-color: #252525 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h5>Water</h5>
+                    <h5 style="color: #ffffff">Water</h5>
                     <h3 class="success">{{ topCard?.water_consumption }}</h3>
                   </div>
                   <div class="align-self-center">
@@ -42,12 +42,12 @@
           </div>
         </div>
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card">
+          <div class="card" style="background-color: #252525 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h5>Device</h5>
+                    <h5 style="color: #ffffff">Device</h5>
                     <h3 class="warning">{{ topCard?.total_device }}</h3>
                   </div>
                   <div class="align-self-center">
@@ -59,12 +59,12 @@
           </div>
         </div>
         <div class="col-xl-3 col-md-6 col-12">
-          <div class="card">
+          <div class="card" style="background-color: #252525 !important">
             <div class="card-content">
               <div class="card-body">
                 <div class="media d-flex">
                   <div class="media-body text-left">
-                    <h5>Room</h5>
+                    <h5 style="color: #ffffff">Room</h5>
                     <h3 class="info">{{ topCard?.total_room }}</h3>
                   </div>
                   <div class="align-self-center">
@@ -78,50 +78,61 @@
       </div>
       <div class="row">
         <div class="col-12">
-          <div class="card">
-            <section id="chartjs-bar-charts">
-              <div class="row">
-                <div class="col-12" *blockUI="'barCharts'; message: 'Loading'">
-                  <m-card [options]="options">
-                    <ng-container mCardHeaderTitle> </ng-container>
-                    <ng-container mCardBody>
-                      <div class="z" style="display: block">
-                        <canvas
-                          class="barchart"
-                          height="328"
-                          baseChart
-                          [datasets]="barChartData"
-                          [labels]="barChartLabels"
-                          [options]="barChartOptions"
-                          [legend]="barChartLegend"
-                          [chartType]="barChartType"
-                        >
-                        </canvas>
-                      </div>
-                    </ng-container>
-                  </m-card>
-                </div>
+          <div class="card" style="background-color: #252525 !important">
+            <div class="card-content">
+              <div class="card-body">
+                <canvas
+                  style="
+                    background-color: #252525 !important;
+                    border-color: #252525;
+                    color: #ffffff;
+                  "
+                  class="barchart"
+                  height="328"
+                  width="1900"
+                  baseChart
+                  [datasets]="barChartData"
+                  [labels]="barChartLabels"
+                  [options]="barChartOptions"
+                  [legend]="barChartLegend"
+                  chartType="bar"
+                >
+                </canvas>
               </div>
-            </section>
+            </div>
           </div>
         </div>
       </div>
       <div class="row">
         <div class="col-4">
-          <div class="card">
-            <div class="card-header">
-              <h4 class="card-title text-center">Summary Cost</h4>
+          <div class="card" style="background-color: #252525 !important">
+            <div
+              class="card-header"
+              style="background-color: #252525 !important"
+            >
+              <h4 class="card-title text-center" style="color: #ffffff">
+                Summary Cost
+              </h4>
+              <hr
+                style="
+                  border-top: 4px solid #ffffff;
+                  border-color: #ffffff !important;
+                "
+              />
             </div>
             <div class="card-body">
               <div class="card-block">
                 <div class="text-center" style="height: 150px !important">
-                  <h2 class="font-large-3 text-bold-400">
+                  <h2 class="font-large-3 text-bold-400" style="color: #ffffff">
                     {{
                       summaryCost?.summary_cost
                         | currency : "Rp " : "symbol" : "1.0-0"
                     }}
                   </h2>
-                  <p class="blue-grey lighten-2 mb-0 mt-2">
+                  <p
+                    class="blue-grey lighten-2 mb-0 mt-2"
+                    style="color: #ffffff !important"
+                  >
                     Based on the estimated costs you have
                   </p>
                 </div>
@@ -130,9 +141,20 @@
           </div>
         </div>
         <div class="col-4">
-          <div class="card">
-            <div class="card-header">
-              <h4 class="card-title text-center">Air Quality</h4>
+          <div class="card" style="background-color: #252525 !important">
+            <div
+              class="card-header"
+              style="background-color: #252525 !important"
+            >
+              <h4 class="card-title text-center" style="color: #ffffff">
+                Air Quality
+              </h4>
+              <hr
+                style="
+                  border-top: 4px solid #ffffff;
+                  border-color: #ffffff !important;
+                "
+              />
             </div>
             <div class="card-body">
               <div class="card-block">
@@ -158,7 +180,7 @@
                 >
                   <h3
                     class="display-4 blue-grey darken-1"
-                    style="font-size: 2em"
+                    style="font-size: 2em; color: #ffffff !important"
                   >
                     {{ airQuality }}
                   </h3>
@@ -168,9 +190,20 @@
           </div>
         </div>
         <div class="col-4">
-          <div class="card">
-            <div class="card-header">
-              <h4 class="card-title text-center">Temperature and Humidity</h4>
+          <div class="card" style="background-color: #252525 !important">
+            <div
+              class="card-header"
+              style="background-color: #252525 !important"
+            >
+              <h4 class="card-title text-center" style="color: #ffffff">
+                Temperature and Humidity
+              </h4>
+              <hr
+                style="
+                  border-top: 4px solid #ffffff;
+                  border-color: #ffffff !important;
+                "
+              />
             </div>
             <div class="card-body">
               <div class="card-block">
@@ -192,25 +225,33 @@
       </div>
       <div class="row">
         <div class="col-6" *ngFor="let item of deviceCategory?.usesd">
-          <div class="card overflow-hidden">
+          <div
+            class="card overflow-hidden"
+            style="background-color: #252525 !important"
+          >
             <div class="card-content">
               <div class="card-body cleartfix">
                 <div class="media align-items-stretch mb-2">
                   <div class="align-self-center">
                     <i
                       class="icon-bulb background-round info font-large-2 mr-2"
+                      style="
+                        color: #BFF264 !important;
+                        background-color: #252525 !important;
+                      "
                     ></i>
                   </div>
                   <div class="media-body">
-                    <p>
+                    <p style="color: #ffffff !important">
                       {{ item.category_device }}
-                      <span class="float-right text-bold-600"
+                      <span
+                        class="float-right text-bold-600"
+                        style="color: #ffffff"
                         >{{ item.value }}%</span
                       >
                     </p>
                     <ngb-progressbar
                       height="7px"
-                      type="danger"
                       [value]="item.value"
                     ></ngb-progressbar>
                   </div>
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
index b3c638b..54ff101 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -50,24 +50,24 @@ export class DetailComponent {
     {
       data: [],
       label: "KWH Consumption",
-      backgroundColor: "#00a5a8",
-      borderColor: "#00a5a8",
-      pointBackgroundColor: "#00a5a8",
-      pointBorderColor: "#00a5a8",
-      pointHoverBackgroundColor: "#fff",
-      pointHoverBorderColor: "#00a5a8",
+      backgroundColor: "#C3F164",
+      borderColor: "#C3F164",
+      pointBackgroundColor: "#C3F164",
+      pointBorderColor: "#C3F164",
+      pointHoverBackgroundColor: "#ffffff",
+      pointHoverBorderColor: "#C3F164",
       barPercentage: 0.5,
       categoryPercentage: 0.5,
     },
     {
       data: [],
       label: "Water Consumption",
-      backgroundColor: "#ff4081",
-      borderColor: "#ff4081",
-      pointBackgroundColor: "#ff4081",
-      pointBorderColor: "#ff4081",
-      pointHoverBackgroundColor: "#fff",
-      pointHoverBorderColor: "#ff4081",
+      backgroundColor: "#64CFF1",
+      borderColor: "#64CFF1",
+      pointBackgroundColor: "#64CFF1",
+      pointBorderColor: "#64CFF1",
+      pointHoverBackgroundColor: "#ffffff",
+      pointHoverBorderColor: "#64CFF1",
       barPercentage: 0.5,
       categoryPercentage: 0.5,
     },
@@ -76,9 +76,9 @@ export class DetailComponent {
       data: [],
       label: "Weekly Kwh Average",
       backgroundColor: "rgba(0,255,255,0)",
-      borderColor: "#1e9ff2",
+      borderColor: "#ffffff",
       fill: false,
-      pointBorderColor: "#1e9ff2",
+      pointBorderColor: "#ffffff",
       pointBackgroundColor: "#FFF",
       pointBorderWidth: 2,
       pointHoverBorderWidth: 2,
@@ -91,9 +91,9 @@ export class DetailComponent {
       data: [],
       label: "Weekly Water Average",
       backgroundColor: "rgba(0,255,255,0)",
-      borderColor: "#1e9ff2",
+      borderColor: "#ffffff",
       fill: false,
-      pointBorderColor: "#1e9ff2",
+      pointBorderColor: "#ffffff",
       pointBackgroundColor: "#FFF",
       pointBorderWidth: 2,
       pointHoverBorderWidth: 2,
diff --git a/src/assets/images/Smart-Building.png b/src/assets/images/Smart-Building.png
new file mode 100644
index 0000000000000000000000000000000000000000..76f7e45a3940f625842ca53a852bccecc21ae693
GIT binary patch
literal 2287
zcmV<L2oU#)P)<h;3K|Lk000e1NJLTq005f+001Be1^@s61#AjB00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH2!u&QK~#7F?OgqN
z8a)hG^5p-rL9P>ocLJ^xgiZjNAanxA1ds`iOb|K&mkFQ~+;sxz1bQtj#X8|5e6@K(
z_&txq`Ae2;*|N{N04N~hH3j&DaB|<fkcs^6x5e@M4Rvn0Oh=^+UFgFZak$R8abbo5
z3+hC8N4WMIG~jQP>Eb$OtN;zztv!*yV`xt|)ai4XjN?tk$4>2k23&EcOk7A@$X!^v
z(B$}gV(3EGg^Ml963=sfPQmj}X+L0leCN79VNYCKT+Cg65}l=cUcwm_T)A)qUa?Bo
zLEj`pW+wmAz~|rxu<OD~L0$PrHW?{b8@se8MT1O`R$QX-C<DQDiPnP)_e`hDb-G+e
zR@fgK25>ICbDJX<+Q7;tG+dcGBhzb|Lx=e+TzH8!;_6X;U;2xK&L_IJN>(l7Bg-fg
zq37EEt?Ef$gY%bL$o;WE9jKQ6`wjVp`4yA3;2>zJx>L@Zsd`hBPk7e#O&bM=>j-ZZ
zQ-|L44z+3H^c7+<M|i0<qlzypbG8NDg{eosGNCio51FDn#8WfJ81^1AxO&68ri>T{
zlpq`GsV>854fWjIFc5_cZ7O5ie1q@Uo{ca=rJRv=cUCs^hXLVLWR^*?jj}zfGNN!P
zr%7CtPxg;ZI3ZlpAGb`C8S8>K3yBM3jGU;*Z1UqT{>{Y{KrktKCepzp<Br~R;21eN
zWR~Z!A4=jG{N9tEU(N6lAp<{GGVij#%ju7+TY@pa5KQK^iJ#P}b}0|E*K*;jd+c%2
z01sHgSy^-Nd#940>u~6vg!Y?vF3{%uJEtAQ{|0DY3)mjZnrFg@e<!qZg5SH+<jdiN
zaEX4O^J;Q<^^(r`0{bK7-+`k^8}%pnH>l-V$+^$FL|M%em3AyMSAy^J9K7Ov<B4-p
zpwlR=JY?!}2xgR41X?YAqd$S|15w!2(O8|nwyzpyKJSMp{<Oi&HhFJFd?%bXQKz^i
z=jE;(nc6Pw4ys2d*i`Y<h2x;j{81nUCVA*B!9<zt4-Yb<Gw@25g6}-~%^|Ez`(nU!
zsUyeW2Wz}dMOKmlN4pSSx7301QV1&ztqyl8Urc!dUg;@6haJE?^%PHS)5al?Nz{fQ
zFY!2mQv{pS<k<V1LuekGr(@ANV6~6Y>hQ^P$ox@gsuSwTTpwP^1JB%}zdYpA*S>X+
z%F`jd{0%ycMAPNTKnk{!{glk;8Se~U$qHOY!TYw8!8Z4fXZ!>33*LmI^8?;Fo^i$*
zXPj}yXN7&qesWNk#e|m0(--jwXY3609?&;$lu67uAjglQc<3Eu-(QK1kVBK#IV;;?
z;FIO_jWRL@;%U5c%Yx&yFAK)Ix~pHAcn<#Uwf1nOcnRS;Wd&S!_#?bJPh!>SlIr)k
z96kR~4wN?#93}~?+XI*XOSMIAKXRp`-@Q?LFX&&g-YXi`i8Et9=!7@We1La$6xz0)
z$e3~x)qjXMf6{%jI8|E5NJ(!nA4|R~wvaaN<Rps0<!Gq*d*QSe_ZwX+KB#!2c%@s2
zKg=7U&3%=taiV%X)wiQa8zbf~6+Xawyhz_v#*F!<Hf20YklQ0Qt1@j$)r`pO%7#^^
z%BfoXIwpUi$_cb%V@u6wO-Fd>sQkX7N4{j&Sba~WoiwfUq&O~WJ_?mr;h*aj5#DAh
ze`;uJSxLF{O@Oo=UEx%@J{og}!QW6ja%LhYR<}C353bSQOjsU<rf(N4i`0|8?<#o^
ztNm19y))=c@iOJ-j_tIL2yB>1r3KRo%}9r=ITB)Ux@-w!hK^n_pG}>q@WAn*$&Y#F
zR<3#!AAQ5Crkff5I~<RB7Pm}X%Peg-jm&SE(T?J&KxOjKD=uPnKwsNYZ4^r81lAR^
zZ`v$OA5?h7s&lG!k}a682G%=+>P4$@X=Ki!>dipEWz4UNg>JDRQ`qbQA*M;LUe?U9
zqLZ33*4@dbi^4a#BlMttg(}3^F&7$2w$hXpx{0EjNSY}-p+9_$wU^@~o3*dZTLRu6
zZ^n7zend2Hc@XJYUjF`q;Ak*s<=?o!=6+8&+GqI&5SMQragtqm)i7_REziF>(``{X
zt89cZ_zot4QmFTippF<p_$sURjrT>(2OB*5h|WOKDNV5fr%kx?yAXHA)Pp;RFmW^%
zCcf$3HKr^j#CiM!M*t}+f4I{I{>lx*+kpZ9b|Fmc5!a)#RBsHPZ_1zJ=F?~0WXNH?
zZ)5$mtjlK^x)8jH#*UZ!s|XRAr9BAVqiar&tRx9XyX^NyW~~joVeQK<^ya6j%E&;D
znR(ibYhSfe^4Y!pSdhsxKawM3?Mlb1%okZb-0x5H{)N<^i3=}$5Lzi9RKHdOu2Z_7
zJ6DGK;F-%&{l{3FeCfYrzIysVb`0=J{e*shNcz-^DH}B^LPbp|R5iKh2$m3L-Y$4G
zIjpQCxK&s>EhbPkVb`wwm<MMJeijXQ66DN#>hk}C{Xv~I0DpqZ6y4^9`s8s7$Yg1v
z`J_;R<Stx3DR>FNKM$a~%8VeKrpM~U+v0RuC`5q(LjTIdp*<Kd4-bkSSq)iSNXEJP
z-ehN>e`Pb_c7>NxGN)z}m~q^m==5o{ANG!`4Pgh>m-HC_(kPauztk#l{gBea>M2OK
zDVyb6T=$%Kw!CBYUn{KIi^!81erJYm?7)!fj*g^h85fbkX++wg_-&+|;8vyUQ?FoX
z<R~!SH$zi*A+$06Ib+6Y{knd@^|7G*!(J$}@Ch7<IyxAX^BJp-g%#l}9X!4R=)rWi
z=_}PvQj`Dsx@kjxEuUM^j^^!yzcm(r4Qgg(7*?^CnmLEfmJb5-S4|xZtKYlc1e_!=
zZe9p0vkjjFSlzNr;e+BsI8UN+EChdWS;8j)o3|9|4{RR-{{uRD4LKnJ^tAv0002ov
JPDHLkV1lSjW8nY*

literal 0
HcmV?d00001

diff --git a/src/assets/sass/scss/bootstrap/_forms.scss b/src/assets/sass/scss/bootstrap/_forms.scss
index ec9c335..d53d61e 100644
--- a/src/assets/sass/scss/bootstrap/_forms.scss
+++ b/src/assets/sass/scss/bootstrap/_forms.scss
@@ -13,8 +13,10 @@
   @include font-size($input-font-size);
   font-weight: $input-font-weight;
   line-height: $input-line-height;
-  color: $input-color;
-  background-color: $input-bg;
+  // color: $input-color;
+  // background-color: $input-bg;
+  color: #FFFFFF !important;
+  background-color: #252525 !important;
   background-clip: padding-box;
   border: $input-border-width solid $input-border-color;