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

penyesuaian UI cost management

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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">
<h4 class="card-title text-center" style="color: #ffffff !important;">
<div
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="
border-top: 4px solid #ffffff;
border-color: #ffffff !important;
"
/>
style="
border-top: 4px solid #ffffff;
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">
<h4 class="card-title text-center" style="color: #ffffff !important;">
<div
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="
border-top: 4px solid #ffffff;
border-color: #ffffff !important;
"
/>
style="
border-top: 4px solid #ffffff;
border-color: #ffffff !important;
"
/>
</div>
<div class="card-body">
<div class="card-block">
<div
class="donut-chart3 text-center"
style="height: 150px !important"
>
<div class="donut-chart3" 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">
<h4 class="card-title text-center" style="color: #ffffff !important;">
<div
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="
border-top: 4px solid #ffffff;
border-color: #ffffff !important;
"
/>
style="
border-top: 4px solid #ffffff;
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">{{
value.toLocaleString("id-ID", {
style: "currency",
currency: "IDR"
})
}}</p>
<p style="color: #ffffff !important">
{{
value.toLocaleString("id-ID", {
style: "currency",
currency: "IDR"
})
}}
</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>