custom UI list monitoring

src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.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,9 +7,13 @@
       <section id="basic-form-layouts">
         <div class="row">
           <div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
-              <m-card>
+            <div class="card" style="background-color: #252525 !important">
-                <ng-container mCardHeaderTitle>
+              <div class="card-content">
-                  <h2>
+                <div
+                  class="card-header"
+                  style="background-color: #252525 !important"
+                >
+                  <h2 style="color: #ffffff">
                     {{
                       isEditMode()
                         ? "Edit List Monitoring"
@@ -18,20 +22,23 @@
                         : "Add New List Monitoring"
                     }}
                   </h2>
-                </ng-container>
+                </div>
-                <ng-container mCardBody>
+                <div class="card-body">
                   <form
                     [formGroup]="projectInfo"
                     (ngSubmit)="onProjectInfoSubmit()"
                   >
                     <div class="form-body">
-                      <h4 class="form-section">
+                      <h4 class="form-section" style="color: #ffffff">
-                        <i class="feather ft-user"></i> General Information
+                        <i class="feather ft-user" style="color: #ffffff"></i>
+                        General Information
                       </h4>
                       <div class="row">
                         <div class="col-md-6">
                           <div class="form-group">
-                            <label for="buildingId">Building *</label>
+                            <label for="buildingId" style="color: #ffffff"
+                              >Building *</label
+                            >
                             <div class="input-group">
                               <select
                                 id="buildingId"
@@ -62,7 +69,9 @@
                         </div>
                         <div class="col-md-6">
                           <div class="form-group">
-                            <label for="statusId">Status *</label>
+                            <label for="statusId" style="color: #ffffff"
+                              >Status *</label
+                            >
                             <div class="input-group">
                               <select
                                 id="statusId"
@@ -124,6 +133,11 @@
                                     <button
                                       class="btn btn-danger"
                                       type="button"
+                                      style="
+                                        color: #000000 !important;
+                                        border-color: #bef264 !important;
+                                        background-color: #bef264 !important;
+                                      "
                                       (click)="removePhone(i)"
                                     >
                                       <i class="feather ft-x"></i>
@@ -135,6 +149,11 @@
                             <button
                               type="button"
                               class="btn btn-primary"
+                              style="
+                                color: #000000 !important;
+                                border-color: #bef264 !important;
+                                background-color: #bef264 !important;
+                              "
                               (click)="addPhone()"
                             >
                               <i class="feather ft-plus"></i> Add Room
@@ -176,22 +195,36 @@
                       <button
                         type="button"
                         class="btn btn-warning mr-1"
+                        style="
+                          color: #bef264 !important;
+                          border-color: #bef264 !important;
+                          background-color: #000000 !important;
+                        "
                         (click)="cancel()"
                       >
                         <i class="feather ft-x"></i> Cancel
                       </button>
-                      <button type="submit" class="btn btn-primary" *ngIf="mode !== 'view'" (click)="save()">
+                      <button
+                        type="submit"
+                        class="btn btn-primary"
+                        style="
+                          color: #000000 !important;
+                          border-color: #bef264 !important;
+                          background-color: #bef264 !important;
+                        "
+                        *ngIf="mode !== 'view'"
+                        (click)="save()"
+                      >
                         <i class="la la-check"></i> Save
                       </button>
                     </div>
                   </form>
-                </ng-container>
+                </div>
-              </m-card>
+              </div>
+            </div>
           </div>
         </div>
       </section>
     </div>
   </div>
 </div>
-  
-  

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

@@ -324,9 +324,11 @@
   background-color: #1a1a1a; /* Darker black for hover effect */
 }
 
+/* Tambahkan ini ke styles.css atau CSS komponen */
+
 /* Custom styles for Swal buttons */
-.btn-confirm {
+.div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
-  background-color: #28a745 !important;
+  background-color: #bef264 !important;
   color: white !important;
   border: none !important;
   padding: 10px 20px !important;
@@ -334,7 +336,7 @@
   font-size: 16px !important;
 }
 
-.btn-cancel {
+.swal2-cancel.btn-cancel {
   background-color: #dc3545 !important;
   color: white !important;
   border: none !important;
@@ -343,10 +345,19 @@
   font-size: 16px !important;
 }
 
-.btn-confirm:hover {
+.swal2-confirm.btn-confirm:hover {
   background-color: #218838 !important;
 }
 
-.btn-cancel:hover {
+.swal2-cancel.btn-cancel:hover {
   background-color: #c82333 !important;
 }
+
+/* Custom Swal background */
+.swal2-popup.custom-swal-background {
+  background-color: #000000 !important; /* Warna background hitam */
+  color: white !important; /* Warna teks putih */
+}
+
+
+

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

@@ -1,5 +1,5 @@
 <div class="app-content content" style="background-color: #000000 !important">
-  <div class="content-wrapper">
+  <div class="content-wrapper" style="height: 900px !important;">
     <div class="content-header row mb-1">
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
     </div>

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

@@ -1,13 +1,13 @@
-import { Component } from '@angular/core';
+import { Component } from "@angular/core";
-import { Router } from '@angular/router';
+import { Router } from "@angular/router";
-import { TableApiService } from 'src/app/_services/table-api.service';
+import { TableApiService } from "src/app/_services/table-api.service";
-import { BuildingService } from '../service/monitoring-api.service';
+import { BuildingService } from "../service/monitoring-api.service";
-import Swal from 'sweetalert2';
+import Swal from "sweetalert2";
 
 @Component({
-  selector: 'app-list-monitoring',
+  selector: "app-list-monitoring",
-  templateUrl: './list-monitoring.component.html',
+  templateUrl: "./list-monitoring.component.html",
-  styleUrls: ['./list-monitoring.component.css']
+  styleUrls: ["./list-monitoring.component.css"],
 })
 export class ListMonitoringComponent {
   public breadcrumb: any;
@@ -60,8 +60,7 @@ export class ListMonitoringComponent {
     const searchTermLC = this.searchTerm.toLowerCase();
     return Object.values(row).some(
       (value) =>
-        value !== null &&
+        value !== null && value.toString().toLowerCase().includes(searchTermLC)
-        value.toString().toLowerCase().includes(searchTermLC)
     );
   }
 
@@ -74,35 +73,57 @@ export class ListMonitoringComponent {
   }
 
   deleteRow(row) {
-    Swal.fire({
+    const swalWithBootstrapButtons = Swal.mixin({
-      title: 'Are you sure?',
-      text: 'Do you want to delete?',
-      icon: 'question',
-      showCancelButton: true,
-      confirmButtonText: 'Yes',
-      cancelButtonText: 'No',
       customClass: {
-        confirmButton: 'btn-confirm',
+        confirmButton: "btn-confirm",
-        cancelButton: 'btn-cancel'
+        cancelButton: "btn-cancel",
-      }
+        popup: "custom-swal-background",
+      },
+    });
+    swalWithBootstrapButtons.fire({
+      title: "Are you sure?",
+      text: "Do you want to delete?",
+      icon: "question",
+      showCancelButton: true,
+      confirmButtonText: "Yes",
+      cancelButtonText: "No",
     }).then((result) => {
       if (result.isConfirmed) {
         Swal.fire({
-          title: 'Loading...',
+          title: "Loading...",
-          text: 'Please wait',
+          text: "Please wait",
           allowOutsideClick: false,
+          customClass: {
+            popup: "custom-swal-background",
+          },
           didOpen: () => {
             Swal.showLoading();
-          }
+          },
         });
         setTimeout(() => {
-          this.monitoringApiService.deleteRoomBuilding(row.id).subscribe(data => {
+          this.monitoringApiService
-            Swal.fire('Confirmed!', 'You clicked Yes.', 'success');
+            .deleteRoomBuilding(row.id)
+            .subscribe((data) => {
+              Swal.fire({
+                title: "Confirmed!",
+                text: "You clicked Yes.",
+                icon: "success",
+                customClass: {
+                  popup: "custom-swal-background",
+                },
+              });
               this.fetchData();
             });
         }, 2000);
       } else if (result.isDismissed) {
-        Swal.fire('Cancelled', 'You clicked No.', 'error');
+        Swal.fire({
+          title: "Cancelled",
+          text: "You clicked No.",
+          icon: "error",
+          customClass: {
+            popup: "custom-swal-background",
+          },
+        });
       }
     });
   }