integrasi monitoring list

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

@@ -12,7 +12,7 @@
               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.22.01)</h3> -->
-            <h3 class="brand-text" style="color: aliceblue;">Hemat - (V@2024.05.31.01)</h3>
+            <h3 class="brand-text" style="color: aliceblue;">Hemat - (V@2024.06.03.01)</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/device/device.component.html

@@ -92,13 +92,28 @@
                         {{ value }}
                       </ng-template>
                     </ngx-datatable-column>
+                    <ngx-datatable-column
+                      name="categoryEntity"
+                      [flexGrow]="1"
+                      [minWidth]="90"
+                    >
+                      <ng-template ngx-datatable-header-template>
+                        <span>Category</span>
+                      </ng-template>
+                      <ng-template
+                        ngx-datatable-cell-template
+                        let-value="value"
+                      >
+                        {{ value.name }}
+                      </ng-template>
+                    </ngx-datatable-column>
                     <ngx-datatable-column
                       name="watt"
                       [flexGrow]="1"
                       [minWidth]="90"
                     >
                       <ng-template ngx-datatable-header-template>
-                        <span>watt</span>
+                        <span>Watt</span>
                       </ng-template>
                       <ng-template
                         ngx-datatable-cell-template
@@ -108,52 +123,37 @@
                       </ng-template>
                     </ngx-datatable-column>
                     <ngx-datatable-column
-                      name="typeId"
+                      name="typeEntity"
                       [flexGrow]="1"
                       [minWidth]="90"
                     >
                       <ng-template ngx-datatable-header-template>
-                        <span>typeId</span>
+                        <span>Type</span>
                       </ng-template>
                       <ng-template
                         ngx-datatable-cell-template
                         let-value="value"
                       >
-                        {{ value }}
+                        {{ value.name }}
                       </ng-template>
                     </ngx-datatable-column>
                     <ngx-datatable-column
-                      name="roomBuildingId"
+                      name="voltageEntity"
-                      [flexGrow]="1"
-                      [minWidth]="40"
-                    >
-                      <ng-template ngx-datatable-header-template>
-                        <span>roomBuildingId</span>
-                      </ng-template>
-                      <ng-template
-                        ngx-datatable-cell-template
-                        let-value="value"
-                      >
-                        {{ value }}
-                      </ng-template>
-                    </ngx-datatable-column>
-                    <ngx-datatable-column
-                      name="voltageId"
                       [flexGrow]="1"
                       [minWidth]="90"
                     >
                       <ng-template ngx-datatable-header-template>
-                        <span>voltageId</span>
+                        <span>Voltage</span>
                       </ng-template>
                       <ng-template
                         ngx-datatable-cell-template
                         let-value="value"
                       >
-                        {{ value }}
+                        {{ value.name }}
                       </ng-template>
                     </ngx-datatable-column>
                     <ngx-datatable-column
-                      name="statusId"
+                      name="statusEntity"
                       [flexGrow]="1"
                       [minWidth]="90"
                     >
@@ -164,7 +164,7 @@
                         ngx-datatable-cell-template
                         let-value="value"
                       >
-                        {{ value === 2 ? "Aktif" : "Tidak Aktif" }}
+                        {{ value.name }}
                       </ng-template>
                     </ngx-datatable-column>
                     <ngx-datatable-column
@@ -204,7 +204,7 @@
           </div>
         </div>
       </section>
-      <section id="configuration">
+      <!-- <section id="configuration">
         <div class="row">
           <div class="col-lg-6 col-12">
             <div class="card pull-up">
@@ -245,7 +245,7 @@
             </div>
           </div>
         </div>
-      </section>
+      </section> -->
     </div>
   </div>
 </div>

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

@@ -0,0 +1,151 @@
+<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="basic-form-layouts">
+          <div class="row">
+            <div class="col-12" *blockUI="'projectInfo'; message: 'Loading'">
+              <m-card>
+                <ng-container mCardHeaderTitle>
+                  <h2>
+                    {{
+                      isEditMode()
+                        ? "Edit List Monitoring"
+                        : isViewMode()
+                        ? "View List Monitoring"
+                        : "Add New List Monitoring"
+                    }}
+                  </h2>
+                </ng-container>
+                <ng-container mCardBody>
+                  <form
+                    [formGroup]="projectInfo"
+                    (ngSubmit)="onProjectInfoSubmit()"
+                  >
+                    <div class="form-body">
+                      <h4 class="form-section">
+                        <i class="feather ft-user"></i> General Information
+                      </h4>
+                      <div class="row">
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="buildingId">Building *</label>
+                            <div class="input-group">
+                              <select
+                                id="buildingId"
+                                class="form-control"
+                                formControlName="buildingId"
+                                [ngClass]="{
+                                  'is-invalid': submitted && f.buildingId.errors
+                                }"
+                              >
+                                <option
+                                  *ngFor="let data of dataBuildingList"
+                                  [value]="data.id"
+                                >
+                                  {{ data.name }}
+                                </option>
+                              </select>
+                            </div>
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.buildingId.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.buildingId.errors.required">
+                                Building is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="buildingId">Room *</label>
+                            <div class="input-group">
+                              <select
+                                id="buildingId"
+                                class="form-control"
+                                formControlName="buildingId"
+                                [ngClass]="{
+                                  'is-invalid': submitted && f.buildingId.errors
+                                }"
+                              >
+                                <option
+                                  *ngFor="let data of dataRoomList"
+                                  [value]="data.id"
+                                >
+                                  {{ data.name }}
+                                </option>
+                              </select>
+                            </div>
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.buildingId.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.buildingId.errors.required">
+                                Room is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="row">
+                        <div class="col-md-6">
+                          <div class="form-group">
+                            <label for="buildingId">Status *</label>
+                            <div class="input-group">
+                              <select
+                                id="buildingId"
+                                class="form-control"
+                                formControlName="buildingId"
+                                [ngClass]="{
+                                  'is-invalid': submitted && f.buildingId.errors
+                                }"
+                              >
+                                <option
+                                  *ngFor="let data of dataMasterStatus"
+                                  [value]="data.id"
+                                >
+                                  {{ data.name }}
+                                </option>
+                              </select>
+                            </div>
+                            <small
+                              class="form-text text-muted danger"
+                              *ngIf="submitted && f.buildingId.errors"
+                              class="invalid-feedback"
+                            >
+                              <div *ngIf="f.buildingId.errors.required">
+                                Building is required
+                              </div>
+                            </small>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="form-actions">
+                      <button
+                        type="button"
+                        class="btn btn-warning mr-1"
+                        (click)="cancel()"
+                      >
+                        <i class="feather ft-x"></i> Cancel
+                      </button>
+                      <button type="submit" class="btn btn-primary">
+                        <i class="la la-check"></i> Save
+                      </button>
+                    </div>
+                  </form>
+                </ng-container>
+              </m-card>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+  
+  

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddEditListComponent } from './add-edit-list.component';
+
+describe('AddEditListComponent', () => {
+  let component: AddEditListComponent;
+  let fixture: ComponentFixture<AddEditListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddEditListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddEditListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,165 @@
+import { Component, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BlockUI, NgBlockUI } from 'ng-block-ui';
+import { BuildingService } from '../../service/monitoring-api.service';
+
+@Component({
+  selector: 'app-add-edit-list',
+  templateUrl: './add-edit-list.component.html',
+  styleUrls: ['./add-edit-list.component.css']
+})
+export class AddEditListComponent {
+  @ViewChild("f", { read: true }) userProfileForm: NgForm;
+
+  model: any = {};
+  mode: string;
+  public breadcrumb: any;
+  projectInfo: FormGroup;
+  submitted = false;
+
+  dataBuildingList: any;
+  dataRoomList: any;
+  dataMasterStatus: any
+
+  @BlockUI("projectInfo") blockUIProjectInfo: NgBlockUI;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private route: ActivatedRoute,
+    private monitoringApiService: BuildingService,
+  ) {}
+
+  ngOnInit() {
+    this.route.data.subscribe((data) => {
+      this.mode = data.mode;
+    });
+    this.setBreadcrumb();
+    this.dataListBuilding();
+    this.dataListRoom();
+    this.dataListMaster();
+
+    this.projectInfo = this.formBuilder.group({
+      buildingId: ["", Validators.required],
+      roomId: ["", Validators.required],
+      statusId: ["", Validators.required],
+    });
+  }
+
+  setBreadcrumb() {
+    if (this.isAddMode()) {
+      this.breadcrumb = {
+        mainlabel: "Cost Management",
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+          },
+          {
+            name: "Cost Management",
+            isLink: false,
+          },
+          {
+            name: "Add New Cost Management",
+            isLink: false,
+          },
+        ],
+      };
+    } else if (this.isEditMode()) {
+      this.breadcrumb = {
+        mainlabel: "Cost Management",
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+          },
+          {
+            name: "Cost Management",
+            isLink: false,
+          },
+          {
+            name: "Edit New Cost Management",
+            isLink: false,
+          },
+        ],
+      };
+    } else if (this.isViewMode()) {
+      this.breadcrumb = {
+        mainlabel: "Cost Management",
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+          },
+          {
+            name: "Cost Management",
+            isLink: false,
+          },
+          {
+            name: "View New Cost Management",
+            isLink: false,
+          },
+        ],
+      };
+    }
+  }
+
+  isEditMode() {
+    return this.mode === "edit";
+  }
+
+  isViewMode() {
+    return this.mode === "view";
+  }
+
+  isAddMode() {
+    return this.mode === "add";
+  }
+
+  get f() {
+    return this.projectInfo.controls;
+  }
+
+  onProjectInfoSubmit() {
+    this.submitted = true;
+    if (this.projectInfo.invalid) {
+      return;
+    }
+  }
+
+  keyPress(event: any) {
+    const pattern = /[0-9\+\-\ ]/;
+    const inputChar = String.fromCharCode(event.charCode);
+    if (event.keyCode !== 8 && !pattern.test(inputChar)) {
+      event.preventDefault();
+    }
+  }
+
+  dataListBuilding() {
+    this.monitoringApiService.getBuildingList().subscribe(data => {
+      this.dataBuildingList = data.data
+    });
+  }
+  
+  dataListRoom() {
+    this.monitoringApiService.getListRoomData().subscribe(data => {
+      this.dataRoomList = data.data
+    });
+  }
+
+  dataListMaster() {
+    this.monitoringApiService.getMasterListData().subscribe(data => {
+      const dataStatus = data.data.find(
+        (item) => item.name === "master_status"
+      ).headerDetailParam;
+      this.dataMasterStatus = dataStatus.filter(item => item.status === "2")
+    });
+  }
+
+  addData() {}
+
+  cancel() {
+    this.router.navigate(["/list-monitoring"]);
+  }
+}

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

@@ -29,7 +29,7 @@
                     <div class="col-md-6 text-right">
                       <button
                         class="btn btn-secondary"
-                        [routerLink]="['/cost-management/add-row']"
+                        [routerLink]="['/list-monitoring/add-row']"
                       >
                         <i class="feather ft-plus"></i>&nbsp; Add new data
                       </button>
@@ -59,83 +59,41 @@
                           {{ rowIndex + 1 }}
                         </ng-template>
                       </ngx-datatable-column>
+
                       <ngx-datatable-column
-                        name="Name"
+                        name="buildingEntity"
                         [flexGrow]="1"
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span>Estimasi Cost Name</span>
+                          <span>Building</span>
                         </ng-template>
                         <ng-template
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          {{ value }}
+                          {{ value.name }}
                         </ng-template>
                       </ngx-datatable-column>
+
                       <ngx-datatable-column
-                        name="Position"
+                        name="roomEntity"
                         [flexGrow]="1"
                         [minWidth]="90"
                       >
                         <ng-template ngx-datatable-header-template>
-                          <span>Category</span>
+                          <span>Room</span>
                         </ng-template>
                         <ng-template
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          {{ value }}
+                          {{ value.name }}
                         </ng-template>
                       </ngx-datatable-column>
+
                       <ngx-datatable-column
-                        name="Office"
+                        name="statusEntity"
-                        [flexGrow]="1"
-                        [minWidth]="90"
-                      >
-                        <ng-template ngx-datatable-header-template>
-                          <span>Location</span>
-                        </ng-template>
-                        <ng-template
-                          ngx-datatable-cell-template
-                          let-value="value"
-                        >
-                          {{ value }}
-                        </ng-template>
-                      </ngx-datatable-column>
-                      <ngx-datatable-column
-                        name="Age"
-                        [flexGrow]="1"
-                        [minWidth]="40"
-                      >
-                        <ng-template ngx-datatable-header-template>
-                          <span>Location Room</span>
-                        </ng-template>
-                        <ng-template
-                          ngx-datatable-cell-template
-                          let-value="value"
-                        >
-                          {{ value }}
-                        </ng-template>
-                      </ngx-datatable-column>
-                      <ngx-datatable-column
-                        name="Startdate"
-                        [flexGrow]="1"
-                        [minWidth]="90"
-                      >
-                        <ng-template ngx-datatable-header-template>
-                          <span>Duration Use</span>
-                        </ng-template>
-                        <ng-template
-                          ngx-datatable-cell-template
-                          let-value="value"
-                        >
-                          {{ value }}
-                        </ng-template>
-                      </ngx-datatable-column>
-                      <ngx-datatable-column
-                        name="Salary"
                         [flexGrow]="1"
                         [minWidth]="90"
                       >
@@ -146,9 +104,10 @@
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                          {{ value }}
+                          {{ value.name }}
                         </ng-template>
                       </ngx-datatable-column>
+                      
                       <ngx-datatable-column
                         name="Actions"
                         [flexGrow]="1"

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

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { TableApiService } from 'src/app/_services/table-api.service';
+import { BuildingService } from '../service/monitoring-api.service';
 
 @Component({
   selector: 'app-list-monitoring',
@@ -16,7 +17,8 @@ export class ListMonitoringComponent {
 
   constructor(
     private tableApiservice: TableApiService,
-    private router: Router
+    private router: Router,
+    private monitoringApiService: BuildingService
   ) {}
 
   ngOnInit() {
@@ -37,9 +39,12 @@ export class ListMonitoringComponent {
   }
 
   fetchData() {
-    this.tableApiservice.getTableInitialisationData().subscribe((response) => {
+    this.monitoringApiService.getBuildingRoomList().subscribe((res) => {
-      this.data = response;
+      console.log(res);
-      this.filteredRows = this.data.rows;
+      this.data = res;
+      this.filteredRows = this.data.results.data;
+      console.log(this.filteredRows);
+      
     });
   }
 
@@ -64,12 +69,12 @@ export class ListMonitoringComponent {
 
   viewRow(row) {
     console.log("View row:", row);
-    this.router.navigate(["/cost-management/view", row.name]);
+    this.router.navigate(["/list-monitoring/view", row.name]);
   }
 
   editRow(row) {
     console.log("Edit row:", row);
-    this.router.navigate(["/cost-management/edit", row.name]);
+    this.router.navigate(["/list-monitoring/edit", row.name]);
   }
 
   deleteRow(row) {

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

@@ -12,12 +12,14 @@ import { BlockUIModule } from 'ng-block-ui';
 import { BlockTemplateComponent } from '../../../_layout/blockui/block-template.component';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 import { ListMonitoringComponent } from './list-monitoring.component';
+import { AddEditListComponent } from './add-edit-list/add-edit-list.component';
 
 
 
 @NgModule({
   declarations: [
-    ListMonitoringComponent
+    ListMonitoringComponent,
+    AddEditListComponent
   ],
   imports: [
     CommonModule,
@@ -37,7 +39,21 @@ import { ListMonitoringComponent } from './list-monitoring.component';
         path: '',
         component: ListMonitoringComponent
       },
-      
+      {
+        path: 'add-row',
+        component: AddEditListComponent,
+        data: { mode: 'add' }
+      },
+      {
+        path: 'edit/:id',
+        component: AddEditListComponent,
+        data: { mode: 'edit' } 
+      },
+      {
+        path: 'view/:id',
+        component: AddEditListComponent,
+        data: { mode: 'view' } 
+      }
     ])
   ]
 })

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

@@ -1 +1,38 @@
-<p>master-user works!</p>
+<div class="app-content content bg-maintenance-image">
+    <div class="content-wrapper">
+      <div class="content-body">
+        <section class="flexbox-container">
+            <div class="col-12 d-flex align-items-center justify-content-center">
+              <div class="col-md-4 col-10 box-shadow-2 p-0">
+                <div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
+                  <div class="card-body">
+                    <span class="card-title text-center">
+                      <img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
+                        width="250" alt="logo">
+                    </span>
+                  </div>
+                  <div class="card-body text-center">
+                    <h3>This page is under maintenance</h3>
+                    <p>We're sorry for the inconvenience.
+                      <br> Please check back later.</p>
+                    <div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
+                  </div>
+                  <hr>
+                  <!-- <p class="socialIcon card-text text-center pt-2 pb-2">
+                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
+                        class="la la-facebook"></span></a>
+                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
+                        class="la la-twitter"></span></a>
+                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
+                        class="la la-linkedin font-medium-4"></span></a>
+                    <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
+                        class="la la-github font-medium-4"></span></a>
+                  </p> -->
+                </div>
+              </div>
+            </div>
+          </section>
+      </div>
+    </div>
+  </div>
+  

src/app/content/hemat-app/service/monitoring-api.service.ts

@@ -108,6 +108,15 @@ export class BuildingService {
     return this.http.get<any>(url, { headers });
   }
 
+  getBuildingList(): Observable<any> {
+    const url = `https://kapi.absys.ninja/hemat/building/list`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      'x-api-key': 'j2yaYvPSQcsEEmHh3NEobfiXyyXmmnHT'
+    });
+    return this.http.get<any>(url, { headers });
+  }
+
   getListRoomData(): Observable<any> {
     const url = `https://kapi.absys.ninja/hemat/room/list`;
     const headers = new HttpHeaders({

src/app/content/hemat-app/user-access/user-access.component.html

@@ -1,116 +1,34 @@
-<div class="app-content content">
+<div class="app-content content bg-maintenance-image">
   <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">
+      <section class="flexbox-container">
-        <div class="row">
+          <div class="col-12 d-flex align-items-center justify-content-center">
-          <div
+            <div class="col-md-4 col-10 box-shadow-2 p-0">
-            class="col-12"
+              <div class="card border-grey border-lighten-3 px-1 py-1 box-shadow-3 m-0">
-            *blockUI="'zeroConfiguration'; message: 'Loading'"
+                <div class="card-body">
-          >
+                  <span class="card-title text-center">
-            <m-card>
+                    <img src="../../../../assets/images/logo/logo-dark-lg.png" class="img-fluid mx-auto d-block pt-2"
-              <ng-container mCardHeaderTitle>
+                      width="250" alt="logo">
-                User Access Table
+                  </span>
-              </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">
+                <div class="card-body text-center">
-                    <button class="btn btn-secondary">
+                  <h3>This page is under maintenance</h3>
-                      <i class="feather ft-plus"></i>&nbsp; Add new user
+                  <p>We're sorry for the inconvenience.
-                    </button>
+                    <br> Please check back later.</p>
+                  <div class="mt-2"><i class="la la-cog spinner font-large-2"></i></div>
                 </div>
+                <hr>
+                <!-- <p class="socialIcon card-text text-center pt-2 pb-2">
+                  <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span
+                      class="la la-facebook"></span></a>
+                  <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span
+                      class="la la-twitter"></span></a>
+                  <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span
+                      class="la la-linkedin font-medium-4"></span></a>
+                  <a [routerLink]="" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span
+                      class="la la-github font-medium-4"></span></a>
+                </p> -->
               </div>
-                <div class="card-dashboard">
-                  <ngx-datatable
-                    class="bootstrap table-bordered"
-                    [limit]="15"
-                    [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>

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.31.01)</span>
+                  <span>New to Modern ? (v@2024.06.03.01)</span>
                 </p>
                 <div class="card-body">
                   <a