add _stat_card component for displaying statistical data with dynamic color indicators
This commit is contained in:
parent
094be01781
commit
7fb675d70f
|
|
@ -0,0 +1,44 @@
|
|||
<div class="col-6 col-lg-3 col-md-6">
|
||||
<div class="card mb-0">
|
||||
<div class="card-body px-3 py-4">
|
||||
<div class="stat-header">
|
||||
<h6 class="stat-label">{{ $label }}</h6>
|
||||
<i class="bi bi-info-circle menu-dots" data-bs-toggle="tooltip" title="{{ $tooltip }}"></i>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<div class="stat-icon">
|
||||
<i class="bi {{ $icon }}"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="stat-count">{{ $value }}</h6>
|
||||
|
||||
@php
|
||||
// Logika untuk menentukan warna
|
||||
$colorClass = 'text-success'; // Default hijau (bagus)
|
||||
|
||||
// Cek apakah ini metrik negatif (seperti Pesanan Ditolak)
|
||||
if ($is_negative_metric ?? false) {
|
||||
// Jika naik (> 0), berarti BURUK -> Merah
|
||||
if ($grow > 0) {
|
||||
$colorClass = 'text-danger';
|
||||
}
|
||||
} else {
|
||||
// Untuk metrik biasa (Pendapatan, dll)
|
||||
// Jika turun (< 0), berarti BURUK -> Merah
|
||||
if ($grow < 0) {
|
||||
$colorClass = 'text-danger';
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
|
||||
<span class="stat-percent {{ $colorClass }} fw-bold">
|
||||
{{-- Ikon panah tetap menunjukkan arah matematis (naik/turun) --}}
|
||||
<i class="bi {{ $grow >= 0 ? 'bi-arrow-up' : 'bi-arrow-down' }}"></i>
|
||||
{{ abs($grow) }}%
|
||||
</span>
|
||||
<small class="stat-month">dari bulan lalu</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue