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

slicing cost manager

Browse Source
This commit is contained in:
Fuzi_fauzia 2024-07-16 16:33:20 +07:00
parent 768c9ee6ca
commit 7bc1fa5fe9
6 changed files with 162 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -90,7 +90,6 @@ input[type="month"]::-webkit-calendar-picker-indicator {
} }
/* table */
:host :host
::ng-deep ::ng-deep
.ngx-datatable.bootstrap .ngx-datatable.bootstrap
@ -370,13 +369,15 @@ input[type="month"]::-webkit-calendar-picker-indicator {
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer { :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
background: #252525; background: #DDE1E6;
color: #ededed; color: #242222;
margin-top: -1px; margin-top: -1px;
overflow: inherit; overflow: inherit;
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header { :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
background: #DDE1E6;
color: #242222;
font-weight: bold; font-weight: bold;
height: unset !important; height: unset !important;
overflow: inherit; overflow: inherit;
@ -404,21 +405,38 @@ input[type="month"]::-webkit-calendar-picker-indicator {
} }
:host ::ng-deep .ng-select .ng-select-container { :host ::ng-deep .ng-select .ng-select-container {
color: #ffffff !important; color: #242222 !important;
background-color: #252525 !important; background-color: #FBFBFB !important;
height: 40px !important; height: 40px !important;
border-radius: 12px !important;
box-shadow: 0 2px 4px rgba(36, 34, 34, 0.2) !important; /* Bayangan lebih tipis */
}
:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
color: #242222 !important;
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row { :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */ background-color: #FBFBFB; /* Black color for table rows */
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover { :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
background-color: #1a1a1a; /* Darker black for hover effect */ background-color: #DDE1E6; /* Darker black for hover effect */
} }
.modal-open .content { .text-custom-label{
filter: blur(5px); color: #242222 !important;
transition: filter 0.3s ease-in-out; font-family: "Open Sans", sans-serif !important;
font-size: 16px;
} }
.text-custom-data{
color: #242222 !important;
font-family: "Open Sans", sans-serif !important;
font-size: 24px;
font-weight: 700;
}
.style-custom-label{
color: #242222 !important;
}

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

@ -7,21 +7,20 @@
<section> <section>
<div class="row"> <div class="row">
<div class="col-12 col-sm-6 col-md-6 col-lg-6"> <div class="col-12 col-sm-6 col-md-6 col-lg-6">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #DDE1E6 !important">
<div <div
class="card-header" class="card-header"
style="background-color: #252525 !important" style="background-color: #DDE1E6 !important"
> >
<h4 <h4
class="card-title text-center" class="card-title text-center text-custom-label"
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 #242222;
border-color: #ffffff !important; border-color: #242222 !important;
" "
/> />
</div> </div>
@ -36,21 +35,20 @@
</div> </div>
</div> </div>
<div class="col-12 col-sm-6 col-md-6 col-lg-6"> <div class="col-12 col-sm-6 col-md-6 col-lg-6">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #DDE1E6 !important">
<div <div
class="card-header" class="card-header"
style="background-color: #252525 !important" style="background-color: #DDE1E6 !important"
> >
<h4 <h4
class="card-title text-center" class="card-title text-center text-custom-label"
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 #242222;
border-color: #ffffff !important; border-color: #242222 !important;
" "
/> />
</div> </div>
@ -67,7 +65,7 @@
</div> </div>
</section> </section>
<section id="configuration"> <section id="configuration">
<div class="card" style="background-color: #252525 !important"> <div class="card" style="background-color: #FBFBFB !important">
<div class="card-content"> <div class="card-content">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
@ -115,19 +113,19 @@
class="btn btn-outline-success" class="btn btn-outline-success"
(click)="doFilter()" (click)="doFilter()"
style=" style="
background-color: #252525 !important; background-color: #DDE1E6 !important;
border-color: #bef264 !important; border-color: #DDE1E6 !important;
" "
[disabled]="spinnerFilterActive" [disabled]="spinnerFilterActive"
> >
<i <i
class="la la-search" class="la la-search"
style="color: #ffffff !important" style="color: #242222 !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: #242222 !important"
*ngIf="spinnerFilterActive" *ngIf="spinnerFilterActive"
></i> ></i>
</button> </button>
@ -148,13 +146,13 @@
/> />
<div <div
class="input-group-append" class="input-group-append"
style="background-color: #252525 !important" style="background-color: #FBFBFB !important"
> >
<span <span
class="input-group-text" class="input-group-text"
style=" style="
background-color: #252525 !important; background-color: #FBFBFB !important;
color: #ffffff; color: #242222;
height: 40px !important; height: 40px !important;
" "
>Kwh</span >Kwh</span
@ -177,13 +175,13 @@
/> />
<div <div
class="input-group-append" class="input-group-append"
style="background-color: #252525 !important" style="background-color: #FBFBFB !important"
> >
<span <span
class="input-group-text" class="input-group-text"
style=" style="
background-color: #252525 !important; background-color: #FBFBFB !important;
color: #ffffff; color: #242222;
height: 40px !important; height: 40px !important;
" "
>IDR</span >IDR</span
@ -199,9 +197,9 @@
class="btn btn-secondary mr-2" class="btn btn-secondary mr-2"
style=" style="
width: 100%; width: 100%;
background-color: #bef264 !important; background-color: #37A647 !important;
border-color: #bef264 !important; border-color: #37A647 !important;
color: #000000 !important; color: #ffffff !important;
" "
(click)="export()" (click)="export()"
[disabled]="spinnerExportActive" [disabled]="spinnerExportActive"
@ -218,9 +216,9 @@
class="btn btn-secondary mr-2" class="btn btn-secondary mr-2"
style=" style="
width: 100%; width: 100%;
background-color: #bef264 !important; background-color: #37A647 !important;
border-color: #bef264 !important; border-color: #37A647 !important;
color: #000000 !important; color: #ffffff !important;
" "
(click)="syncData()" (click)="syncData()"
[disabled]="spinnerActive" [disabled]="spinnerActive"
@ -236,9 +234,9 @@
class="btn btn-secondary" class="btn btn-secondary"
style=" style="
width: 100%; width: 100%;
background-color: #bef264 !important; background-color: #37A647 !important;
border-color: #bef264 !important; border-color: #37A647 !important;
color: #000000 !important; color: #ffffff !important;
" "
(click)="addFieldValue()" (click)="addFieldValue()"
> >
@ -270,7 +268,7 @@
ngx-datatable-cell-template ngx-datatable-cell-template
let-rowIndex="rowIndex" let-rowIndex="rowIndex"
> >
<p style="color: #ffffff !important"> <p class="style-custom-label">
{{ rowIndex + 1 }} {{ rowIndex + 1 }}
</p> </p>
</ng-template> </ng-template>
@ -281,10 +279,10 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Building</span> <span class="style-custom-label">Building</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important">{{ value }}</p> <p class="style-custom-label">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
@ -293,10 +291,10 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Category</span> <span class="style-custom-label">Category</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important">{{ value }}</p> <p class="style-custom-label">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
@ -305,10 +303,10 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Room</span> <span class="style-custom-label">Room</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important">{{ value }}</p> <p class="style-custom-label">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
@ -317,12 +315,12 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important" <span class="style-custom-label"
>Estimation Cost</span >Estimation Cost</span
> >
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important"> <p class="style-custom-label">
{{ {{
value.toLocaleString("id-ID", { value.toLocaleString("id-ID", {
style: "currency", style: "currency",
@ -338,10 +336,10 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Total Kwh</span> <span class="style-custom-label">Total Kwh</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important">{{ value }}</p> <p class="style-custom-label">{{ value }}</p>
kWh kWh
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
@ -351,10 +349,10 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Tanggal</span> <span class="style-custom-label">Tanggal</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important"> <p class="style-custom-label">
{{ value | date : "MM/yyyy" }} {{ value | date : "MM/yyyy" }}
</p> </p>
</ng-template> </ng-template>
@ -365,10 +363,10 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Status</span> <span class="style-custom-label">Status</span>
</ng-template> </ng-template>
<ng-template ngx-datatable-cell-template let-value="value"> <ng-template ngx-datatable-cell-template let-value="value">
<p style="color: #ffffff !important"> <p class="style-custom-label">
{{ value === 2 ? "Aktif" : "Tidak Aktif" }} {{ value === 2 ? "Aktif" : "Tidak Aktif" }}
</p> </p>
</ng-template> </ng-template>
@ -379,7 +377,7 @@
[minWidth]="150" [minWidth]="150"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Actions</span> <span class="style-custom-label">Actions</span>
</ng-template> </ng-template>
<ng-template <ng-template
ngx-datatable-cell-template ngx-datatable-cell-template
@ -389,14 +387,14 @@
<button <button
class="btn btn-sm btn-warning mr-1" class="btn btn-sm btn-warning mr-1"
style=" style="
background-color: #000000 !important; background-color: #DDE1E6 !important;
border-color: #bef264 !important; border-color: #37A647 !important;
" "
(click)="viewRow(row)" (click)="viewRow(row)"
> >
<i <i
class="ficon ri-export-line" class="ficon ri-export-line"
style="color: #bef264 !important" style="color: #37A647 !important"
></i> ></i>
</button> </button>
</ng-template> </ng-template>

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

@ -164,7 +164,7 @@ export class CostManagementComponent implements OnInit {
legend: false, legend: false,
// Add custom colors // Add custom colors
color: ["#BEF264"], color: ["#37A647"],
// Horizontal axis // Horizontal axis
xAxis: [ xAxis: [
@ -174,7 +174,7 @@ export class CostManagementComponent implements OnInit {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#BEF264", color: "#37A647",
width: 4, width: 4,
}, },
}, },
@ -218,7 +218,7 @@ export class CostManagementComponent implements OnInit {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#ffffff", color: "#242222",
formatter: function (params) { formatter: function (params) {
return `Rp. ${params.value.toLocaleString()}`; return `Rp. ${params.value.toLocaleString()}`;
}, },
@ -256,7 +256,7 @@ export class CostManagementComponent implements OnInit {
legend: false, legend: false,
// Add custom colors // Add custom colors
color: ["#BEF264"], color: ["#37A647"],
// Horizontal axis // Horizontal axis
xAxis: [ xAxis: [
@ -266,7 +266,7 @@ export class CostManagementComponent implements OnInit {
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
color: "#BEF264", color: "#37A647",
width: 4, width: 4,
}, },
}, },
@ -310,7 +310,7 @@ export class CostManagementComponent implements OnInit {
label: { label: {
show: true, show: true,
position: "top", position: "top",
color: "#ffffff", color: "#242222",
formatter: function (params) { formatter: function (params) {
return `Rp. ${params.value.toLocaleString()}`; return `Rp. ${params.value.toLocaleString()}`;
}, },

32
src/app/content/hemat-app/cost-management/modal-add-actual/modal-add-actual.component.html
View File

@ -1,20 +1,20 @@
<div class="modal-body" style="background-color: #252525 !important"> <div class="modal-body" style="background-color: #FBFBFB !important">
<h4 style="color: #ffffff">Input the actual cost of your expenses</h4> <h4 style="color: #242222">Input the actual cost of your expenses</h4>
<p style="color: #ffffff">Building : {{ buildingName }}</p> <p style="color: #242222">Building : {{ buildingName }}</p>
<p style="color: #ffffff">Periode : {{ formattedDate }}</p> <p style="color: #242222">Periode : {{ formattedDate }}</p>
<form [formGroup]="myForm"> <form [formGroup]="myForm">
<div class="form-group"> <div class="form-group">
<div class="input-group"> <div class="input-group">
<div <div
class="input-group-prepend" class="input-group-prepend"
style="background-color: #252525 !important" style="background-color: #FBFBFB !important"
> >
<span <span
class="input-group-text" class="input-group-text"
id="basic-addon1" id="basic-addon1"
style=" style="
background-color: #252525 !important; background-color: #FBFBFB !important;
color: #ffffff; color: #242222;
height: calc(1.5em + 0.75rem + 2px) !important; height: calc(1.5em + 0.75rem + 2px) !important;
" "
>Rp</span >Rp</span
@ -34,15 +34,15 @@
</div> </div>
</form> </form>
</div> </div>
<div class="modal-footer justify-content-between" style="background-color: #252525 !important; border-style: none !important;"> <div class="modal-footer justify-content-between" style="background-color: #FBFBFB !important; border-style: none !important;">
<button <button
type="button" type="button"
class="btn btn-secondary" class="btn"
style=" style="
color: #c3f164; color: #242222;
width: 25%; width: 25%;
background-color: #252525 !important; background-color: #FBFBFB !important;
border-color: #c3f164 !important; border-color: #FBFBFB !important;
border-radius: 10px; border-radius: 10px;
" "
(click)="activeModal.dismiss('Cross click')" (click)="activeModal.dismiss('Cross click')"
@ -51,12 +51,12 @@
</button> </button>
<button <button
type="button" type="button"
class="btn btn-primary" class="btn"
style=" style="
color: #252525 !important; color: #242222 !important;
width: 25%; width: 25%;
background-color: #c3f164 !important; background-color: #DDE1E6 !important;
border-color: #c3f164 !important; border-color: #DDE1E6 !important;
border-radius: 10px; border-radius: 10px;
" "
(click)="addRow()" (click)="addRow()"

37
src/app/content/hemat-app/cost-management/modal-export/modal-export.component.css
View File

@ -367,13 +367,15 @@ input[type="month"]::-webkit-calendar-picker-indicator {
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer { :host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
background: #252525; background: #DDE1E6;
color: #ededed; color: #242222;
margin-top: -1px; margin-top: -1px;
overflow: inherit; overflow: inherit;
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header { :host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
background: #DDE1E6;
color: #242222;
font-weight: bold; font-weight: bold;
height: unset !important; height: unset !important;
overflow: inherit; overflow: inherit;
@ -401,17 +403,40 @@ input[type="month"]::-webkit-calendar-picker-indicator {
} }
:host ::ng-deep .ng-select .ng-select-container { :host ::ng-deep .ng-select .ng-select-container {
color: #ffffff !important; color: #242222 !important;
background-color: #252525 !important; background-color: #FBFBFB !important;
height: 40px !important; height: 40px !important;
border-radius: 12px !important;
box-shadow: 0 2px 4px rgba(36, 34, 34, 0.2) !important; /* Bayangan lebih tipis */
}
:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input {
color: #242222 !important;
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row { :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row {
background-color: rgba(190, 242, 100, 0.11); /* Black color for table rows */ background-color: #FBFBFB; /* Black color for table rows */
} }
:host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover { :host ::ng-deep .ngx-datatable.bootstrap .datatable-body-row:hover {
background-color: #1a1a1a; /* Darker black for hover effect */ background-color: #DDE1E6; /* Darker black for hover effect */
}
.text-custom-label{
color: #242222 !important;
font-family: "Open Sans", sans-serif !important;
font-size: 16px;
}
.text-custom-data{
color: #242222 !important;
font-family: "Open Sans", sans-serif !important;
font-size: 24px;
font-weight: 700;
}
.style-custom-label{
color: #242222 !important;
} }
::ng-deep .modal-backdrop.show { ::ng-deep .modal-backdrop.show {

64
src/app/content/hemat-app/cost-management/modal-export/modal-export.component.html
View File

@ -1,9 +1,9 @@
<div class="modal-body" style="background-color: #5b5b5b !important"> <div class="modal-body" style="background-color: #FBFBFB !important">
<h4 style="color: #ffffff; margin-bottom: 20px !important"> <h4 style="color: #242222; margin-bottom: 20px !important">
Comparison of Water and Electricity Costs > {{ dataRow.building }} Comparison of Water and Electricity Costs > {{ dataRow.building }}
</h4> </h4>
<p style="color: #ffffff">Room : {{ dataRow?.roomName }}</p> <p style="color: #242222">Room : {{ dataRow?.roomName }}</p>
<p style="color: #ffffff">Category : {{ dataRow?.categoryName }}</p> <p style="color: #242222">Category : {{ dataRow?.categoryName }}</p>
<div class="card-dashboard"> <div class="card-dashboard">
<ngx-datatable <ngx-datatable
@ -19,43 +19,43 @@
> >
<ngx-datatable-column name="#" [flexGrow]="0.5" [minWidth]="30"> <ngx-datatable-column name="#" [flexGrow]="0.5" [minWidth]="30">
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex"> <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex">
<p style="color: #ffffff !important"> <p style="color: #242222 !important">
{{ rowIndex + 1 }} {{ rowIndex + 1 }}
</p> </p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90"> <ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Tanggal</span> <span style="color: #242222 !important">Tanggal</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important"> <p style="color: #242222 !important">
{{ value | date : "dd/MM/yyyy" }} {{ value | date : "dd/MM/yyyy" }}
</p> </p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="deviceName" [flexGrow]="1" [minWidth]="90"> <ngx-datatable-column name="deviceName" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Device</span> <span style="color: #242222 !important">Device</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important">{{ value }}</p> <p style="color: #242222 !important">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90"> <ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Room</span> <span style="color: #242222 !important">Room</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important">{{ value }}</p> <p style="color: #242222 !important">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="categoryName" [flexGrow]="1" [minWidth]="90"> <ngx-datatable-column name="categoryName" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Category</span> <span style="color: #242222 !important">Category</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important">{{ value }}</p> <p style="color: #242222 !important">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column <ngx-datatable-column
@ -64,10 +64,10 @@
[minWidth]="90" [minWidth]="90"
> >
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Estimation Cost</span> <span style="color: #242222 !important">Estimation Cost</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important"> <p style="color: #242222 !important">
{{ {{
value.toLocaleString("id-ID", { value.toLocaleString("id-ID", {
style: "currency", style: "currency",
@ -79,34 +79,34 @@
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="totalKwh" [flexGrow]="1" [minWidth]="90"> <ngx-datatable-column name="totalKwh" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Total Kwh</span> <span style="color: #242222 !important">Total Kwh</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important">{{ value }}</p> <p style="color: #242222 !important">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="watt" [flexGrow]="1" [minWidth]="90"> <ngx-datatable-column name="watt" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Watt</span> <span style="color: #242222 !important">Watt</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important">{{ value }}</p> <p style="color: #242222 !important">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="duration" [flexGrow]="1" [minWidth]="90"> <ngx-datatable-column name="duration" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Duration</span> <span style="color: #242222 !important">Duration</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important">{{ value }}</p> <p style="color: #242222 !important">{{ value }}</p>
</ng-template> </ng-template>
</ngx-datatable-column> </ngx-datatable-column>
<ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90"> <ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90">
<ng-template ngx-datatable-header-template> <ng-template ngx-datatable-header-template>
<span style="color: #ffffff !important">Price Kwh</span> <span style="color: #242222 !important">Price Kwh</span>
</ng-template> </ng-template>
<ng-template let-value="value" ngx-datatable-cell-template> <ng-template let-value="value" ngx-datatable-cell-template>
<p style="color: #ffffff !important"> <p style="color: #242222 !important">
{{ {{
value.toLocaleString("id-ID", { value.toLocaleString("id-ID", {
style: "currency", style: "currency",
@ -121,16 +121,16 @@
</div> </div>
<div <div
class="modal-footer justify-content-between" class="modal-footer justify-content-between"
style="background-color: #252525 !important; border-style: none !important" style="background-color: #FBFBFB !important; border-style: none !important"
> >
<button <button
type="button" type="button"
class="btn btn-secondary" class="btn"
style=" style="
color: #c3f164; color: #242222;
width: 25%; width: 25%;
background-color: #252525 !important; background-color: #FBFBFB !important;
border-color: #c3f164 !important; border-color: #242222 !important;
border-radius: 10px; border-radius: 10px;
" "
(click)="activeModal.dismiss('Cross click')" (click)="activeModal.dismiss('Cross click')"
@ -139,12 +139,12 @@
</button> </button>
<button <button
type="button" type="button"
class="btn btn-primary" class="btn"
style=" style="
color: #252525 !important; color: #242222 !important;
width: 25%; width: 25%;
background-color: #c3f164 !important; background-color: #DDE1E6 !important;
border-color: #c3f164 !important; border-color: #DDE1E6 !important;
border-radius: 10px; border-radius: 10px;
" "
[disabled]="spinnerExportActive" [disabled]="spinnerExportActive"