diff --git a/src/app/_layout/footer/footer.component.html b/src/app/_layout/footer/footer.component.html
index f48e964..2b8fac8 100644
--- a/src/app/_layout/footer/footer.component.html
+++ b/src/app/_layout/footer/footer.component.html
@@ -13,7 +13,7 @@
         href="https://allbestsistem.com/"
         target="_blank"
         style="background-color: #ffffff !important;"
-        >Smart Building Management Systems (V@2024-07-16.01)
+        >Smart Building Management Systems (V@2024-07-17.02)
       </a></span
     >
   </p>
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 d511aa8..b276f26 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.css
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.css
@@ -105,3 +105,72 @@ canvas {
   font-weight: 800;
   font-size: 24px;
 }
+
+.text-custom-label{
+  color: #242222 !important;
+  font-family: "Open Sans", sans-serif !important;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.custom-style-header{
+  background-color: #DDE1E6 !important;
+  border-bottom: 3px solid #242222;
+}
+
+/* day */
+.days-container {
+  display: flex;
+  justify-content: space-around;
+}
+
+.day {
+  font-family: "Nunito Sans", sans-serif;
+  color: #242222;
+  padding: 2px;
+  border-radius: 5px;
+}
+
+.current-day {
+  color: #37A647;
+}
+
+.temperature-container {
+  text-align: center;
+  margin-top: 50px;
+  height: 100px;
+}
+
+.temperature {
+  font-family: "Nunito Sans", sans-serif;
+  font-size: 36px;
+  font-weight: bold;
+  color: #242222;
+}
+
+.date-time-container {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+}
+
+.current-date,
+.current-time {
+  font-family: "Nunito Sans", sans-serif;
+  font-size: 16px;
+  color: #242222;
+}
+
+.custom-card-temp{
+  height: 300px;
+}
+
+/* echart */
+.custom-card-air {
+  background-color: #dde1e6 !important;
+}
+
+.echart-container {
+  height: 200px; /* Tinggi awal untuk menentukan tinggi chart */
+  width: 100%; /* Lebar maksimal */
+}
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 dc17fb2..af8aa4e 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.html
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html
@@ -168,6 +168,75 @@
           </div>
         </div>
       </div>
+      <div class="row">
+        <div class="col-xl-4 col-md-6 col-12">
+          <div class="card custom-card-temp" style="background-color: #DDE1E6 !important">
+            <div class="card-header custom-style-header">
+              <h4 class="card-title text-center text-custom-label">
+                Temperature
+              </h4>
+            </div>
+            <div class="card-body">
+              <div class="days-container">
+                <div
+                  *ngFor="let day of days"
+                  [ngClass]="{ 'current-day': day.isToday }"
+                  class="day"
+                >
+                  {{ day.name }}
+                </div>
+              </div>
+              <div class="temperature-container">
+                <span class="temperature">{{ roomTemperature }}°C</span>
+              </div>
+              <div class="date-time-container">
+                <span class="current-time">Time :{{ currentTime }}</span>
+                <span class="current-date">{{ currentDate }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-4 col-md-6 col-12">
+          <div class="card custom-card-air">
+            <div class="card-header custom-style-header">
+              <h4 class="card-title text-center text-custom-label">
+                Air Quality
+              </h4>
+            </div>
+            <div class="card-body">
+              <div echarts [options]="chartOption" class="echart-container"></div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="col-xl-4 col-md-6 col-12">
+          <div class="card custom-card-temp" style="background-color: #DDE1E6 !important">
+            <div class="card-header custom-style-header">
+              <h4 class="card-title text-center text-custom-label">
+                Humidity
+              </h4>
+            </div>
+            <div class="card-body">
+              <div class="days-container">
+                <div
+                  *ngFor="let day of days"
+                  [ngClass]="{ 'current-day': day.isToday }"
+                  class="day"
+                >
+                  {{ day.name }}
+                </div>
+              </div>
+              <div class="temperature-container">
+                <span class="temperature">{{ roomHumidity }}%</span>
+              </div>
+              <div class="date-time-container">
+                <span class="current-time">Time :{{ currentTime }}</span>
+                <span class="current-date">{{ currentDate }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="row">
         <div class="col-6" *ngFor="let item of deviceCategory?.usesd">
           <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 7c7968c..0a6dc82 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -4,6 +4,7 @@ import { ChartOptions, ChartType, ChartDataset } from "chart.js";
 import { EnergyMonitoringService } from "../../service/energy-monitoring.service";
 import { CurrencyPipe } from "@angular/common";
 import { LoginService } from "../../service/login.service";
+import { DeviceService } from "../../service/device.service";
 
 @Component({
   selector: "app-detail",
@@ -18,6 +19,24 @@ export class DetailComponent {
   donutChart1: any;
   donutChart2: any;
 
+  // temperature
+  days = [
+    { name: "Sun", isToday: false },
+    { name: "Mon", isToday: false },
+    { name: "Tue", isToday: false },
+    { name: "Wed", isToday: false },
+    { name: "Thu", isToday: false },
+    { name: "Fri", isToday: false },
+    { name: "Sat", isToday: false },
+  ];
+  roomTemperature: number = 0;
+  roomHumidity: number = 0;
+  valueAirQuality: number = 0;
+  currentDate: string;
+  currentTime: string;
+  // temperature
+  chartOption: any;
+
   dataChart = {
     donut: {
       series: [20, 20, 20, 20, 20],
@@ -34,7 +53,7 @@ export class DetailComponent {
   public barChartOptions: ChartOptions = {
     responsive: true,
     animation: {
-      duration: 0 
+      duration: 0,
     },
     scales: {
       x: {
@@ -42,11 +61,11 @@ export class DetailComponent {
       },
       y: {
         stacked: true,
-        beginAtZero: true
+        beginAtZero: true,
       },
     },
   };
-  
+
   public barChartLabels: string[] = [];
   public barChartType: ChartType = "bar";
   public barChartLegend = true;
@@ -88,7 +107,7 @@ export class DetailComponent {
       pointHoverBorderWidth: 2,
       pointRadius: 4,
       tension: 0.3,
-      spanGaps: true
+      spanGaps: true,
     },
     // {
     //   type: "line",
@@ -127,7 +146,8 @@ export class DetailComponent {
     private energyMonitoringService: EnergyMonitoringService,
     private currencyPipe: CurrencyPipe,
     private router: Router,
-    private authService: LoginService
+    private authService: LoginService,
+    private deviceService: DeviceService
   ) {}
 
   get formattedSummaryCost(): string {
@@ -156,6 +176,8 @@ export class DetailComponent {
         this.dataEnergyMonitoringSTemperature(buildingId);
         this.dataEnergyDeviceCategory(buildingId);
         this.dataEnergyChartKwhWater(buildingId);
+        this.dataDeviceIr();
+        this.getAirQualityData();
       }
     });
 
@@ -172,6 +194,112 @@ export class DetailComponent {
         showLabel: true,
       },
     };
+
+    const today = new Date().getDay();
+    this.days[today].isToday = true;
+
+    const now = new Date();
+    this.currentDate = now.toLocaleDateString();
+    this.currentTime = now.toLocaleTimeString();
+  }
+
+  getAirQualityData(){
+    this.valueAirQuality = Math.floor(Math.random() * 501)
+    this.chartOption = {
+      series: [
+        {
+          type: "gauge",
+          startAngle: 180,
+          endAngle: 0,
+          center: ["50%", "75%"],
+          radius: "130%", // Adjust the radius to make the chart smaller
+          min: 0,
+          max: 500,
+          splitNumber: 5,
+          axisLine: {
+            lineStyle: {
+              width: 20,
+              color: [
+                [1/6, "#6BD67C"],       // 0 - 50: Green
+                [2/6, "#A2D856"],       // 51 - 100: Light Green
+                [3/6, "#FFE45E"],       // 101 - 150: Yellow
+                [4/6, "#FFA644"],       // 151 - 200: Orange
+                [5/6, "#FF6E76"],       // 201 - 300: Light Red
+                [6/6, "#E768A7"]        // 301 - 500: Purple
+              ],
+            },
+          },
+          pointer: {
+            icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
+            length: "12%",
+            width: 15,
+            offsetCenter: [0, "-50%"],
+            itemStyle: {
+              color: "auto",
+            },
+          },
+          axisTick: {
+            length: 10,
+            lineStyle: {
+              color: "auto",
+              width: 2,
+            },
+          },
+          splitLine: {
+            length: 15,
+            lineStyle: {
+              color: "auto",
+              width: 5,
+            },
+          },
+          axisLabel: {
+            color: "#464646",
+            fontSize: 16, // Adjust font size
+            distance: -40, // Adjust distance
+            rotate: "tangential",
+            formatter: function (value: number) {
+              // return Math.round(value) === 100 ? "100" : Math.round(value) + "";
+              return value.toString();
+            },
+          },
+          title: {
+            offsetCenter: [0, " 15%"],
+            fontSize: 18, // Adjust font size
+          },
+          detail: {
+            fontSize: 24, // Adjust font size
+            offsetCenter: [0, "-25%"], // Adjust offset
+            valueAnimation: true,
+            formatter: function (value: number) {
+              return Math.round(value) + "";
+            },
+            color: "inherit",
+          },
+          data: [
+            {
+              value: this.valueAirQuality,
+              name: this.getGradeName(this.valueAirQuality),
+            },
+          ],
+        },
+      ],
+    };
+  }
+
+  getGradeName(value: number): string {
+    if (value <= 50) {
+      return "Good";
+    } else if (value <= 100) {
+      return "Moderate";
+    } else if (value <= 150) {
+      return "Unhealthy for Sensitive Groups";
+    } else if (value <= 200) {
+      return "Unhealthy";
+    } else if (value <= 300) {
+      return "Very Unhealthy";
+    } else {
+      return "Hazardous";
+    }
   }
 
   breadcrumbLink() {
@@ -201,6 +329,14 @@ export class DetailComponent {
         this.topCard = res.data;
       });
   }
+
+  dataDeviceIr() {
+    this.deviceService.getDeviceStatus(452).subscribe((res) => {
+      console.log(res);
+      this.roomTemperature = res.result[0].value;
+      this.roomHumidity = res.result[1].value;
+    });
+  }
   dataEnergyMonitoringSummary(buildingId) {
     this.energyMonitoringService
       .getDashboardSummary(buildingId)
@@ -279,7 +415,7 @@ export class DetailComponent {
         // Populate Appointment data at every multiple of 7
         let weekIndex = 0;
         console.log(this.barChartData[0].data);
-        
+
         for (let i = 0; i < this.barChartData[0].data.length; i++) {
           if (i % 7 === 6 && weekIndex < weeklyKwh.length) {
             this.barChartData[2].data[i] = weeklyKwh[weekIndex++];
@@ -332,7 +468,7 @@ export class DetailComponent {
 
     return weeks;
   }
-  seeMore(paramsId){
+  seeMore(paramsId) {
     this.router.navigate(["/monitoring/control-device-see-more/", paramsId]);
   }
 }
diff --git a/src/app/content/hemat-app/service/device.service.ts b/src/app/content/hemat-app/service/device.service.ts
index 5a3fb07..7dd42d7 100644
--- a/src/app/content/hemat-app/service/device.service.ts
+++ b/src/app/content/hemat-app/service/device.service.ts
@@ -88,4 +88,14 @@ export class DeviceService {
     });
     return this.http.get<any>(url, { headers });
   }
+
+  getDeviceStatus(id): Observable<any> {
+    const endpoint = `/devices`;
+    const url = `${BASE_URL}${endpoint}/status?id=${id}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.get<any>(url, { headers });
+  }
 }
diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html
index ae2d6d8..d2e4c6a 100644
--- a/src/app/login/login.component.html
+++ b/src/app/login/login.component.html
@@ -138,7 +138,7 @@
                 <p
                   class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
                 >
-                  <span>(v@2024.07.16.01)</span>
+                  <span>(v@2024.07.17.02)</span>
                 </p>
                 <!-- <div class="card-body">
                   <a