add _stat_card component for displaying statistical data with dynamic color indicators

This commit is contained in:
LailaWulandarii 2026-01-24 17:18:14 +07:00
parent 094be01781
commit 7fb675d70f
1 changed files with 44 additions and 0 deletions

View File

@ -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>