penyesuaian UI cost management

src/app/_layout/breadcrumb/breadcrumb.component.css

@@ -19,3 +19,11 @@
   }
 }
 
+.breadcrumb-item::before {
+  content: none !important; /* Removes any default content, such as "-" */
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  content: none !important; /* Removes any default content, such as "-" */
+}
+

src/app/_layout/breadcrumb/breadcrumb.component.html

@@ -3,21 +3,33 @@
     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 }}">
+    <button
-      <i class="feather ft-chevron-left"></i>
+      *ngIf="breadcrumb.isLinkBack"
+      type="button"
+      class="btn btn-icon btn-pure secondary mr-1"
+      routerLink="{{ breadcrumb.linkBack }}"
+    >
+      <i class="feather ft-chevron-left" style="color: #ffffff"></i>
     </button>
-    <h3 class="content-header-title mb-0 d-inline-block" style="color: #ffffff;">
+    <h3 class="content-header-title mb-0 d-inline-block" style="color: #ffffff">
       {{ 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">
+          <ng-container *ngFor="let link of breadcrumb.links; let last = last">
-            <a *ngIf="link.isLink" routerLink="{{ link.link }}">{{
+            <li class="breadcrumb-item" style="color: #ffffff">
-              link.name
+              <ng-container *ngIf="link.isLink; else notLink">
-            }}</a>
+                <a routerLink="{{ link.link }}" style="color: #ffffff">{{ link.name }}</a>
-            <span *ngIf="!link.isLink" style="color: #ffffff;">{{ link.name }}</span>
+              </ng-container>
-          </li>
+              <ng-template #notLink>
+                <span style="color: #ffffff">{{ link.name }}</span>
+              </ng-template>
+              <span *ngIf="!last" class="breadcrumb-arrow" style="color: #ffffff; margin: 0 5px;">
+                <i class="feather ft-chevron-right"></i>
+              </span>
+            </li>
+          </ng-container>
         </ol>
       </div>
     </div>

src/app/content/hemat-app/cost-management/cost-management.component.css

@@ -12,15 +12,10 @@
   stroke-width: 20px !important;
 }
 
-/* :host ::ng-deep .donut-chart2 {
-  -webkit-filter: drop-shadow(0px 10px 11px rgba(187, 187, 187)) !important;
-  filter: drop-shadow(0px 10px 11px rgba(187, 187, 187));
-} */
-
 :host ::ng-deep .donut-chart2 .ct-label {
   fill: #ffffff;
   color: rgb(255, 255, 255);
-  font-size: 1.75rem;
+  font-size: 12px;
   line-height: 1;
 }
 
@@ -62,6 +57,61 @@
   stroke-width: 30px;
 }
 
+:host ::ng-deep .donut-chart3 .ct-label {
+  fill: #ffffff;
+  color: rgb(255, 255, 255);
+  font-size: 12px;
+  line-height: 1;
+  margin-right: 20px;
+}
+
+:host ::ng-deep .ct-label.ct-horizontal {
+  font-size: 12px; /* Adjust font size */
+  transform: rotate(-45deg); /* Rotate labels if needed for better fit */
+  text-anchor: end;
+  margin-top: 10px;
+}
+
+:host ::ng-deep .ct-chart-bar .ct-labels .ct-label.ct-horizontal {
+  margin-right: 20px; /* Adjust margin for labels */
+}
+
+
+.chart-title {
+  font-size: 18px;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+
+/* Hide the default calendar icon */
+input[type="month"]::-webkit-calendar-picker-indicator {
+  background-color: #ffffff;
+}
+
+/* styles.css atau styles.scss */
+.chartist-tooltip {
+  position: absolute;
+  display: inline-block;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  pointer-events: none;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 5px;
+  border-radius: 3px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.ct-tooltip-visible {
+  opacity: 1;
+}
+
+
+
+
 /* table */
 :host
   ::ng-deep

src/app/content/hemat-app/cost-management/cost-management.component.html

@@ -8,16 +8,22 @@
         <div class="row">
           <div class="col-lg-4 col-12">
             <div class="card" style="background-color: #252525 !important">
-              <div class="card-header" style="background-color: #252525 !important">
+              <div
-                <h4 class="card-title text-center" style="color: #ffffff !important;">
+                class="card-header"
+                style="background-color: #252525 !important"
+              >
+                <h4
+                  class="card-title text-center"
+                  style="color: #ffffff !important"
+                >
                   Comparison of Water and Electricity Costs
                 </h4>
                 <hr
-                style="
+                  style="
-                  border-top: 4px solid #ffffff;
+                    border-top: 4px solid #ffffff;
-                  border-color: #ffffff !important;
+                    border-color: #ffffff !important;
-                "
+                  "
-              />
+                />
               </div>
               <div class="card-body">
                 <div class="card-block">
@@ -37,24 +43,28 @@
           </div>
           <div class="col-lg-4 col-12">
             <div class="card" style="background-color: #252525 !important">
-              <div class="card-header" style="background-color: #252525 !important">
+              <div
-                <h4 class="card-title text-center" style="color: #ffffff !important;">
+                class="card-header"
+                style="background-color: #252525 !important"
+              >
+                <h4
+                  class="card-title text-center"
+                  style="color: #ffffff !important"
+                >
                   Comparison of Previous Month Costs
                 </h4>
                 <hr
-                style="
+                  style="
-                  border-top: 4px solid #ffffff;
+                    border-top: 4px solid #ffffff;
-                  border-color: #ffffff !important;
+                    border-color: #ffffff !important;
-                "
+                  "
-              />
+                />
               </div>
               <div class="card-body">
                 <div class="card-block">
-                  <div
+                  <div class="donut-chart3" style="height: 150px !important">
-                    class="donut-chart3 text-center"
-                    style="height: 150px !important"
-                  >
                     <x-chartist
+                      class="text-center"
                       *ngIf="barChart"
                       [data]="barChart.data"
                       [type]="barChart.type"
@@ -70,23 +80,30 @@
           </div>
           <div class="col-lg-4 col-12">
             <div class="card" style="background-color: #252525 !important">
-              <div class="card-header" style="background-color: #252525 !important">
+              <div
-                <h4 class="card-title text-center" style="color: #ffffff !important;">
+                class="card-header"
+                style="background-color: #252525 !important"
+              >
+                <h4
+                  class="card-title text-center"
+                  style="color: #ffffff !important"
+                >
                   Comparison of Actual Costs and Estimated Costs
                 </h4>
                 <hr
-                style="
+                  style="
-                  border-top: 4px solid #ffffff;
+                    border-top: 4px solid #ffffff;
-                  border-color: #ffffff !important;
+                    border-color: #ffffff !important;
-                "
+                  "
-              />
+                />
               </div>
               <div class="card-body">
                 <div class="card-block">
-                  <div class="d-flex align-items-center mb-2">
+                  <div class="d-flex align-items-center">
                     <div class="flex-grow-1">
+                      <label style="color: #ffffff">Actual Cost</label>
                       <ngb-progressbar
-                        height="45px"
+                        height="35px"
                         type="success"
                         [value]="dataCompAct?.est_cost"
                         [max]="dataCompAct?.real_cost"
@@ -103,8 +120,9 @@
                   </div>
                   <div class="d-flex align-items-center">
                     <div class="flex-grow-1">
+                      <label style="color: #ffffff">Estimated Cost</label>
                       <ngb-progressbar
-                        height="45px"
+                        height="35px"
                         type="danger"
                         [value]="dataCompAct?.real_cost"
                         [max]="dataCompAct?.real_cost"
@@ -187,17 +205,20 @@
                           type="button"
                           class="btn btn-outline-success ml-2"
                           (click)="doFilter()"
-                          style="background-color: #252525 !important; border-color: #BEF264 !important;"
+                          style="
+                            background-color: #252525 !important;
+                            border-color: #bef264 !important;
+                          "
                           [disabled]="spinnerFilterActive"
                         >
                           <i
                             class="la la-search"
-                            style="color: #ffffff !important;"
+                            style="color: #ffffff !important"
                             *ngIf="!spinnerFilterActive"
                           ></i>
                           <i
                             class="la la-spinner spinner"
-                            style="color: #ffffff !important;"
+                            style="color: #ffffff !important"
                             *ngIf="spinnerFilterActive"
                           ></i>
                         </button>
@@ -338,13 +359,14 @@
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                          
+                          <p style="color: #ffffff !important">
-                          <p style="color: #ffffff !important">{{
+                            {{
-                            value.toLocaleString("id-ID", {
+                              value.toLocaleString("id-ID", {
-                              style: "currency",
+                                style: "currency",
-                              currency: "IDR"
+                                currency: "IDR"
-                            })
+                              })
-                          }}</p>
+                            }}
+                          </p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -361,7 +383,8 @@
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                        <p style="color: #ffffff !important">{{ value }}</p> kWh
+                          <p style="color: #ffffff !important">{{ value }}</p>
+                          kWh
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -376,7 +399,9 @@
                           let-value="value"
                           ngx-datatable-cell-template
                         >
-                        <p style="color: #ffffff !important">{{ value | date : "MM/yyyy" }}</p> 
+                          <p style="color: #ffffff !important">
+                            {{ value | date : "MM/yyyy" }}
+                          </p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -391,7 +416,9 @@
                           ngx-datatable-cell-template
                           let-value="value"
                         >
-                        <p style="color: #ffffff !important">{{ value === 2 ? "Aktif" : "Tidak Aktif" }}</p> 
+                          <p style="color: #ffffff !important">
+                            {{ value === 2 ? "Aktif" : "Tidak Aktif" }}
+                          </p>
                         </ng-template>
                       </ngx-datatable-column>
                       <ngx-datatable-column
@@ -409,7 +436,10 @@
                         >
                           <button
                             class="btn btn-sm btn-warning mr-1"
-                            style="background-color: #000000 !important; border-color: #BEF264 !important;"
+                            style="
+                              background-color: #000000 !important;
+                              border-color: #bef264 !important;
+                            "
                             (click)="viewRow(row)"
                           >
                             <i class="ficon feather ft-eye"></i>

src/app/content/hemat-app/cost-management/cost-management.component.ts

@@ -7,6 +7,10 @@ import { CostManagementService } from "../service/cost-management.service";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
 import { ModalAddActualComponent } from "./modal-add-actual/modal-add-actual.component";
 
+import { ChartEvent, ChartType } from "ng-chartist";
+import * as Chartist from "chartist";
+import "chartist-plugin-tooltips";
+
 @Component({
   selector: "app-cost-management",
   templateUrl: "./cost-management.component.html",
@@ -124,7 +128,7 @@ export class CostManagementComponent implements OnInit {
       const dataChart2 = {
         donut: {
           series: [this.dataComp.elect, this.dataComp.water],
-          labels: [],
+          labels: ["Electricity", "Water"],
         },
       };
       this.donutChart2 = {
@@ -137,28 +141,18 @@ export class CostManagementComponent implements OnInit {
           donut: true,
           showLabel: true,
           startAngle: 0,
-          // labelInterpolationFnc: function (value) {
+          labelPosition: "outside",
-          //   const total = 82;
+          labelOffset: 50,
-          //   return total + "C";
+          plugins: [
-          // },
+            Chartist.plugins.tooltip({
-        },
+              appendToBody: true,
-        events: {
+            }),
-          draw(data: any): void {
+          ],
-            if (data.type === "label") {
+          labelInterpolationFnc: function (value) {
-              if (data.index === 0) {
+            return value;
-                data.element.attr({
-                  dx: data.element.root().width() / 2,
-                  dy: data.element.root().height() / 2,
-                });
-              } else {
-                data.element.remove();
-              }
-            }
           },
         },
       };
-
-      // this.dataChart2.donut.labels = ["Water", "Electricity"];
     });
   }
 
@@ -178,30 +172,31 @@ export class CostManagementComponent implements OnInit {
         options: {
           fullwidth: true,
           width: "100px",
-          height: "150px",
+          height: "200px",
-          seriesBarDistance: 100,
+          seriesBarDistance: 200,
+          chartPadding: {bottom: 40 },
           axisX: {
             showGrid: false,
-            showLabel: false,
+            showLabel: true,
-            offset: 5,
+            offset: 30, 
           },
           axisY: {
             showGrid: false,
-            showLabel: false,
+            showLabel: false, // Hide labels on the y-axis
             scaleMinSpace: 30,
           },
           classNames: {
-            bar: "ct-bar", // Menambahkan kelas CSS ke batang
+            bar: "ct-bar", // Add custom class to the bar
           },
         },
         responsiveOptions: [
           [
             "screen and (max-width: 640px)",
             {
-              seriesBarDistance: 100,
+              seriesBarDistance: 10,
               axisX: {
                 labelInterpolationFnc: function (value) {
-                  return value[0];
+                  return value[0]; // Return the first character of the label
                 },
               },
             },