integrasi actual cost

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

@@ -89,28 +89,6 @@ input[type="month"]::-webkit-calendar-picker-indicator {
   background-color: #ffffff;
 }
 
-/* styles.css atau styles.scss */
-.chartist-tooltip {
-  position: absolute;
-  display: inline-block;
-  opacity: 0;
-  transition: opacity 0.2s ease-in-out;
-  pointer-events: none;
-  z-index: 10;
-  background: rgba(0, 0, 0, 0.8);
-  color: white;
-  padding: 5px;
-  border-radius: 3px;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.ct-tooltip-visible {
-  opacity: 1;
-}
-
-
-
 
 /* table */
 :host

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

@@ -6,7 +6,7 @@
     <div class="content-body">
       <section>
         <div class="row">
-          <div class="col-lg-4 col-12">
+          <div class="col-lg-4">
             <div class="card" style="background-color: #252525 !important">
               <div
                 class="card-header"
@@ -41,7 +41,7 @@
               </div>
             </div>
           </div>
-          <div class="col-lg-4 col-12">
+          <div class="col-lg-4">
             <div class="card" style="background-color: #252525 !important">
               <div
                 class="card-header"
@@ -78,7 +78,7 @@
               </div>
             </div>
           </div>
-          <div class="col-lg-4 col-12">
+          <div class="col-lg-4">
             <div class="card" style="background-color: #252525 !important">
               <div
                 class="card-header"
@@ -194,13 +194,6 @@
 
                     <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"

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

@@ -143,11 +143,6 @@ export class CostManagementComponent implements OnInit {
           startAngle: 0,
           labelPosition: "outside",
           labelOffset: 50,
-          plugins: [
-            Chartist.plugins.tooltip({
-              appendToBody: true,
-            }),
-          ],
           labelInterpolationFnc: function (value) {
             return value;
           },
@@ -273,11 +268,10 @@ export class CostManagementComponent implements OnInit {
   addFieldValue() {
     const modalRef = this.modalService.open(ModalAddActualComponent, {
       size: "sm",
+      centered: true,
     });
-    modalRef.componentInstance.newAttribute = {
+    modalRef.componentInstance.buildingId = this.buildingSelected;
-      id: null,
+    modalRef.componentInstance.periode = this.dateSelected;
-      name: "",
-    };
 
     modalRef.result.then(
       (result) => {

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

@@ -1,31 +1,42 @@
-<div class="modal-header">
+<div class="modal-body" style="background-color: #000000 !important">
-  <!-- <h4 class="modal-title">Add New Row</h4> -->
+  <h4 style="color: #ffffff">Input the actual cost of your expenses</h4>
-  <button type="button" class="close" aria-label="Close">
+  <p style="color: #ffffff">Building : {{buildingName}}</p>
-    <span aria-hidden="true">&times;</span>
+  <p style="color: #ffffff">Periode : {{formattedDate}}</p>
-  </button>
-</div>
-<div class="modal-body">
   <form [formGroup]="myForm">
     <div class="form-group">
-      <label for="name">Name:</label>
       <input
         type="text"
         class="form-control"
-        id="name"
+        id="real_cost"
-        formControlName="name"
+        formControlName="real_cost"
+        placeholder="0.00"
       />
     </div>
   </form>
 </div>
-<div class="modal-footer">
+<div class="modal-footer" style="background-color: #000000 !important">
   <button
     type="button"
     class="btn btn-secondary"
+    style="
+      color: #c3f164;
+      background-color: #000000 !important;
+      border-color: #c3f164 !important;
+    "
     (click)="activeModal.dismiss('Cross click')"
   >
     Close
   </button>
-  <button type="button" class="btn btn-primary" (click)="addRow()">
+  <button
+    type="button"
+    class="btn btn-primary"
+    style="
+      color: #000000 !important;
+      background-color: #c3f164 !important;
+      border-color: #c3f164 !important;
+    "
+    (click)="addRow()"
+  >
     Save Changes
   </button>
 </div>

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

@@ -1,29 +1,96 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input } from "@angular/core";
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from "@angular/forms";
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { NgbActiveModal } from "@ng-bootstrap/ng-bootstrap";
+import { CostManagementService } from "../../service/cost-management.service";
 
 @Component({
-  selector: 'app-modal-add-actual',
+  selector: "app-modal-add-actual",
-  templateUrl: './modal-add-actual.component.html',
+  templateUrl: "./modal-add-actual.component.html",
-  styleUrls: ['./modal-add-actual.component.css']
+  styleUrls: ["./modal-add-actual.component.css"],
 })
 export class ModalAddActualComponent {
-  @Input() newAttribute: any = {};
+  @Input() buildingId: number;
-  myForm: FormGroup;
+  @Input() periode: any;
 
-  constructor(public activeModal: NgbActiveModal, private fb: FormBuilder) {
+  myForm: FormGroup;
+  dateCurrent: any;
+  dataCost: any;
+  formattedDate: any;
+  buildingName: any;
+
+  constructor(
+    public activeModal: NgbActiveModal,
+    private fb: FormBuilder,
+    private costService: CostManagementService
+  ) {
     this.createForm();
   }
 
+  ngOnInit() {
+    const currentDate = new Date();
+    this.dateCurrent = currentDate.toISOString().slice(0, 7);
+    this.datalistcost();
+    this.dateFormat();
+    this.getBuildingById();
+  }
+
+  dateFormat() {
+    let year = this.periode.slice(0, 4);
+    let month = this.periode.slice(5);
+
+    // Ubah format bulan ke bahasa Indonesia (opsional)
+    let monthNames = [
+      "Januari",
+      "Februari",
+      "Maret",
+      "April",
+      "Mei",
+      "Juni",
+      "Juli",
+      "Agustus",
+      "September",
+      "Oktober",
+      "November",
+      "Desember",
+    ];
+    let monthName = monthNames[parseInt(month) - 1]; // Menggunakan parseInt karena month dalam format string
+
+    // Gabungkan kembali untuk mendapatkan format "Juni 2024"
+    this.formattedDate = `${monthName} ${year}`;
+  }
+
   createForm() {
     this.myForm = this.fb.group({
-      name: ['', Validators.required],
+      real_cost: ["", Validators.required],
     });
   }
 
+  getBuildingById() {
+    this.costService.getBUildingById(this.buildingId).subscribe((data) => {
+      this.buildingName = data.data.name;
+    });
+  }
+
+  datalistcost() {
+    this.costService
+      .getRealCostByBuildingId(this.buildingId, this.dateCurrent)
+      .subscribe((data) => {
+        this.dataCost = data.data[0];
+        this.myForm.patchValue({
+          real_cost: data.data[0].real_cost ? data.data[0].real_cost : 0,
+        });
+      });
+  }
+
   addRow() {
     if (this.myForm.valid) {
-      this.activeModal.close(this.myForm.value);
+      this.costService
+        .putRealCost(this.myForm.value, this.dataCost.id)
+        .subscribe((data) => {
+          console.log(data);
+
+          this.activeModal.close(this.myForm.value);
+        });
     }
   }
 }

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

@@ -313,6 +313,7 @@
 :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 {

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

@@ -78,4 +78,24 @@ export class CostManagementService {
     });
     return this.http.get<any>(url, { headers });
   }
+
+  putRealCost(data: any, id: any): Observable<any> {
+    const endpoint = `/real-cost`;
+    const url = `${BASE_URL}${endpoint}/${id}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.put<any>(url, data, { headers });
+  }
+
+  getBUildingById(id: any): Observable<any> {
+    const endpoint = `/building`;
+    const url = `${BASE_URL}${endpoint}/${id}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.get<any>(url, { headers });
+  }
 }