fuzi_fauzia
/
hemat_solution
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

penyesuaian UI cost management

This commit is contained in:
Fuzi_fauzia 2024-06-13 12:09:22 +07:00
parent 11184e4a46
commit fc10a44d5d
6 changed files with 896 additions and 801 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/_layout/breadcrumb/breadcrumb.component.css
View File

@ -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 "-" */
}

30
src/app/_layout/breadcrumb/breadcrumb.component.html
View File

@ -3,21 +3,33 @@
class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new" class="content-header-left col-md-6 col-12 mb-2 breadcrumb-new"
*ngIf="breadcrumb" *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> </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 }} {{ breadcrumb.mainlabel }}
</h3> </h3>
<div class="row breadcrumbs-top d-inline-block"> <div class="row breadcrumbs-top d-inline-block">
<div class="breadcrumb-wrapper col-12"> <div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb"> <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> </ol>
</div> </div>
</div> </div>

1432
src/app/_layout/settings/menu-settings.config.ts
View File

File diff suppressed because it is too large Load Diff

62
src/app/content/hemat-app/cost-management/cost-management.component.css
View File

@ -12,15 +12,10 @@
stroke-width: 20px !important; 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 { :host ::ng-deep .donut-chart2 .ct-label {
fill: #ffffff; fill: #ffffff;
color: rgb(255, 255, 255); color: rgb(255, 255, 255);
font-size: 1.75rem; font-size: 12px;
line-height: 1; line-height: 1;
} }
@ -62,6 +57,61 @@
stroke-width: 30px; 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 */ /* table */
:host :host
::ng-deep ::ng-deep

114
src/app/content/hemat-app/cost-management/cost-management.component.html
View File

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

51
src/app/content/hemat-app/cost-management/cost-management.component.ts
View File

@ -7,6 +7,10 @@ import { CostManagementService } from "../service/cost-management.service";
import { NgbModal } from "@ng-bootstrap/ng-bootstrap"; import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
import { ModalAddActualComponent } from "./modal-add-actual/modal-add-actual.component"; 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({ @Component({
selector: "app-cost-management", selector: "app-cost-management",
templateUrl: "./cost-management.component.html", templateUrl: "./cost-management.component.html",
@ -124,7 +128,7 @@ export class CostManagementComponent implements OnInit {
const dataChart2 = { const dataChart2 = {
donut: { donut: {
series: [this.dataComp.elect, this.dataComp.water], series: [this.dataComp.elect, this.dataComp.water],
labels: [], labels: ["Electricity", "Water"],
}, },
}; };
this.donutChart2 = { this.donutChart2 = {
@ -137,28 +141,18 @@ export class CostManagementComponent implements OnInit {
donut: true, donut: true,
showLabel: true, showLabel: true,
startAngle: 0, 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: { options: {
fullwidth: true, fullwidth: true,
width: "100px", width: "100px",
height: "150px", height: "200px",
seriesBarDistance: 100, seriesBarDistance: 200,
chartPadding: {bottom: 40 },
axisX: { axisX: {
showGrid: false, showGrid: false,
showLabel: false, showLabel: true,
offset: 5, offset: 30,
}, },
axisY: { axisY: {
showGrid: false, showGrid: false,
showLabel: false, showLabel: false, // Hide labels on the y-axis
scaleMinSpace: 30, scaleMinSpace: 30,
}, },
classNames: { classNames: {
bar: "ct-bar", // Menambahkan kelas CSS ke batang bar: "ct-bar", // Add custom class to the bar
}, },
}, },
responsiveOptions: [ responsiveOptions: [
[ [
"screen and (max-width: 640px)", "screen and (max-width: 640px)",
{ {
seriesBarDistance: 100, seriesBarDistance: 10,
axisX: { axisX: {
labelInterpolationFnc: function (value) { labelInterpolationFnc: function (value) {
return value[0]; return value[0]; // Return the first character of the label
}, },
}, },
}, },