Update templates/admin/dashboard.html

templates/admin/dashboard.html

@@ -1,4 +1,3 @@
-{# templates/admin/dashboard.html (VERSI FINAL YANG BENAR) #}
 {% extends 'admin/custom_master.html' %}
 
 {% block body %}
@@ -7,7 +6,7 @@
     <div class="col-lg-4 col-md-6">
         <div class="card stat-card">
             <div class="card-body">
-                <div class="stat-icon" style="background-color: #2E572B;">
+                <div class="stat-icon" style="background-color: var(--brand-green);">
                     <i class="fas fa-dollar-sign"></i>
                 </div>
                 <div>
@@ -20,7 +19,7 @@
     <div class="col-lg-4 col-md-6">
         <div class="card stat-card">
             <div class="card-body">
-                <div class="stat-icon" style="background-color: #F3C13E;">
+                <div class="stat-icon" style="background-color: var(--brand-yellow);">
                     <i class="fas fa-box-open"></i>
                 </div>
                 <div>
@@ -33,7 +32,7 @@
     <div class="col-lg-4 col-md-6">
         <div class="card stat-card">
             <div class="card-body">
-                <div class="stat-icon" style="background-color: #8A5E2A;">
+                <div class="stat-icon" style="background-color: var(--brand-brown);">
                     <i class="fas fa-calendar-day"></i>
                 </div>
                 <div>
@@ -59,67 +58,34 @@
     </div>
 </div>
 
-<!-- Memuat library Chart.js, HARUS di dalam block -->
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+{% endblock body %}
 
-<script>
-    document.addEventListener("DOMContentLoaded", function() {
-        // Data dari Flask/Jinja2
-        const labels = {{ chart_labels|tojson }};
-        const data = {{ chart_data|tojson }};
-
-        const ctx = document.getElementById('salesChart').getContext('d');
-        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: function(value, index, values) {
-                                return 'Rp ' + new Intl.NumberFormat('id-ID').format(value);
-                            }
-                        }
-                    }
+{% 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',
+                    }]
                 },
-                plugins: {
-                    legend: {
-                        display: false
-                    },
-                    tooltip: {
-                        callbacks: {
-                            label: function(context) {
-                                let label = context.dataset.label || '';
-                                if (label) {
-                                    label += ': ';
-                                }
-                                if (context.parsed.y !== null) {
-                                    label += 'Rp ' + new Intl.NumberFormat('id-ID').format(context.parsed.y);
-                                }
-                                return label;
-                            }
-                        }
-                    }
+                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 body %}
+    </script>
+{% endblock tail %}