slicing cost manager
This commit is contained in:
parent
768c9ee6ca
commit
7bc1fa5fe9
|
|
@ -90,7 +90,6 @@ input[type="month"]::-webkit-calendar-picker-indicator {
|
|||
}
|
||||
|
||||
|
||||
/* table */
|
||||
:host
|
||||
::ng-deep
|
||||
.ngx-datatable.bootstrap
|
||||
|
|
@ -370,13 +369,15 @@ input[type="month"]::-webkit-calendar-picker-indicator {
|
|||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
|
||||
background: #252525;
|
||||
color: #ededed;
|
||||
background: #DDE1E6;
|
||||
color: #242222;
|
||||
margin-top: -1px;
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
|
||||
background: #DDE1E6;
|
||||
color: #242222;
|
||||
font-weight: bold;
|
||||
height: unset !important;
|
||||
overflow: inherit;
|
||||
|
|
@ -404,21 +405,38 @@ input[type="month"]::-webkit-calendar-picker-indicator {
|
|||
}
|
||||
|
||||
:host ::ng-deep .ng-select .ng-select-container {
|
||||
color: #ffffff !important;
|
||||
background-color: #252525 !important;
|
||||
color: #242222 !important;
|
||||
background-color: #FBFBFB !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 {
|
||||
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 {
|
||||
background-color: #1a1a1a; /* Darker black for hover effect */
|
||||
background-color: #DDE1E6; /* Darker black for hover effect */
|
||||
}
|
||||
|
||||
.modal-open .content {
|
||||
filter: blur(5px);
|
||||
transition: filter 0.3s ease-in-out;
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,21 +7,20 @@
|
|||
<section>
|
||||
<div class="row">
|
||||
<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
|
||||
class="card-header"
|
||||
style="background-color: #252525 !important"
|
||||
style="background-color: #DDE1E6 !important"
|
||||
>
|
||||
<h4
|
||||
class="card-title text-center"
|
||||
style="color: #ffffff !important"
|
||||
class="card-title text-center text-custom-label"
|
||||
>
|
||||
Comparison of Previous Month Costs
|
||||
</h4>
|
||||
<hr
|
||||
style="
|
||||
border-top: 4px solid #ffffff;
|
||||
border-color: #ffffff !important;
|
||||
border-top: 4px solid #242222;
|
||||
border-color: #242222 !important;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -36,21 +35,20 @@
|
|||
</div>
|
||||
</div>
|
||||
<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
|
||||
class="card-header"
|
||||
style="background-color: #252525 !important"
|
||||
style="background-color: #DDE1E6 !important"
|
||||
>
|
||||
<h4
|
||||
class="card-title text-center"
|
||||
style="color: #ffffff !important"
|
||||
class="card-title text-center text-custom-label"
|
||||
>
|
||||
Comparison of Actual Costs and Estimated Costs
|
||||
</h4>
|
||||
<hr
|
||||
style="
|
||||
border-top: 4px solid #ffffff;
|
||||
border-color: #ffffff !important;
|
||||
border-top: 4px solid #242222;
|
||||
border-color: #242222 !important;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -67,7 +65,7 @@
|
|||
</div>
|
||||
</section>
|
||||
<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-body">
|
||||
<div class="row">
|
||||
|
|
@ -115,19 +113,19 @@
|
|||
class="btn btn-outline-success"
|
||||
(click)="doFilter()"
|
||||
style="
|
||||
background-color: #252525 !important;
|
||||
border-color: #bef264 !important;
|
||||
background-color: #DDE1E6 !important;
|
||||
border-color: #DDE1E6 !important;
|
||||
"
|
||||
[disabled]="spinnerFilterActive"
|
||||
>
|
||||
<i
|
||||
class="la la-search"
|
||||
style="color: #ffffff !important"
|
||||
style="color: #242222 !important"
|
||||
*ngIf="!spinnerFilterActive"
|
||||
></i>
|
||||
<i
|
||||
class="la la-spinner spinner"
|
||||
style="color: #ffffff !important"
|
||||
style="color: #242222 !important"
|
||||
*ngIf="spinnerFilterActive"
|
||||
></i>
|
||||
</button>
|
||||
|
|
@ -148,13 +146,13 @@
|
|||
/>
|
||||
<div
|
||||
class="input-group-append"
|
||||
style="background-color: #252525 !important"
|
||||
style="background-color: #FBFBFB !important"
|
||||
>
|
||||
<span
|
||||
class="input-group-text"
|
||||
style="
|
||||
background-color: #252525 !important;
|
||||
color: #ffffff;
|
||||
background-color: #FBFBFB !important;
|
||||
color: #242222;
|
||||
height: 40px !important;
|
||||
"
|
||||
>Kwh</span
|
||||
|
|
@ -177,13 +175,13 @@
|
|||
/>
|
||||
<div
|
||||
class="input-group-append"
|
||||
style="background-color: #252525 !important"
|
||||
style="background-color: #FBFBFB !important"
|
||||
>
|
||||
<span
|
||||
class="input-group-text"
|
||||
style="
|
||||
background-color: #252525 !important;
|
||||
color: #ffffff;
|
||||
background-color: #FBFBFB !important;
|
||||
color: #242222;
|
||||
height: 40px !important;
|
||||
"
|
||||
>IDR</span
|
||||
|
|
@ -199,9 +197,9 @@
|
|||
class="btn btn-secondary mr-2"
|
||||
style="
|
||||
width: 100%;
|
||||
background-color: #bef264 !important;
|
||||
border-color: #bef264 !important;
|
||||
color: #000000 !important;
|
||||
background-color: #37A647 !important;
|
||||
border-color: #37A647 !important;
|
||||
color: #ffffff !important;
|
||||
"
|
||||
(click)="export()"
|
||||
[disabled]="spinnerExportActive"
|
||||
|
|
@ -218,9 +216,9 @@
|
|||
class="btn btn-secondary mr-2"
|
||||
style="
|
||||
width: 100%;
|
||||
background-color: #bef264 !important;
|
||||
border-color: #bef264 !important;
|
||||
color: #000000 !important;
|
||||
background-color: #37A647 !important;
|
||||
border-color: #37A647 !important;
|
||||
color: #ffffff !important;
|
||||
"
|
||||
(click)="syncData()"
|
||||
[disabled]="spinnerActive"
|
||||
|
|
@ -236,9 +234,9 @@
|
|||
class="btn btn-secondary"
|
||||
style="
|
||||
width: 100%;
|
||||
background-color: #bef264 !important;
|
||||
border-color: #bef264 !important;
|
||||
color: #000000 !important;
|
||||
background-color: #37A647 !important;
|
||||
border-color: #37A647 !important;
|
||||
color: #ffffff !important;
|
||||
"
|
||||
(click)="addFieldValue()"
|
||||
>
|
||||
|
|
@ -270,7 +268,7 @@
|
|||
ngx-datatable-cell-template
|
||||
let-rowIndex="rowIndex"
|
||||
>
|
||||
<p style="color: #ffffff !important">
|
||||
<p class="style-custom-label">
|
||||
{{ rowIndex + 1 }}
|
||||
</p>
|
||||
</ng-template>
|
||||
|
|
@ -281,10 +279,10 @@
|
|||
[minWidth]="90"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Building</span>
|
||||
<span class="style-custom-label">Building</span>
|
||||
</ng-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>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -293,10 +291,10 @@
|
|||
[minWidth]="90"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Category</span>
|
||||
<span class="style-custom-label">Category</span>
|
||||
</ng-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>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -305,10 +303,10 @@
|
|||
[minWidth]="90"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Room</span>
|
||||
<span class="style-custom-label">Room</span>
|
||||
</ng-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>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -317,12 +315,12 @@
|
|||
[minWidth]="90"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important"
|
||||
<span class="style-custom-label"
|
||||
>Estimation Cost</span
|
||||
>
|
||||
</ng-template>
|
||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">
|
||||
<p class="style-custom-label">
|
||||
{{
|
||||
value.toLocaleString("id-ID", {
|
||||
style: "currency",
|
||||
|
|
@ -338,10 +336,10 @@
|
|||
[minWidth]="90"
|
||||
>
|
||||
<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 let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">{{ value }}</p>
|
||||
<p class="style-custom-label">{{ value }}</p>
|
||||
kWh
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
|
|
@ -351,10 +349,10 @@
|
|||
[minWidth]="90"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Tanggal</span>
|
||||
<span class="style-custom-label">Tanggal</span>
|
||||
</ng-template>
|
||||
<ng-template let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">
|
||||
<p class="style-custom-label">
|
||||
{{ value | date : "MM/yyyy" }}
|
||||
</p>
|
||||
</ng-template>
|
||||
|
|
@ -365,10 +363,10 @@
|
|||
[minWidth]="90"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Status</span>
|
||||
<span class="style-custom-label">Status</span>
|
||||
</ng-template>
|
||||
<ng-template ngx-datatable-cell-template let-value="value">
|
||||
<p style="color: #ffffff !important">
|
||||
<p class="style-custom-label">
|
||||
{{ value === 2 ? "Aktif" : "Tidak Aktif" }}
|
||||
</p>
|
||||
</ng-template>
|
||||
|
|
@ -379,7 +377,7 @@
|
|||
[minWidth]="150"
|
||||
>
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Actions</span>
|
||||
<span class="style-custom-label">Actions</span>
|
||||
</ng-template>
|
||||
<ng-template
|
||||
ngx-datatable-cell-template
|
||||
|
|
@ -389,14 +387,14 @@
|
|||
<button
|
||||
class="btn btn-sm btn-warning mr-1"
|
||||
style="
|
||||
background-color: #000000 !important;
|
||||
border-color: #bef264 !important;
|
||||
background-color: #DDE1E6 !important;
|
||||
border-color: #37A647 !important;
|
||||
"
|
||||
(click)="viewRow(row)"
|
||||
>
|
||||
<i
|
||||
class="ficon ri-export-line"
|
||||
style="color: #bef264 !important"
|
||||
style="color: #37A647 !important"
|
||||
></i>
|
||||
</button>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ export class CostManagementComponent implements OnInit {
|
|||
legend: false,
|
||||
|
||||
// Add custom colors
|
||||
color: ["#BEF264"],
|
||||
color: ["#37A647"],
|
||||
|
||||
// Horizontal axis
|
||||
xAxis: [
|
||||
|
|
@ -174,7 +174,7 @@ export class CostManagementComponent implements OnInit {
|
|||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#BEF264",
|
||||
color: "#37A647",
|
||||
width: 4,
|
||||
},
|
||||
},
|
||||
|
|
@ -218,7 +218,7 @@ export class CostManagementComponent implements OnInit {
|
|||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#ffffff",
|
||||
color: "#242222",
|
||||
formatter: function (params) {
|
||||
return `Rp. ${params.value.toLocaleString()}`;
|
||||
},
|
||||
|
|
@ -256,7 +256,7 @@ export class CostManagementComponent implements OnInit {
|
|||
legend: false,
|
||||
|
||||
// Add custom colors
|
||||
color: ["#BEF264"],
|
||||
color: ["#37A647"],
|
||||
|
||||
// Horizontal axis
|
||||
xAxis: [
|
||||
|
|
@ -266,7 +266,7 @@ export class CostManagementComponent implements OnInit {
|
|||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#BEF264",
|
||||
color: "#37A647",
|
||||
width: 4,
|
||||
},
|
||||
},
|
||||
|
|
@ -310,7 +310,7 @@ export class CostManagementComponent implements OnInit {
|
|||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#ffffff",
|
||||
color: "#242222",
|
||||
formatter: function (params) {
|
||||
return `Rp. ${params.value.toLocaleString()}`;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,20 +1,20 @@
|
|||
<div class="modal-body" style="background-color: #252525 !important">
|
||||
<h4 style="color: #ffffff">Input the actual cost of your expenses</h4>
|
||||
<p style="color: #ffffff">Building : {{ buildingName }}</p>
|
||||
<p style="color: #ffffff">Periode : {{ formattedDate }}</p>
|
||||
<div class="modal-body" style="background-color: #FBFBFB !important">
|
||||
<h4 style="color: #242222">Input the actual cost of your expenses</h4>
|
||||
<p style="color: #242222">Building : {{ buildingName }}</p>
|
||||
<p style="color: #242222">Periode : {{ formattedDate }}</p>
|
||||
<form [formGroup]="myForm">
|
||||
<div class="form-group">
|
||||
<div class="input-group">
|
||||
<div
|
||||
class="input-group-prepend"
|
||||
style="background-color: #252525 !important"
|
||||
style="background-color: #FBFBFB !important"
|
||||
>
|
||||
<span
|
||||
class="input-group-text"
|
||||
id="basic-addon1"
|
||||
style="
|
||||
background-color: #252525 !important;
|
||||
color: #ffffff;
|
||||
background-color: #FBFBFB !important;
|
||||
color: #242222;
|
||||
height: calc(1.5em + 0.75rem + 2px) !important;
|
||||
"
|
||||
>Rp</span
|
||||
|
|
@ -34,15 +34,15 @@
|
|||
</div>
|
||||
</form>
|
||||
</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
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
class="btn"
|
||||
style="
|
||||
color: #c3f164;
|
||||
color: #242222;
|
||||
width: 25%;
|
||||
background-color: #252525 !important;
|
||||
border-color: #c3f164 !important;
|
||||
background-color: #FBFBFB !important;
|
||||
border-color: #FBFBFB !important;
|
||||
border-radius: 10px;
|
||||
"
|
||||
(click)="activeModal.dismiss('Cross click')"
|
||||
|
|
@ -51,12 +51,12 @@
|
|||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
class="btn"
|
||||
style="
|
||||
color: #252525 !important;
|
||||
color: #242222 !important;
|
||||
width: 25%;
|
||||
background-color: #c3f164 !important;
|
||||
border-color: #c3f164 !important;
|
||||
background-color: #DDE1E6 !important;
|
||||
border-color: #DDE1E6 !important;
|
||||
border-radius: 10px;
|
||||
"
|
||||
(click)="addRow()"
|
||||
|
|
|
|||
|
|
@ -367,13 +367,15 @@ input[type="month"]::-webkit-calendar-picker-indicator {
|
|||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-footer {
|
||||
background: #252525;
|
||||
color: #ededed;
|
||||
background: #DDE1E6;
|
||||
color: #242222;
|
||||
margin-top: -1px;
|
||||
overflow: inherit;
|
||||
}
|
||||
|
||||
:host ::ng-deep .ngx-datatable.bootstrap .datatable-header {
|
||||
background: #DDE1E6;
|
||||
color: #242222;
|
||||
font-weight: bold;
|
||||
height: unset !important;
|
||||
overflow: inherit;
|
||||
|
|
@ -401,17 +403,40 @@ input[type="month"]::-webkit-calendar-picker-indicator {
|
|||
}
|
||||
|
||||
:host ::ng-deep .ng-select .ng-select-container {
|
||||
color: #ffffff !important;
|
||||
background-color: #252525 !important;
|
||||
color: #242222 !important;
|
||||
background-color: #FBFBFB !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 {
|
||||
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 {
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<div class="modal-body" style="background-color: #5b5b5b !important">
|
||||
<h4 style="color: #ffffff; margin-bottom: 20px !important">
|
||||
<div class="modal-body" style="background-color: #FBFBFB !important">
|
||||
<h4 style="color: #242222; margin-bottom: 20px !important">
|
||||
Comparison of Water and Electricity Costs > {{ dataRow.building }}
|
||||
</h4>
|
||||
<p style="color: #ffffff">Room : {{ dataRow?.roomName }}</p>
|
||||
<p style="color: #ffffff">Category : {{ dataRow?.categoryName }}</p>
|
||||
<p style="color: #242222">Room : {{ dataRow?.roomName }}</p>
|
||||
<p style="color: #242222">Category : {{ dataRow?.categoryName }}</p>
|
||||
|
||||
<div class="card-dashboard">
|
||||
<ngx-datatable
|
||||
|
|
@ -19,43 +19,43 @@
|
|||
>
|
||||
<ngx-datatable-column name="#" [flexGrow]="0.5" [minWidth]="30">
|
||||
<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex">
|
||||
<p style="color: #ffffff !important">
|
||||
<p style="color: #242222 !important">
|
||||
{{ rowIndex + 1 }}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="periode" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Tanggal</span>
|
||||
<span style="color: #242222 !important">Tanggal</span>
|
||||
</ng-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" }}
|
||||
</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="deviceName" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Device</span>
|
||||
<span style="color: #242222 !important">Device</span>
|
||||
</ng-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>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="roomName" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Room</span>
|
||||
<span style="color: #242222 !important">Room</span>
|
||||
</ng-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>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="categoryName" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Category</span>
|
||||
<span style="color: #242222 !important">Category</span>
|
||||
</ng-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>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column
|
||||
|
|
@ -64,10 +64,10 @@
|
|||
[minWidth]="90"
|
||||
>
|
||||
<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 let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">
|
||||
<p style="color: #242222 !important">
|
||||
{{
|
||||
value.toLocaleString("id-ID", {
|
||||
style: "currency",
|
||||
|
|
@ -79,34 +79,34 @@
|
|||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="totalKwh" [flexGrow]="1" [minWidth]="90">
|
||||
<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 let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">{{ value }}</p>
|
||||
<p style="color: #242222 !important">{{ value }}</p>
|
||||
</ng-template>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="watt" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Watt</span>
|
||||
<span style="color: #242222 !important">Watt</span>
|
||||
</ng-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>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="duration" [flexGrow]="1" [minWidth]="90">
|
||||
<ng-template ngx-datatable-header-template>
|
||||
<span style="color: #ffffff !important">Duration</span>
|
||||
<span style="color: #242222 !important">Duration</span>
|
||||
</ng-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>
|
||||
</ngx-datatable-column>
|
||||
<ngx-datatable-column name="priceKwh" [flexGrow]="1" [minWidth]="90">
|
||||
<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 let-value="value" ngx-datatable-cell-template>
|
||||
<p style="color: #ffffff !important">
|
||||
<p style="color: #242222 !important">
|
||||
{{
|
||||
value.toLocaleString("id-ID", {
|
||||
style: "currency",
|
||||
|
|
@ -121,16 +121,16 @@
|
|||
</div>
|
||||
<div
|
||||
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
|
||||
type="button"
|
||||
class="btn btn-secondary"
|
||||
class="btn"
|
||||
style="
|
||||
color: #c3f164;
|
||||
color: #242222;
|
||||
width: 25%;
|
||||
background-color: #252525 !important;
|
||||
border-color: #c3f164 !important;
|
||||
background-color: #FBFBFB !important;
|
||||
border-color: #242222 !important;
|
||||
border-radius: 10px;
|
||||
"
|
||||
(click)="activeModal.dismiss('Cross click')"
|
||||
|
|
@ -139,12 +139,12 @@
|
|||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary"
|
||||
class="btn"
|
||||
style="
|
||||
color: #252525 !important;
|
||||
color: #242222 !important;
|
||||
width: 25%;
|
||||
background-color: #c3f164 !important;
|
||||
border-color: #c3f164 !important;
|
||||
background-color: #DDE1E6 !important;
|
||||
border-color: #DDE1E6 !important;
|
||||
border-radius: 10px;
|
||||
"
|
||||
[disabled]="spinnerExportActive"
|
||||
|
|
|
|||
Loading…
Reference in New Issue