intergrasi master role

src/app/_layout/header/horizontal/horizontal.component.html

@@ -11,7 +11,7 @@
         <li class="nav-item"><a [routerLink]="['/monitoring']" class="navbar-brand"><img class="brand-logo" alt="modern admin logo"
               src="../../../../assets/images/logo/logo.png">
             <!-- <h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}}</h3> -->
-            <h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}} - (V@2024.05.20.03)</h3>
+            <h3 class="brand-text">{{_themeSettingsConfig.brand.brand_name}} - (V@2024.05.21.02)</h3>
           </a></li>
 
         <li class="nav-item d-md-none"><a class="nav-link open-navbar-container" data-toggle="collapse"

src/app/content/hemat-app/master/master-role/master-role.component.css

@@ -0,0 +1,190 @@
+: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 .datatable-icon-right:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-skip:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-left:before {
+    font-family: 'icofont';
+    font-style: normal;
+}
+
+:host ::ng-deep .datatable-icon-left:before {
+    content: "\2039";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-prev:before {
+    content: "\00AB";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-right:before {
+    content: "\203A";
+    font-size: x-large;
+}
+
+:host ::ng-deep .datatable-icon-skip:before {
+    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-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-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 .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;
+}
+
+: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-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-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).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 {
+    background: #727e8e;
+    color: #ededed;
+    margin-top: -1px;
+    overflow: inherit;
+}
+
+:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
+    font-weight: bold;
+    height: unset !important;
+    overflow: inherit
+}
+
+:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager {
+    flex: 0 0 0%;
+}
+
+:host ::ng-deep .ngx-datatable .datatable-footer .datatable-pager .pager {
+    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 {
+  display: -webkit-box;
+}
+

src/app/content/hemat-app/master/master-role/master-role.component.html

@@ -1 +1,128 @@
-<p>master-role works!</p>
+<div class="app-content content">
+    <div class="content-wrapper">
+      <div class="content-header row mb-1">
+        <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
+      </div>
+      <div class="content-body">
+        <section id="configuration">
+          <div class="row">
+            <div
+              class="col-12"
+              *blockUI="'zeroConfiguration'; message: 'Loading'"
+            >
+              <m-card>
+                <ng-container mCardHeaderTitle>
+                  Master Role Table
+                </ng-container>
+                <ng-container mCardBody>
+                  <div class="row mb-2">
+                    <div class="col-md-6">
+                      <input
+                        type="text"
+                        class="form-control"
+                        placeholder="Search..."
+                        [(ngModel)]="searchTerm"
+                        (input)="filterRows()"
+                        (touchstart)="onTouchStart($event)"
+                      />
+                    </div>
+                    <div class="col-md-6 text-right">
+                      <button
+                        class="btn btn-secondary"
+                        (click)="openAddMasterModal()"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </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="Name"
+                        [flexGrow]="1"
+                        [minWidth]="90"
+                      >
+                        <ng-template ngx-datatable-header-template>
+                          <span>Category Name</span>
+                        </ng-template>
+                        <ng-template
+                          let-value="value"
+                          ngx-datatable-cell-template
+                        >
+                          {{ value }}
+                        </ng-template>
+                      </ngx-datatable-column>
+                      <ngx-datatable-column
+                        name="Status"
+                        [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 === '1' ? '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)="editRow(row)"
+                            
+                          >
+                            <i class="ficon feather ft-edit"></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>
+                  </div>
+                </ng-container>
+              </m-card>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+  

src/app/content/hemat-app/master/master-role/master-role.component.ts

@@ -1,4 +1,9 @@
 import { Component } from '@angular/core';
+import { AddEditMasterComponent } from '../add-edit-master/add-edit-master.component';
+import { TableApiService } from 'src/app/_services/table-api.service';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { Router } from '@angular/router';
+import { BuildingService } from '../../service/monitoring-api.service';
 
 @Component({
   selector: 'app-master-role',
@@ -6,5 +11,127 @@ import { Component } from '@angular/core';
   styleUrls: ['./master-role.component.css']
 })
 export class MasterRoleComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
+  dataMasterCategori: any;
 
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router,
+    private monitoringApiService: BuildingService
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Role",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Role",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.monitoringApiService.getMasterData().subscribe((res) => {
+      this.data = res.results.data;
+      this.dataMasterCategori = res.results.data.find(
+        (item) => item.name === "master_role"
+      );
+      this.filteredRows = this.dataMasterCategori.headerDetailParam;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [
+        ...this.data.find((item) => item.name === "master_role")
+          .headerDetailParam,
+      ];
+    } else {
+      this.filteredRows = this.data
+        .find((item) => item.name === "master_role")
+        .headerDetailParam.filter((row) => this.rowContainsSearchTerm(row));
+    }
+  }
+
+  rowContainsSearchTerm(row: any): boolean {
+    const searchTermLC = this.searchTerm.toLowerCase();
+    return Object.values(row).some(
+      (value) =>
+        value !== null && value.toString().toLowerCase().includes(searchTermLC)
+    );
+  }
+
+  openAddMasterModal() {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.mode = "add";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .postHeaderDetailParam(result)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  editRow(row) {
+    const modalRef = this.modalService.open(AddEditMasterComponent, {
+      size: "lg",
+    });
+
+    modalRef.componentInstance.headerId = this.dataMasterCategori.id;
+    modalRef.componentInstance.dataRow = row;
+    modalRef.componentInstance.mode = "edit";
+    modalRef.result.then(
+      (result) => {
+        console.log(result);
+        if (result) {
+          this.monitoringApiService
+            .putHeaderDetailParam(result, row.id)
+            .subscribe((res) => {
+              console.log(res);
+              this.fetchData();
+            });
+        }
+      },
+      (reason) => {
+        console.log(`Dismissed: ${reason}`);
+      }
+    );
+  }
+
+  deleteRow(row) {
+    const confirmDelete = confirm("Are you sure you want to delete this item?");
+    if (confirmDelete) {
+      this.monitoringApiService
+        .deleteHeaderDetailParam(row.id)
+        .subscribe((res) => {
+          this.fetchData();
+        });
+    }
+  }
 }

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

@@ -4,6 +4,76 @@
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
     </div>
     <div class="content-body">
+      <div class="row">
+        <div class="col-xl-3 col-md-6 col-12">
+          <div class="card">
+            <div class="card-content">
+              <div class="card-body">
+                <div class="media d-flex">
+                  <div class="media-body text-left">
+                    <h3 class="danger">278</h3>
+                    <span>New Projects</span>
+                  </div>
+                  <div class="align-self-center">
+                    <i class="icon-rocket danger font-large-2 float-right"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-3 col-md-6 col-12">
+          <div class="card">
+            <div class="card-content">
+              <div class="card-body">
+                <div class="media d-flex">
+                  <div class="media-body text-left">
+                    <h3 class="success">156</h3>
+                    <span>New Clients</span>
+                  </div>
+                  <div class="align-self-center">
+                    <i class="icon-user success font-large-2 float-right"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-3 col-md-6 col-12">
+          <div class="card">
+            <div class="card-content">
+              <div class="card-body">
+                <div class="media d-flex">
+                  <div class="media-body text-left">
+                    <h3 class="warning">64.89 %</h3>
+                    <span>Conversion Rate</span>
+                  </div>
+                  <div class="align-self-center">
+                    <i class="icon-pie-chart warning font-large-2 float-right"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-3 col-md-6 col-12">
+          <div class="card">
+            <div class="card-content">
+              <div class="card-body">
+                <div class="media d-flex">
+                  <div class="media-body text-left">
+                    <h3 class="info">423</h3>
+                    <span>Support Tickets</span>
+                  </div>
+                  <div class="align-self-center">
+                    <i class="icon-support info font-large-2 float-right"></i>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="row">
         <div class="col-xl-4 col-md-6 col-sm-12">
           <div class="card">

src/app/login/login.component.html

@@ -133,7 +133,7 @@
                 <p
                   class="card-subtitle line-on-side text-muted text-center font-small-3 mx-2 my-1"
                 >
-                  <span>New to Modern ? (v@2024.05.20.03)</span>
+                  <span>New to Modern ? (v@2024.05.21.02)</span>
                 </p>
                 <div class="card-body">
                   <a