File size: 3,537 Bytes
2ced536 3e29d81 c2b4d2c 2ced536 2577208 2ced536 39b21ee 2ced536 2577208 2ced536 39b21ee 2ced536 3e29d81 2577208 2ced536 39b21ee 2ced536 3e29d81 2ced536 3e29d81 2ced536 2577208 2ced536 2577208 2ced536 39b21ee 3e29d81 39b21ee 3e29d81 39b21ee 3e29d81 39b21ee 3e29d81 39b21ee | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | {% extends 'admin/custom_master.html' %}
{% block body %}
<!-- Baris Kartu Statistik -->
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="card stat-card">
<div class="card-body">
<div class="stat-icon" style="background-color: var(--brand-green);">
<i class="fas fa-dollar-sign"></i>
</div>
<div>
<h3 class="stat-value">Rp {{ "{:,.0f}".format(stats.total_revenue).replace(',', '.') }}</h3>
<p class="stat-label mb-0">Total Pendapatan</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card stat-card">
<div class="card-body">
<div class="stat-icon" style="background-color: var(--brand-yellow);">
<i class="fas fa-box-open"></i>
</div>
<div>
<h3 class="stat-value">{{ stats.total_products }}</h3>
<p class="stat-label mb-0">Total Produk</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="card stat-card">
<div class="card-body">
<div class="stat-icon" style="background-color: var(--brand-brown);">
<i class="fas fa-calendar-day"></i>
</div>
<div>
<h3 class="stat-value">{{ stats.today_sales }}</h3>
<p class="stat-label mb-0">Transaksi Hari Ini</p>
</div>
</div>
</div>
</div>
</div>
<!-- Baris Grafik Penjualan -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header bg-white border-0">
<h5 class="card-title font-weight-bold mb-0">Grafik Penjualan (7 Hari Terakhir)</h5>
</div>
<div class="card-body" style="height: 350px;">
<canvas id="salesChart"></canvas>
</div>
</div>
</div>
</div>
{% endblock body %}
{% block tail %}
{{ super() }}
<!-- Memuat library Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const labels = {{ chart_labels|tojson }};
const data = {{ chart_data|tojson }};
const ctx = document.getElementById('salesChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Total Penjualan (Rp)', data: data, fill: true,
backgroundColor: 'rgba(46, 87, 43, 0.1)', borderColor: '#2E572B',
tension: 0.3, pointBackgroundColor: '#2E572B', pointBorderColor: '#fff',
pointHoverRadius: 7, pointHoverBackgroundColor: '#2E572B',
}]
},
options: {
responsive: true, maintainAspectRatio: false,
scales: { y: { beginAtZero: true, ticks: { callback: (v) => 'Rp ' + new Intl.NumberFormat('id-ID').format(v) }}},
plugins: { legend: { display: false }, tooltip: { callbacks: { label: (c) => 'Rp ' + new Intl.NumberFormat('id-ID').format(c.parsed.y) }}}
}
});
});
</script>
{% endblock tail %} |