penambahan UI master location, location room dan user access

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

@@ -80,8 +80,4 @@ export class MasterCategoryComponent implements OnInit{
   deleteRow(row) {
     console.log("Delete row:", row);
   }
-
-  onTouchStart(event: Event) {
-    event.preventDefault(); // Add this if necessary
-  }
 }

src/app/content/hemat-app/master/master-location-room/master-location-room.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-location-room/master-location-room.component.html

@@ -1 +1,131 @@
-<p>master-location-room 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 Location Room 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"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="10"
+                      [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="Salary"
+                        [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 }}
+                        </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-info mr-1"
+                            
+                          >
+                            <i class="ficon feather ft-eye"></i>
+                          </button>
+                          <button
+                            class="btn btn-sm btn-warning mr-1"
+                            
+                          >
+                            <i class="ficon feather ft-edit"></i>
+                          </button>
+                          <button
+                            class="btn btn-sm btn-danger"
+                            
+                          >
+                            <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-location-room/master-location-room.component.ts

@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { TableApiService } from 'src/app/_services/table-api.service';
 
 @Component({
   selector: 'app-master-location-room',
@@ -6,5 +10,74 @@ import { Component } from '@angular/core';
   styleUrls: ['./master-location-room.component.css']
 })
 export class MasterLocationRoomComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
 
+  @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Location Room",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Location Room",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.tableApiservice.getTableInitialisationData().subscribe((response) => {
+      this.data = response;
+      this.filteredRows = this.data.rows;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [...this.data.rows];
+    } else {
+      this.filteredRows = this.data.rows.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)
+    );
+  }
+
+  viewRow(row) {
+    console.log("View row:", row);
+    this.router.navigate(["/device/view", row.name]);
+  }
+
+  editRow(row) {
+    console.log("Edit row:", row);
+    this.router.navigate(["/device/edit", row.name]);
+  }
+
+  deleteRow(row) {
+    console.log("Delete row:", row);
+  }
 }

src/app/content/hemat-app/master/master-location/master-location.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-location/master-location.component.html

@@ -1 +1,131 @@
-<p>master-location 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 Location 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"
+                      >
+                        <i class="feather ft-plus"></i>&nbsp; Add new master
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-dashboard">
+                    <ngx-datatable
+                      class="bootstrap table-bordered"
+                      [limit]="10"
+                      [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="Salary"
+                        [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 }}
+                        </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-info mr-1"
+                            
+                          >
+                            <i class="ficon feather ft-eye"></i>
+                          </button>
+                          <button
+                            class="btn btn-sm btn-warning mr-1"
+                            
+                          >
+                            <i class="ficon feather ft-edit"></i>
+                          </button>
+                          <button
+                            class="btn btn-sm btn-danger"
+                            
+                          >
+                            <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-location/master-location.component.ts

@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { TableApiService } from 'src/app/_services/table-api.service';
 
 @Component({
   selector: 'app-master-location',
@@ -6,5 +10,74 @@ import { Component } from '@angular/core';
   styleUrls: ['./master-location.component.css']
 })
 export class MasterLocationComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
 
+  @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "Master Location",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "Master Location",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.tableApiservice.getTableInitialisationData().subscribe((response) => {
+      this.data = response;
+      this.filteredRows = this.data.rows;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [...this.data.rows];
+    } else {
+      this.filteredRows = this.data.rows.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)
+    );
+  }
+
+  viewRow(row) {
+    console.log("View row:", row);
+    this.router.navigate(["/device/view", row.name]);
+  }
+
+  editRow(row) {
+    console.log("Edit row:", row);
+    this.router.navigate(["/device/edit", row.name]);
+  }
+
+  deleteRow(row) {
+    console.log("Delete row:", row);
+  }
 }

src/app/content/hemat-app/user-access/user-access.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/user-access/user-access.component.html

@@ -1 +1,119 @@
-<p>user-access 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>
+                User Access 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">
+                      <i class="feather ft-plus"></i>&nbsp; Add new user
+                    </button>
+                  </div>
+                </div>
+                <div class="card-dashboard">
+                  <ngx-datatable
+                    class="bootstrap table-bordered"
+                    [limit]="10"
+                    [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="Salary"
+                      [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 }}
+                      </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-info mr-1">
+                          <i class="ficon feather ft-eye"></i>
+                        </button>
+                        <button class="btn btn-sm btn-warning mr-1">
+                          <i class="ficon feather ft-edit"></i>
+                        </button>
+                        <button class="btn btn-sm btn-danger">
+                          <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/user-access/user-access.component.ts

@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { TableApiService } from 'src/app/_services/table-api.service';
 
 @Component({
   selector: 'app-user-access',
@@ -6,5 +10,74 @@ import { Component } from '@angular/core';
   styleUrls: ['./user-access.component.css']
 })
 export class UserAccessComponent {
+  data: any;
+  filteredRows: any[];
+  searchTerm: string = "";
+  rows: any = [];
+  public breadcrumb: any;
 
+  @BlockUI("zeroConfiguration") blockUIZeroConfiguration: NgBlockUI;
+
+  constructor(
+    private tableApiservice: TableApiService,
+    private modalService: NgbModal,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.breadcrumb = {
+      mainlabel: "User Access",
+      links: [
+        {
+          name: "Home",
+          isLink: false,
+        },
+        {
+          name: "User Access",
+          isLink: false,
+        },
+      ],
+    };
+    this.fetchData();
+  }
+
+  fetchData() {
+    this.tableApiservice.getTableInitialisationData().subscribe((response) => {
+      this.data = response;
+      this.filteredRows = this.data.rows;
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [...this.data.rows];
+    } else {
+      this.filteredRows = this.data.rows.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)
+    );
+  }
+
+  viewRow(row) {
+    console.log("View row:", row);
+    this.router.navigate(["/device/view", row.name]);
+  }
+
+  editRow(row) {
+    console.log("Edit row:", row);
+    this.router.navigate(["/device/edit", row.name]);
+  }
+
+  deleteRow(row) {
+    console.log("Delete row:", row);
+  }
 }

src/app/content/hemat-app/user-access/user-access.module.ts

@@ -2,6 +2,17 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { UserAccessComponent } from './user-access.component';
 import { RouterModule } from '@angular/router';
+import { ChartistModule } from 'ng-chartist';
+import { FormsModule } from '@angular/forms';
+import { NgChartsModule } from 'ng2-charts';
+import { CardModule } from '../../partials/general/card/card.module';
+import { MatchHeightModule } from '../../partials/general/match-height/match-height.module';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
+import { BreadcrumbModule } from 'src/app/_layout/breadcrumb/breadcrumb.module';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { BlockTemplateComponent } from 'src/app/_layout/blockui/block-template.component';
+import { BlockUIModule } from 'ng-block-ui';
 
 
 
@@ -11,6 +22,18 @@ import { RouterModule } from '@angular/router';
   ],
   imports: [
     CommonModule,
+    ChartistModule,
+    FormsModule,
+    NgChartsModule,
+    CardModule,
+    MatchHeightModule,
+    NgxDatatableModule,
+    PerfectScrollbarModule,
+    BreadcrumbModule,
+    NgbModule,
+    BlockUIModule.forRoot({
+      template: BlockTemplateComponent
+    }),
     RouterModule.forChild([
       {
         path: '',