From ee2b7e35e60527c3a02edea351edbf6f11133b33 Mon Sep 17 00:00:00 2001
From: Fuzi_fauzia <fuzi.fauzia@allbestsistem.com>
Date: Fri, 26 Apr 2024 15:28:14 +0700
Subject: [PATCH] penambahan button back pada breadcrumb

---
 .../breadcrumb/breadcrumb.component.html      |  18 +-
 .../_layout/settings/menu-settings.config.ts  |  97 +++++----
 .../monitoring/detail/detail.component.html   | 206 ++++++++++++++----
 .../monitoring/detail/detail.component.ts     |   2 +
 .../monitoring/room/room.component.ts         |   2 +
 5 files changed, 235 insertions(+), 90 deletions(-)

diff --git a/src/app/_layout/breadcrumb/breadcrumb.component.html b/src/app/_layout/breadcrumb/breadcrumb.component.html
index d622f11..3e170af 100644
--- a/src/app/_layout/breadcrumb/breadcrumb.component.html
+++ b/src/app/_layout/breadcrumb/breadcrumb.component.html
@@ -1,12 +1,22 @@
 <div class="row">
-  <div class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new" *ngIf="breadcrumb">
-    <h3 class="content-header-title mb-0 d-inline-block">{{breadcrumb.mainlabel}}</h3>
+  <div
+    class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new"
+    *ngIf="breadcrumb"
+  >
+    <button *ngIf="breadcrumb.isLinkBack" type="button" class="btn btn-icon btn-pure secondary mr-1" routerLink="{{ breadcrumb.linkBack }}">
+      <i class="feather ft-chevron-left"></i>
+    </button>
+    <h3 class="content-header-title mb-0 d-inline-block">
+      {{ breadcrumb.mainlabel }}
+    </h3>
     <div class="row breadcrumbs-top d-inline-block">
       <div class="breadcrumb-wrapper col-12">
         <ol class="breadcrumb">
           <li class="breadcrumb-item" *ngFor="let link of breadcrumb.links">
-            <a *ngIf="link.isLink" routerLink="{{link.link}}">{{link.name}}</a>
-            <span *ngIf="!link.isLink">{{link.name}}</span>
+            <a *ngIf="link.isLink" routerLink="{{ link.link }}">{{
+              link.name
+            }}</a>
+            <span *ngIf="!link.isLink">{{ link.name }}</span>
           </li>
         </ol>
       </div>
diff --git a/src/app/_layout/settings/menu-settings.config.ts b/src/app/_layout/settings/menu-settings.config.ts
index 2b937eb..3e1637c 100644
--- a/src/app/_layout/settings/menu-settings.config.ts
+++ b/src/app/_layout/settings/menu-settings.config.ts
@@ -854,28 +854,7 @@ export const MenuSettingsConfig: MenuConfig = {
 
   vertical_menu: {
     items: [
-      {
-        title: 'Dashboard',
-        icon: 'la-home',
-        page: 'null',
-        badge: { type: 'badge-info', value: '3' },
-        submenu: {
-          items: [
-           {
-              title: 'Sales',
-              page: '/dashboard/sales'
-            },
-            {
-              title: 'Ecommerce',
-              page: '/dashboard/ecommerce'
-            },
-            {
-              title: 'Hospital',
-              page: '/dashboard/hospital'
-            }           
-          ]
-        }
-      },
+      
       // {
       //   title: 'Templates',
       //   icon: 'la-television',
@@ -894,7 +873,7 @@ export const MenuSettingsConfig: MenuConfig = {
       //   }
       // },
       
-      { section: 'Hemat', icon: 'la-ellipsis-h' },
+      // { section: 'Hemat', icon: 'la-ellipsis-h' },
 
       {
         title: 'Monitoring',
@@ -955,6 +934,28 @@ export const MenuSettingsConfig: MenuConfig = {
       },
 
       { section: 'APPS', icon: 'la-ellipsis-h' },
+      {
+        title: 'Dashboard',
+        icon: 'la-home',
+        page: 'null',
+        badge: { type: 'badge-info', value: '3' },
+        submenu: {
+          items: [
+           {
+              title: 'Sales',
+              page: '/dashboard/sales'
+            },
+            {
+              title: 'Ecommerce',
+              page: '/dashboard/ecommerce'
+            },
+            {
+              title: 'Hospital',
+              page: '/dashboard/hospital'
+            }           
+          ]
+        }
+      },
       {
         title: 'To Do',
         icon: 'la-edit',
@@ -1645,31 +1646,31 @@ export const MenuSettingsConfig: MenuConfig = {
         icon: 'la-pie-chart',
         page: '/ngchartist/linecharts'
       },
-      {
-        title: 'Starter Kit',
-        icon: 'la-puzzle-piece',
-        page: 'https://modern-admin-8453e.firebaseapp.com/changelog',
-        isStarterkitExternalLink: true,
-      },
-      {
-        title: 'Changelog',
-        icon: 'la-file',
-        page: '/changelog',
-        badge: { type: 'badge-danger', value: '3.5' }
-      },
-      { section: 'SUPPORT', icon: 'la-ellipsis-h' },
-      {
-        title: 'Raise Support',
-        icon: 'la-support',
-        page: 'https://pixinvent.ticksy.com/',
-        isExternalLink: true
-      },
-      {
-        title: 'Documentaion',
-        icon: 'la-text-height',
-        page: 'https://modern-admin-docs.web.app/html/ltr/documentation/index.html',
-        isExternalLink: true,
-      }
+      // {
+      //   title: 'Starter Kit',
+      //   icon: 'la-puzzle-piece',
+      //   page: 'https://modern-admin-8453e.firebaseapp.com/changelog',
+      //   isStarterkitExternalLink: true,
+      // },
+      // {
+      //   title: 'Changelog',
+      //   icon: 'la-file',
+      //   page: '/changelog',
+      //   badge: { type: 'badge-danger', value: '3.5' }
+      // },
+      // { section: 'SUPPORT', icon: 'la-ellipsis-h' },
+      // {
+      //   title: 'Raise Support',
+      //   icon: 'la-support',
+      //   page: 'https://pixinvent.ticksy.com/',
+      //   isExternalLink: true
+      // },
+      // {
+      //   title: 'Documentaion',
+      //   icon: 'la-text-height',
+      //   page: 'https://modern-admin-docs.web.app/html/ltr/documentation/index.html',
+      //   isExternalLink: true,
+      // }
     ]
   }
 
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.html b/src/app/content/hemat-app/monitoring/detail/detail.component.html
index 8b92db1..183c647 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.html
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html
@@ -73,7 +73,7 @@
         </div>
       </div>
       <!--/ Sales and Expenses -->
-      <div class="row" matchHeight="card">
+      <div class="row">
         <!-- Your Top Expenses -->
         <div class="col-lg-6 col-md-12">
           <div class="card">
@@ -118,45 +118,175 @@
         </div>
         <!-- Your Top Expenses -->
         <!-- Sales, Receipts and Dues -->
-        <div
-          class="col-lg-6 col-md-12"
-          *blockUI="'salesRecieptsDues'; message: 'Loading'"
-        >
-          <m-card
-            [options]="options"
-            (reloadFunction)="reloadSalesRecieptsDues($event)"
-          >
-            <ng-container mCardHeaderTitle>
-              Sales, Receipts and Dues
-            </ng-container>
-
-            <ng-container mCardBody>
-              <div class="px-0 py-0">
-                <div class="table-responsive">
-                  <table class="table table-hover">
-                    <thead>
-                      <tr>
-                        <th></th>
-                        <th>Sales</th>
-                        <th>Receipts</th>
-                        <th>Due</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr *ngFor="let element of Sales; index as i">
-                        <td>
-                          <b>{{ element.name }}</b>
-                        </td>
-                        <td>{{ element.sales }}</td>
-                        <td>{{ element.receipts }}</td>
-                        <td>{{ element.due }}</td>
-                      </tr>
-                    </tbody>
-                  </table>
+        <div class="col-lg-6 col-md-12">
+          <div class="row">
+            <div class="col-xl-4 col-lg-6 col-12">
+              <div class="card pull-up">
+                <div class="card-content">
+                  <div class="card-body card_padding">
+                    <div class="media d-flex">
+                      <div class="media-body text-left">
+                        <h3 class="info">850</h3>
+                        <h6>Products Sold</h6>
+                      </div>
+                      <div>
+                        <i
+                          class="icon-basket-loaded info font-large-2 float-right"
+                        ></i>
+                      </div>
+                    </div>
+                    <div class="mb-0 mt-1">
+                      <ngb-progressbar
+                        height="7px"
+                        width="100%"
+                        type="gradient-x-info"
+                        [value]="80"
+                      ></ngb-progressbar>
+                    </div>
+                  </div>
                 </div>
               </div>
-            </ng-container>
-          </m-card>
+            </div>
+            <div class="col-xl-4 col-lg-6 col-12">
+              <div class="card pull-up">
+                <div class="card-content">
+                  <div class="card-body card_padding">
+                    <div class="media d-flex">
+                      <div class="media-body text-left">
+                        <h3 class="warning">$748</h3>
+                        <h6>Net Profit</h6>
+                      </div>
+                      <div>
+                        <i
+                          class="icon-pie-chart warning font-large-2 float-right"
+                        ></i>
+                      </div>
+                    </div>
+                    <div class="mb-0 mt-1">
+                      <ngb-progressbar
+                        height="7px"
+                        width="100%"
+                        type="gradient-x-warning"
+                        [value]="65"
+                      >
+                      </ngb-progressbar>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-xl-4 col-lg-6 col-12">
+              <div class="card pull-up">
+                <div class="card-content">
+                  <div class="card-body card_padding">
+                    <div class="media d-flex">
+                      <div class="media-body text-left">
+                        <h3 class="warning">$748</h3>
+                        <h6>Net Profit</h6>
+                      </div>
+                      <div>
+                        <i
+                          class="icon-pie-chart warning font-large-2 float-right"
+                        ></i>
+                      </div>
+                    </div>
+                    <div class="mb-0 mt-1">
+                      <ngb-progressbar
+                        height="7px"
+                        width="100%"
+                        type="gradient-x-warning"
+                        [value]="65"
+                      >
+                      </ngb-progressbar>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-xl-4 col-lg-6 col-12">
+              <div class="card pull-up">
+                <div class="card-content">
+                  <div class="card-body card_padding">
+                    <div class="media d-flex">
+                      <div class="media-body text-left">
+                        <h3 class="info">850</h3>
+                        <h6>Products Sold</h6>
+                      </div>
+                      <div>
+                        <i
+                          class="icon-basket-loaded info font-large-2 float-right"
+                        ></i>
+                      </div>
+                    </div>
+                    <div class="mb-0 mt-1">
+                      <ngb-progressbar
+                        height="7px"
+                        width="100%"
+                        type="gradient-x-info"
+                        [value]="80"
+                      ></ngb-progressbar>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-xl-4 col-lg-6 col-12">
+              <div class="card pull-up">
+                <div class="card-content">
+                  <div class="card-body card_padding">
+                    <div class="media d-flex">
+                      <div class="media-body text-left">
+                        <h3 class="warning">$748</h3>
+                        <h6>Net Profit</h6>
+                      </div>
+                      <div>
+                        <i
+                          class="icon-pie-chart warning font-large-2 float-right"
+                        ></i>
+                      </div>
+                    </div>
+                    <div class="mb-0 mt-1">
+                      <ngb-progressbar
+                        height="7px"
+                        width="100%"
+                        type="gradient-x-warning"
+                        [value]="65"
+                      >
+                      </ngb-progressbar>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="col-xl-4 col-lg-6 col-12">
+              <div class="card pull-up">
+                <div class="card-content">
+                  <div class="card-body card_padding">
+                    <div class="media d-flex">
+                      <div class="media-body text-left">
+                        <h3 class="warning">$748</h3>
+                        <h6>Net Profit</h6>
+                      </div>
+                      <div>
+                        <i
+                          class="icon-pie-chart warning font-large-2 float-right"
+                        ></i>
+                      </div>
+                    </div>
+                    <div class="mb-0 mt-1">
+                      <ngb-progressbar
+                        height="7px"
+                        width="100%"
+                        type="gradient-x-warning"
+                        [value]="65"
+                      >
+                      </ngb-progressbar>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
         <!-- Sales, Receipts and Dues -->
       </div>
diff --git a/src/app/content/hemat-app/monitoring/detail/detail.component.ts b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
index a8c50cc..28f91b4 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -150,6 +150,8 @@ export class DetailComponent {
   ngOnInit() {
     this.breadcrumb = {
       mainlabel: "Detail Monitoring",
+      linkBack: '/monitoring',
+      isLinkBack: true,
       links: [
         {
           name: "Home",
diff --git a/src/app/content/hemat-app/monitoring/room/room.component.ts b/src/app/content/hemat-app/monitoring/room/room.component.ts
index 18c2630..83e889c 100644
--- a/src/app/content/hemat-app/monitoring/room/room.component.ts
+++ b/src/app/content/hemat-app/monitoring/room/room.component.ts
@@ -25,6 +25,8 @@ export class RoomComponent implements OnInit {
     });
     this.breadcrumb = {
       mainlabel: "Room",
+      linkBack: '/monitoring',
+      isLinkBack: true,
       links: [
         {
           name: "Dashboard",