warning perubahan data pada list monitoring

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

@@ -15,6 +15,7 @@ import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { AddEditMasterBuildingComponent } from "../../master/master-building/add-edit-master-building/add-edit-master-building.component";
 import { AddEditMasterComponent } from "../../master/add-edit-master/add-edit-master.component";
 import { AddEditMasterRoomComponent } from "../../master/master-room/add-edit-master-room/add-edit-master-room.component";
+import Swal from "sweetalert2";
 
 @Component({
   selector: "app-add-edit-list",
@@ -337,7 +338,24 @@ export class AddEditListComponent {
   }
 
   cancel() {
-    this.router.navigate(["/list-monitoring"]);
+    if (this.projectInfo.dirty) { // Check if form has unsaved changes
+      Swal.fire({
+        title: 'Are you sure?',
+        text: "You have unsaved changes. Do you really want to leave?",
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Yes, leave',
+        cancelButtonText: 'No, stay'
+      }).then((result) => {
+        if (result.isConfirmed) {
+          this.router.navigate(["/list-monitoring"]);
+        }
+      });
+    } else {
+      this.router.navigate(["/list-monitoring"]);
+    }
   }
 
   modalAddBuilding() {

src/app/content/hemat-app/monitoring/modal-export/modal-export.component.html

@@ -126,7 +126,7 @@
   </div>
 </div>
 <div
-  class="modal-footer justify-content-between"
+  class="modal-footer "
   style="background-color: #fbfbfb !important; border-style: none !important"
 >
   <button
@@ -134,7 +134,7 @@
     class="btn"
     style="
       color: #242222;
-      width: 25%;
+      width: 10%;
       background-color: #fbfbfb !important;
       border-color: #242222 !important;
       border-radius: 10px;
@@ -147,10 +147,10 @@
     type="button"
     class="btn"
     style="
-      color: #242222 !important;
+      color: #ffffff !important;
-      width: 25%;
+      width: 10%;
-      background-color: #dde1e6 !important;
+      background-color: #37a647 !important;
-      border-color: #dde1e6 !important;
+      border-color: #37a647 !important;
       border-radius: 10px;
     "
     [disabled]="spinnerExportActive"