feat(dashboard): add dashboard on bottom

Views/Main/Dashboard/Index.cshtml

@@ -222,3 +222,28 @@
         </div>
     </div>
 </div>
+
+<div class="h-6"></div>
+
+<div class="card bg-white shadow-sm">
+    <div class="card-body pt-4 px-3">
+        <div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0">
+            <div class="prose">
+                <span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
+                    Laporan Total Sampah per Bulan(Kg)
+                </span>
+            </div>
+        </div>
+       
+        <div class="w-full overflow-x-auto">
+            <div class="min-w-[900px]"> 
+                <div class="h-64 md:h-96 relative">
+                <canvas id="chartBankSampah" class="w-full h-full"></canvas>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="~/js/chart.js"></script>
+<script src="/plugins/chartjs/setup.js"></script>

wwwroot/plugins/chartjs/setup.js

@@ -0,0 +1,116 @@
+const DATA_COUNT = 12;
+const NUMBER_CFG = {count: DATA_COUNT, min: 500, max: 3000};
+const ctx = document.getElementById('chartBankSampah').getContext('2d');
+var gradientBSI = ctx.createLinearGradient(0, 0, 0, 1000);
+gradientBSI.addColorStop(0, "rgba(36, 115, 50, 1)");  // hijau gelap
+gradientBSI.addColorStop(1, "rgba(136, 194, 147, 1)");  // hijau muda
+
+var gradientBSU = ctx.createLinearGradient(0, 0, 0, 1000);
+gradientBSU.addColorStop(0, "rgba(56, 107, 202, 1)");  // biru gelap
+gradientBSU.addColorStop(1, "rgba(138, 164, 242, 1)");  // biru muda
+
+var gradientOfftaker = ctx.createLinearGradient(0, 0, 0, 1000);
+gradientOfftaker.addColorStop(0, "rgba(247, 144, 9, 1)");  // orange
+gradientOfftaker.addColorStop(1, "rgba(255, 219, 172, 1)");  // kuning lembut
+const labels = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+
+const data = {
+  labels: labels,
+  datasets: [
+    {
+      label: 'BSI',
+      data: 
+      [
+        500,
+        500,
+        500,
+        500,
+        500,
+        500,
+        500,
+        500,
+        500,
+        500,
+        500,
+        500,
+
+      ],
+      borderColor: '#247332',
+      backgroundColor: gradientBSI,
+    },
+    {
+      label: 'BSU',
+      data:[
+        800,
+        800,
+        800,
+        800,
+        800,
+        800,
+        800,
+        800,
+        800,
+        800,
+        800,
+        800,
+      ],
+      borderColor: '#386BCA',
+      backgroundColor: gradientBSU,
+    },
+    {
+      label: 'Offtaker',
+       data:[
+        2000,
+        2000,
+        2000,
+        2000,
+        2000,
+        2000,
+        2000,
+        2000,
+        2000,
+        2000,
+        2000,
+        2000,
+      ],
+      borderColor: '#F79009',
+      backgroundColor: gradientOfftaker,
+    }
+  ]
+};
+
+const config = {
+  type: 'bar',
+  data: data,
+  options: {
+    responsive: true,
+    maintainAspectRatio:false,
+    plugins: {
+        legend: {
+            position: 'bottom',
+        },
+    },
+    scales: {
+        y: {
+            beginAtZero: true,
+            max: 4000        // <--- atur batas tertinggi chart
+        }
+    }
+  },
+};
+
+const myChart = new Chart(ctx, config);
+