perubahan menu vertical ke horizontal

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

@@ -8,7 +8,7 @@
         <li class="nav-item mobile-menu d-md-none mr-auto" ><a
             class="nav-link nav-menu-main menu-toggle hidden-xs11" (click)="toggleNavigation($event)"><i
               class="feather ft-menu font-large-1" ></i></a></li>
-        <li class="nav-item"><a [routerLink]="['/dashboard/sales']" class="navbar-brand"><img class="brand-logo" alt="modern admin logo"
+        <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>
           </a></li>
@@ -20,7 +20,7 @@
     <div class="navbar-container content">
       <div class="collapse navbar-collapse show" id="navbar-mobile">
         <ul class="nav navbar-nav mr-auto float-left">
-          <li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-menu-main menu-toggle hidden-xs"
+          <!-- <li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-menu-main menu-toggle hidden-xs"
               (click)="toggleFixMenu($event)" ><i class="feather ft-menu"></i></a></li>
           <li class="nav-item d-none d-md-block"><a [routerLink]="" class="nav-link nav-link-expand"
               (click)="toggleFullScreen()" *ngIf ="maximize === 'on'"><i class="ficon feather ft-maximize"></i></a></li>
@@ -29,10 +29,10 @@
             <div class="search-input" [ngClass]="{'open': isHeaderSearchOpen}">
               <input class="input" type="text" placeholder="Explore Modern...">
             </div>
-          </li>
+          </li> -->
         </ul>
         <ul class="nav navbar-nav float-right" >
-          <li class="dropdown-language nav-item" ngbDropdown *ngIf ="internationalization === 'on'">
+          <!-- <li class="dropdown-language nav-item" ngbDropdown *ngIf ="internationalization === 'on'">
             <a [routerLink]="" class="dropdown-toggle nav-link" ngbDropdownToggle id="dropdown-flag">
               <i class="flag-icon flag-icon-gb"></i><span class="selected-language"></span>
             </a>
@@ -50,8 +50,8 @@
                 <i class="flag-icon flag-icon-de"></i> German
               </a>
             </div>
-          </li>
+          </li> -->
-          <li class="dropdown-notification nav-item dropdown" ngbDropdown *ngIf ="notification === 'on'">
+          <!-- <li class="dropdown-notification nav-item dropdown" ngbDropdown *ngIf ="notification === 'on'">
             <a class="nav-link nav-link-label" ngbDropdownToggle>
               <i class="ficon feather ft-bell"></i>
               <span class="badge badge-pill badge-danger badge-up badge-glow">5</span>
@@ -124,8 +124,8 @@
               <li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
                   href="javascript:void(0)">Read all notifications</a></li>
             </ul>
-          </li>
+          </li> -->
-          <li class="dropdown-notification nav-item" ngbDropdown *ngIf ="email === 'on'">
+          <!-- <li class="dropdown-notification nav-item" ngbDropdown *ngIf ="email === 'on'">
             <a class="nav-link nav-link-label" ngbDropdownToggle><i class="ficon feather ft-mail"></i></a>
             <ul class="dropdown-menu-media dropdown-menu-right" ngbDropdownMenu>
               <li class="dropdown-menu-header">
@@ -185,7 +185,7 @@
               <li class="dropdown-menu-footer"><a class="dropdown-item text-muted text-center"
                   href="javascript:void(0)">Read all messages</a></li>
             </ul>
-          </li>
+          </li> -->
 
           <li class="dropdown-user nav-item" ngbDropdown>
             <a class="nav-link dropdown-user-link" ngbDropdownToggle>

src/app/_layout/settings/menu-settings.config.ts

@@ -26,6 +26,64 @@ export interface MenuConfig {
 export const MenuSettingsConfig: MenuConfig = {
   horizontal_menu: {  
     items: [
+      {
+        title: 'Monitoring',
+        icon: 'feather ft-monitor',
+        page: '/monitoring',
+        // submenu: {
+        //   items: [
+        //    {
+        //       title: 'Monitoring Building',
+        //       page: '/monitoring/monitoring-building'
+        //     },
+        //     {
+        //       title: 'Monitoring Room',
+        //       page: '/monitoring/monitoring-room'
+        //     },           
+        //   ]
+        // }
+      },
+      {
+        title: 'Device',
+        icon: 'feather ft-life-buoy',
+        page: '/device'
+      },
+      {
+        title: 'Cost Management',
+        icon: 'feather ft-bar-chart-2',
+        page: '/cost-management'
+      },
+      {
+        title: 'User Access',
+        icon: 'feather ft-user-check',
+        page: '/user-access'
+      },
+      {
+        title: 'Master',
+        icon: 'feather ft-server',
+        page: 'null',
+        submenu: {
+          items: [
+           {
+              title: 'Master Category',
+              page: '/master/master-category'
+            },
+            {
+              title: 'Master Location',
+              page: '/master/master-location'
+            },
+            {
+              title: 'Master Location Room',
+              page: '/master/master-location-room'
+            },
+            {
+              title: 'Master Type',
+              page: '/master/master-type'
+            }           
+          ]
+        }
+      },
+      
       {
         title: 'Dashboard',
         icon: 'la-home',
@@ -51,23 +109,23 @@ export const MenuSettingsConfig: MenuConfig = {
           ]
         }
       },
-      // {
+      {
-      //   title: 'Templates',
+        title: 'Templates',
-      //   icon: 'la-television',
+        icon: 'la-television',
-      //   page: 'null',
+        page: 'null',
-      //   submenu: {
+        submenu: {
-      //     items: [
+          items: [
-      //       {
+            {
-      //         title: 'Horizontal',
+              title: 'Horizontal',
-      //         page: 'null'
+              page: 'null'
-      //       },
+            },
-      //       {
+            {
-      //         title: 'Vertical',
+              title: 'Vertical',
-      //         page: 'null'
+              page: 'null'
-      //       },
+            },
-      //     ]
+          ]
-      //   }
+        }
-      // },
+      },
       {
         title: 'APPS',
         icon: 'la-mobile',
@@ -854,25 +912,6 @@ export const MenuSettingsConfig: MenuConfig = {
 
   vertical_menu: {
     items: [
-      
-      // {
-      //   title: 'Templates',
-      //   icon: 'la-television',
-      //   page: 'null',
-      //   submenu: {
-      //     items: [
-      //       {
-      //         title: 'Horizontal',
-      //         page: 'null'
-      //       },
-      //       {
-      //         title: 'Vertical',
-      //         page: 'null'
-      //       },
-      //     ]
-      //   }
-      // },
-      
       // { section: 'Hemat', icon: 'la-ellipsis-h' },
 
       {
@@ -956,6 +995,23 @@ export const MenuSettingsConfig: MenuConfig = {
           ]
         }
       },
+      {
+        title: 'Templates',
+        icon: 'la-television',
+        page: 'null',
+        submenu: {
+          items: [
+            {
+              title: 'Horizontal',
+              page: 'null'
+            },
+            {
+              title: 'Vertical',
+              page: 'null'
+            },
+          ]
+        }
+      },
       {
         title: 'To Do',
         icon: 'la-edit',

src/app/_layout/settings/theme-settings.config.ts

@@ -3,7 +3,7 @@
 export const ThemeSettingsConfig = {
   colorTheme: 'semi-dark', // light, semi-light, semi-dark, dark
   layout: {
-    style: 'vertical', // style: 'vertical', horizontal,
+    style: 'horizontal', // style: 'vertical', horizontal,
     pattern: 'fixed' // fixed, boxed, static
   },
   menuColor: 'menu-dark', // Vertical: [menu-dark, menu-light] , Horizontal: [navbar-dark, navbar-light]

src/app/content/hemat-app/device/device.component.html

@@ -42,7 +42,7 @@
                 <div class="card-dashboard">
                   <ngx-datatable
                     class="bootstrap table-bordered"
-                    [limit]="10"
+                    [limit]="15"
                     [rows]="filteredRows"
                     [columnMode]="'force'"
                     [headerHeight]="50"
@@ -190,6 +190,44 @@
           </div>
         </div>
       </section>
+      <section id="configuration">
+        <div class="row">
+          <div class="col-lg-6 col-12">
+            <div class="card pull-up">
+              <div class="card-content">
+                <div class="card-body">
+                  <div class="media d-flex">
+                    <div class="media-body text-left">
+                      <h6 class="text-muted">Total Use </h6>
+                      <h3>3,568</h3>
+                    </div>
+                    <div class="align-self-center">
+                      <i class="feather ft-zap danger font-large-2 float-right"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-lg-6 col-12">
+            <div class="card pull-up">
+              <div class="card-content">
+                <div class="card-body">
+                  <div class="media d-flex">
+                    <div class="media-body text-left">
+                      <h6 class="text-muted">Estimation Cost</h6>
+                      <h3>Rp 1.000.000.000.000</h3>
+                    </div>
+                    <div class="align-self-center">
+                      <i class="feather ft-trending-up success font-large-2 float-right"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
     </div>
   </div>
 </div>

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

@@ -4,6 +4,117 @@
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
     </div>
     <div class="content-body">
+      <div class="row" matchHeight="card">
+        <div class="col-xl-4 col-md-6 col-sm-12">
+          <div class="card">
+            <div class="card-content">
+              <img
+                class="card-img-top img-fluid"
+                src="../../../assets/images/carousel/05.jpg"
+                alt="Card image cap"
+              />
+              <div class="card-body">
+                <h4 class="card-title">Basic</h4>
+                <p class="card-text">
+                  Some quick example text to build on the card title and make up
+                  the bulk of the card's content.
+                </p>
+                <a [routerLink]="" class="btn btn-outline-pink">Go somewhere</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-4 col-md-6 col-sm-12">
+          <div class="card">
+            <div class="card-content">
+              <div class="card-body">
+                <h4 class="card-title">List Group</h4>
+                <p class="card-text">
+                  Some quick example text to build on the card title and make up
+                  the bulk of the card's content.
+                </p>
+              </div>
+              <ul class="list-group list-group-flush">
+                <li class="list-group-item">
+                  <span
+                    class="badge badge-default badge-pill bg-primary float-right"
+                    >4</span
+                  >
+                  Cras justo odio
+                </li>
+                <li class="list-group-item">
+                  <span
+                    class="badge badge-default badge-pill bg-info float-right"
+                    >2</span
+                  >
+                  Dapibus ac facilisis in
+                </li>
+                <li class="list-group-item">
+                  <span
+                    class="badge badge-default badge-pill bg-warning float-right"
+                    >1</span
+                  >
+                  Morbi leo risus
+                </li>
+                <li class="list-group-item">
+                  <span
+                    class="badge badge-default badge-pill bg-success float-right"
+                    >3</span
+                  >
+                  Porta ac consectetur ac
+                </li>
+                <li class="list-group-item">
+                  <span
+                    class="badge badge-default badge-pill bg-danger float-right"
+                    >8</span
+                  >
+                  Vestibulum at eros
+                </li>
+              </ul>
+              <div class="card-body">
+                <a [routerLink]="" class="card-link info">Card link</a>
+                <a [routerLink]="" class="card-link info">Another link</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-xl-4 col-md-12 col-sm-12">
+          <div class="card">
+            <div class="card-content">
+              <div class="card-body">
+                <h4 class="card-title">Carousel</h4>
+                <h6 class="card-subtitle text-muted">Support card subtitle</h6>
+              </div>
+              <div
+                id="carousel-example-generic"
+                class="carousel slide"
+                data-ride="carousel"
+              >
+                <div class="carousel-inner" role="listbox">
+                  <ngb-carousel *ngIf="carouselOne">
+                    <ng-template ngbSlide>
+                      <img [src]="carouselOne[0]" class="d-block w-100" />
+                    </ng-template>
+                    <ng-template ngbSlide>
+                      <img [src]="carouselOne[1]" class="d-block w-100" />
+                    </ng-template>
+                    <ng-template ngbSlide>
+                      <img [src]="carouselOne[2]" class="d-block w-100" />
+                    </ng-template>
+                  </ngb-carousel>
+                </div>
+              </div>
+              <div class="card-body">
+                <p class="card-text">
+                  Some quick example text to build on the card title and make up
+                  the bulk of the card's content.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       <div class="card">
         <div class="card-header">
           <h4 class="card-title">Sales and Expenses</h4>

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

@@ -28,6 +28,60 @@ export class DetailComponent {
   ) {}
   @BlockUI("totalReceivables") blockUITotalReceivables: NgBlockUI;
   @BlockUI("salesRecieptsDues") blockUISalesRecieptsDues: NgBlockUI;
+  carouselOne = [
+    '../../../assets/images/carousel/02.jpg',
+    '../../../assets/images/carousel/03.jpg',
+    '../../../assets/images/carousel/01.jpg'
+  ];
+
+  ngOnInit() {
+    this.route.data.subscribe((data) => {
+      this.mode = data.mode;
+    });
+    if (this.mode === "room") {
+      this.breadcrumb = {
+        mainlabel: "Detail Monitoring",
+        linkBack: "/monitoring/monitoring-room",
+        isLinkBack: true,
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+            link: "",
+          },
+          {
+            name: "Detail Monitoring",
+            isLink: false,
+            link: "",
+          },
+        ],
+      };
+    } else {
+      this.breadcrumb = {
+        mainlabel: "Detail Monitoring",
+        linkBack: "/monitoring",
+        isLinkBack: true,
+        links: [
+          {
+            name: "Home",
+            isLink: false,
+            link: "",
+          },
+          {
+            name: "Detail Monitoring",
+            isLink: false,
+            link: "",
+          },
+        ],
+      };
+    }
+
+    this.chartApiservice.getInvoiceData().subscribe((Response) => {
+      this.data = Response;
+      this.getInvoicechart();
+    });
+  }
+
   getInvoicechart() {
     this.Sales = this.data["sales"];
     this.chartOption = {
@@ -153,53 +207,6 @@ export class DetailComponent {
       ],
     };
   }
-  ngOnInit() {
-    this.route.data.subscribe((data) => {
-      this.mode = data.mode;
-    });
-    if (this.mode === "room") {
-      this.breadcrumb = {
-        mainlabel: "Detail Monitoring",
-        linkBack: "/monitoring/monitoring-room",
-        isLinkBack: true,
-        links: [
-          {
-            name: "Home",
-            isLink: false,
-            link: "",
-          },
-          {
-            name: "Detail Monitoring",
-            isLink: false,
-            link: "",
-          },
-        ],
-      };
-    } else {
-      this.breadcrumb = {
-        mainlabel: "Detail Monitoring",
-        linkBack: "/monitoring",
-        isLinkBack: true,
-        links: [
-          {
-            name: "Home",
-            isLink: false,
-            link: "",
-          },
-          {
-            name: "Detail Monitoring",
-            isLink: false,
-            link: "",
-          },
-        ],
-      };
-    }
-
-    this.chartApiservice.getInvoiceData().subscribe((Response) => {
-      this.data = Response;
-      this.getInvoicechart();
-    });
-  }
 
   reloadTotalReceivables() {
     this.blockUITotalReceivables.start("Loading..");

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

@@ -19,6 +19,8 @@ import { AddNewBuildingRoomComponent } from './add-new-building-room/add-new-bui
 import { ArchwizardModule } from 'angular-archwizard';
 import { DetailComponent } from './detail/detail.component';
 import { NgxEchartsModule } from 'ngx-echarts';
+import { NgxPhotoswipeModule } from '@fnxone/ngx-photoswipe';
+import { NgxMasonryModule } from 'ngx-masonry';
 
 @NgModule({
   declarations: [
@@ -41,10 +43,11 @@ import { NgxEchartsModule } from 'ngx-echarts';
     ArchwizardModule,
     BreadcrumbModule,
     NgbModule,
+    NgxPhotoswipeModule,
+    NgxMasonryModule,
     NgxEchartsModule.forRoot({
       echarts: () => import('echarts')
     }),
-
     BlockUIModule.forRoot({
       template: BlockTemplateComponent
     }),

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

@@ -35,7 +35,7 @@
                 <div class="card-dashboard">
                   <ngx-datatable
                     class="bootstrap table-bordered"
-                    [limit]="10"
+                    [limit]="15"
                     [rows]="filteredRows"
                     [columnMode]="'force'"
                     [headerHeight]="50"

src/assets/data/hemat/monitoring.json

@@ -68,5 +68,23 @@
     "buttonname": "Mobile",
     "amount": "$ 999.00",
     "bagde": "+3 more"
+  },
+  {
+    "id": 9,
+    "type": "warning",
+    "value": 75,
+    "product": "Ruang Kepala Humas",
+    "buttonname": "Teblet",
+    "amount": "$ 1190.00",
+    "bagde": "+5 more"
+  },
+  {
+    "id": 10,
+    "type": "success",
+    "value": 65,
+    "product": "Ruang Hrd",
+    "buttonname": "Mobile",
+    "amount": "$ 999.00",
+    "bagde": "+3 more"
   }
 ]