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 e37d497..0eae154 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.html
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.html
@@ -4,22 +4,83 @@
       <app-breadcrumb class="col-12" [breadcrumb]="breadcrumb"></app-breadcrumb>
     </div>
     <div class="content-body">
-      <div class="row" matchHeight="card">
+      <div class="row">
         <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 class="p-1 text-center">
+                <div>
+                  <h3 class="display-4 blue-grey darken-1">34,879</h3>
+                  <span class="blue-grey darken-1">Total Likes</span>
+                </div>
+                <div class="card-content">
+                  <!-- <div id="morris-likes" style="height:75px;"> -->
+                  <x-chartist
+                    *ngIf="lineArea"
+                    class="Likes"
+                    [data]="lineArea.data"
+                    [type]="lineArea.type"
+                    [options]="lineArea.options"
+                    [responsiveOptions]="lineArea.responsiveOptions"
+                    [events]="lineArea.events"
+                  >
+                  </x-chartist>
+                  <ul class="list-inline clearfix">
+                    <li
+                      class="border-right-blue-grey border-right-lighten-2 pr-1"
+                    >
+                      <h1 class="success text-bold-400">4789</h1>
+                      <span class="blue-grey darken-1"
+                        ><i class="la la-caret-up"></i> Per Post</span
+                      >
+                    </li>
+                    <li class="pl-1">
+                      <h1 class="success text-bold-400">389</h1>
+                      <span class="blue-grey darken-1"
+                        ><i class="la la-caret-down"></i> Today</span
+                      >
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card">
+            <div class="card-content">
+              <div class="p-1 text-center">
+                <div>
+                  <h3 class="display-4 blue-grey darken-1">34,879</h3>
+                  <span class="blue-grey darken-1">Total Likes</span>
+                </div>
+                <div class="card-content">
+                  <!-- <div id="morris-likes" style="height:75px;"> -->
+                  <x-chartist
+                    *ngIf="lineArea"
+                    class="Likes"
+                    [data]="lineArea.data"
+                    [type]="lineArea.type"
+                    [options]="lineArea.options"
+                    [responsiveOptions]="lineArea.responsiveOptions"
+                    [events]="lineArea.events"
+                  >
+                  </x-chartist>
+                  <ul class="list-inline clearfix">
+                    <li
+                      class="border-right-blue-grey border-right-lighten-2 pr-1"
+                    >
+                      <h1 class="success text-bold-400">4789</h1>
+                      <span class="blue-grey darken-1"
+                        ><i class="la la-caret-up"></i> Per Post</span
+                      >
+                    </li>
+                    <li class="pl-1">
+                      <h1 class="success text-bold-400">389</h1>
+                      <span class="blue-grey darken-1"
+                        ><i class="la la-caret-down"></i> Today</span
+                      >
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
           </div>
@@ -27,53 +88,85 @@
         <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 class="row">
+                <div class="media align-items-stretch">
+                  <div
+                    class="p-2 text-center bg-success bg-darken-2 rounded-left"
+                  >
+                    <i class="icon-wallet font-large-2 text-white"></i>
+                  </div>
+                  <div
+                    class="p-2 bg-success text-white media-body rounded-right"
+                  >
+                    <h5 class="text-white">Total Profit</h5>
+                    <h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
+                    <input type="range" style="width: 100%" />
+                  </div>
+                </div>
               </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
+              <div class="row">
+                <div class="media align-items-stretch">
+                  <div
+                    class="p-2 text-center bg-success bg-darken-2 rounded-left"
                   >
-                  Cras justo odio
-                </li>
-                <li class="list-group-item">
-                  <span
-                    class="badge badge-default badge-pill bg-info float-right"
-                    >2</span
+                    <i class="icon-wallet font-large-2 text-white"></i>
+                  </div>
+                  <div
+                    class="p-2 bg-success text-white media-body rounded-right"
                   >
-                  Dapibus ac facilisis in
-                </li>
-                <li class="list-group-item">
-                  <span
-                    class="badge badge-default badge-pill bg-warning float-right"
-                    >1</span
+                    <h5 class="text-white">Total Profit</h5>
+                    <h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
+                    <input type="range" style="width: 100%" />
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="media align-items-stretch">
+                  <div
+                    class="p-2 text-center bg-success bg-darken-2 rounded-left"
                   >
-                  Morbi leo risus
-                </li>
-                <li class="list-group-item">
-                  <span
-                    class="badge badge-default badge-pill bg-success float-right"
-                    >3</span
+                    <i class="icon-wallet font-large-2 text-white"></i>
+                  </div>
+                  <div
+                    class="p-2 bg-success text-white media-body rounded-right"
                   >
-                  Porta ac consectetur ac
-                </li>
-                <li class="list-group-item">
-                  <span
-                    class="badge badge-default badge-pill bg-danger float-right"
-                    >8</span
+                    <h5 class="text-white">Total Profit</h5>
+                    <h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
+                    <input type="range" style="width: 100%" />
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="media align-items-stretch">
+                  <div
+                    class="p-2 text-center bg-success bg-darken-2 rounded-left"
                   >
-                  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>
+                    <i class="icon-wallet font-large-2 text-white"></i>
+                  </div>
+                  <div
+                    class="p-2 bg-success text-white media-body rounded-right"
+                  >
+                    <h5 class="text-white">Total Profit</h5>
+                    <h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
+                    <input type="range" style="width: 100%" />
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="media align-items-stretch">
+                  <div
+                    class="p-2 text-center bg-success bg-darken-2 rounded-left"
+                  >
+                    <i class="icon-wallet font-large-2 text-white"></i>
+                  </div>
+                  <div
+                    class="p-2 bg-success text-white media-body rounded-right"
+                  >
+                    <h5 class="text-white">Total Profit</h5>
+                    <h5 class="text-white text-bold-400 mb-0">5.6 M</h5>
+                    <input type="range" style="width: 100%" />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -104,12 +197,6 @@
                   </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>
@@ -247,12 +334,13 @@
                       </div>
                     </div>
                     <div class="mb-0 mt-1">
-                      <ngb-progressbar
-                        height="7px"
-                        width="100%"
-                        type="gradient-x-info"
-                        [value]="80"
-                      ></ngb-progressbar>
+                      <ui-switch
+                        class="switchery"
+                        switchColor="white"
+                        color="rgb(55, 188, 155)"
+                        size="small"
+                        checked
+                      ></ui-switch>
                     </div>
                   </div>
                 </div>
@@ -274,13 +362,13 @@
                       </div>
                     </div>
                     <div class="mb-0 mt-1">
-                      <ngb-progressbar
-                        height="7px"
-                        width="100%"
-                        type="gradient-x-warning"
-                        [value]="65"
-                      >
-                      </ngb-progressbar>
+                      <ui-switch
+                        class="switchery"
+                        switchColor="white"
+                        color="rgb(55, 188, 155)"
+                        size="small"
+                        checked
+                      ></ui-switch>
                     </div>
                   </div>
                 </div>
@@ -302,13 +390,13 @@
                       </div>
                     </div>
                     <div class="mb-0 mt-1">
-                      <ngb-progressbar
-                        height="7px"
-                        width="100%"
-                        type="gradient-x-warning"
-                        [value]="65"
-                      >
-                      </ngb-progressbar>
+                      <ui-switch
+                        class="switchery"
+                        switchColor="white"
+                        color="rgb(55, 188, 155)"
+                        size="small"
+                        checked
+                      ></ui-switch>
                     </div>
                   </div>
                 </div>
@@ -330,12 +418,13 @@
                       </div>
                     </div>
                     <div class="mb-0 mt-1">
-                      <ngb-progressbar
-                        height="7px"
-                        width="100%"
-                        type="gradient-x-info"
-                        [value]="80"
-                      ></ngb-progressbar>
+                      <ui-switch
+                        class="switchery"
+                        switchColor="white"
+                        color="rgb(55, 188, 155)"
+                        size="small"
+                        checked
+                      ></ui-switch>
                     </div>
                   </div>
                 </div>
@@ -357,13 +446,13 @@
                       </div>
                     </div>
                     <div class="mb-0 mt-1">
-                      <ngb-progressbar
-                        height="7px"
-                        width="100%"
-                        type="gradient-x-warning"
-                        [value]="65"
-                      >
-                      </ngb-progressbar>
+                      <ui-switch
+                        class="switchery"
+                        switchColor="white"
+                        color="rgb(55, 188, 155)"
+                        size="small"
+                        checked
+                      ></ui-switch>
                     </div>
                   </div>
                 </div>
@@ -385,13 +474,13 @@
                       </div>
                     </div>
                     <div class="mb-0 mt-1">
-                      <ngb-progressbar
-                        height="7px"
-                        width="100%"
-                        type="gradient-x-warning"
-                        [value]="65"
-                      >
-                      </ngb-progressbar>
+                      <ui-switch
+                        class="switchery"
+                        switchColor="white"
+                        color="rgb(55, 188, 155)"
+                        size="small"
+                        checked
+                      ></ui-switch>
                     </div>
                   </div>
                 </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 3c9dc2a..cabe6b1 100644
--- a/src/app/content/hemat-app/monitoring/detail/detail.component.ts
+++ b/src/app/content/hemat-app/monitoring/detail/detail.component.ts
@@ -18,14 +18,26 @@ export class DetailComponent {
   data: any;
   chartOption: any;
   Sales: any;
+  salesData: any;
+  lineArea: any;
   mode: string;
   ExpenseschartOption: any;
+  donutChart2: any;
   public breadcrumb: any;
   constructor(
     private chartApiservice: ChartApiService,
     private router: Router,
     private route: ActivatedRoute
   ) {}
+  hitRateOptions = {
+    bodyClass: ['bg-hexagons', 'pt-0'],
+    headerClass: ['bg-hexagons'],
+    cardClass: ['pull-up'],
+    close: false,
+    expand: false,
+    minimize: false,
+    reload: true
+  };
   @BlockUI("totalReceivables") blockUITotalReceivables: NgBlockUI;
   @BlockUI("salesRecieptsDues") blockUISalesRecieptsDues: NgBlockUI;
   carouselOne = [
@@ -76,12 +88,59 @@ export class DetailComponent {
       };
     }
 
+    this.chartApiservice.getStatisticsData().subscribe(Response => {
+      this.salesData = Response;
+      this.getlineArea();
+      });
+
     this.chartApiservice.getInvoiceData().subscribe((Response) => {
       this.data = Response;
       this.getInvoicechart();
     });
   }
 
+  getlineArea(){
+    const ChartData = this.salesData;
+
+    // this.lineArea = {
+    //   type: 'Line',
+    //   data: ChartData['lineArea'],
+    //   options: {
+    //     // low: 650,
+    //     fullwidth: true,
+    //     height: '80px',
+    //     showArea: true,
+    //     axisX: {
+    //       showGrid: false,
+    //       showLabel: false
+    //     },
+    //     axisY: {
+    //       showGrid: false,
+    //       showLabel: false
+    //     }
+    //   }
+    // };
+
+    this.lineArea = {
+      type: 'Line',
+      data: ChartData['lineArea'],
+      options: {
+        // low: 650,
+        fullwidth: true,
+        height: '75px',
+        showArea: true,
+        axisX: {
+          showGrid: false,
+          showLabel: false
+        },
+        axisY: {
+          showGrid: false,
+          showLabel: false
+        }
+      }
+    };
+  }
+
   getInvoicechart() {
     this.Sales = this.data["sales"];
     this.chartOption = {
diff --git a/src/app/content/hemat-app/monitoring/monitoring.module.ts b/src/app/content/hemat-app/monitoring/monitoring.module.ts
index f4b58cf..495dabc 100644
--- a/src/app/content/hemat-app/monitoring/monitoring.module.ts
+++ b/src/app/content/hemat-app/monitoring/monitoring.module.ts
@@ -21,6 +21,7 @@ import { DetailComponent } from './detail/detail.component';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { NgxPhotoswipeModule } from '@fnxone/ngx-photoswipe';
 import { NgxMasonryModule } from 'ngx-masonry';
+import { UiSwitchModule } from 'ngx-ui-switch';
 
 @NgModule({
   declarations: [
@@ -45,6 +46,7 @@ import { NgxMasonryModule } from 'ngx-masonry';
     NgbModule,
     NgxPhotoswipeModule,
     NgxMasonryModule,
+    UiSwitchModule,
     NgxEchartsModule.forRoot({
       echarts: () => import('echarts')
     }),