From c068e8b3270bb76edd4920f0b803b556dcb82e2b Mon Sep 17 00:00:00 2001
From: Kevin Hendrawan <projectkevin97@gmail.com>
Date: Mon, 24 Nov 2025 00:03:56 +0700
Subject: [PATCH] feat: add  Dashboard Nasabah View

---
 Views/Main/Dashboard/Nasabah.cshtml | 207 ++++++++++++++++++++++++++++
 1 file changed, 207 insertions(+)
 create mode 100644 Views/Main/Dashboard/Nasabah.cshtml

diff --git a/Views/Main/Dashboard/Nasabah.cshtml b/Views/Main/Dashboard/Nasabah.cshtml
new file mode 100644
index 0000000..e88be4c
--- /dev/null
+++ b/Views/Main/Dashboard/Nasabah.cshtml
@@ -0,0 +1,207 @@
+@{
+    ViewData["Title"] = "Dashboard Nasabah";
+}
+
+<div class="flex gap-2 flex-row justify-between md:gap-0 mt-2 mb-2">
+    <div class="prose">
+        <span class="text-xl font-semibold text-black">Dashboard Nasabah</span>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="card bg-white md:bg-[url(/images/image-welcome-dashboard.png)] md:bg-local md:bg-right md:bg-no-repeat mb-2">
+    <div class="card-body gap-0">
+        <span class="text-gray-500">Selamat Datang</span>
+        <span class="bg-gradient-to-r from-[#089A7B] to-[#46C881] bg-clip-text text-2xl font-semibold text-transparent">Ikhdan Nizar Maulana</span>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <div class="stats bg-white">
+        <div class="stat">
+            <div class="stat-title">Sampah hari ini total sampah yang anda kelola sebanyak</div>
+            <div class="text-3xl">25.343 Kg</div>
+        </div>
+    </div>
+    <div class="stats bg-white">
+        <div class="stat">
+            <div class="stat-title">Rupiah yang anda peroleh sebanyak</div>
+            <div class="text-3xl">Rp. 124.000</div>
+        </div>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <div class="card bg-white shadow-sm">
+        <div class="card-body pt-4 px-3">
+            <div class="flex gap-2 flex-row justify-between md:gap-0 mt-2 mb-2">
+                <div class="prose">
+                    <span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
+                        Sampah Daur Ulang Terkelola (Kg)
+                    </span>
+                </div>
+                <select class="bg-transparent focus:outline-none text-sm px-2 py-1">
+                    <option>Monthly</option>
+                    <option>Quarterly</option>
+                    <option>Yearly</option>
+                </select>
+            </div>
+        
+            <div class="w-full overflow-x-auto">
+                <div class="min-w-[900px]"> 
+                    <div class="h-64 md:h-96 relative">
+                    <canvas id="recycleChart_1" class="w-full h-full"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="card bg-white shadow-sm">
+        <div class="card-body pt-4 px-3">
+            <div class="flex gap-2 flex-row justify-between md:gap-0 mt-2 mb-2">
+                <div class="prose">
+                    <span class="text-xl font-semibold text-gray-900 font-['Plus_Jakarta_Sans']">
+                        Sampah Daur Ulang Terkelola (Kg)
+                    </span>
+                </div>
+                 <select class="bg-transparent focus:outline-none text-sm px-2 py-1">
+                    <option>Monthly</option>
+                    <option>Quarterly</option>
+                    <option>Yearly</option>
+                </select>
+            </div>
+        
+            <div class="w-full overflow-x-auto">
+                <div class="min-w-[900px]"> 
+                    <div class="h-64 md:h-96 relative">
+                    <canvas id="recycleChart_2" class="w-full h-full"></canvas>
+                    </div>
+                </div>
+            </div>
+        </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="w-full overflow-x-auto">
+            <table class="table-zebra table w-full" id="example">
+                <!-- head -->
+                <thead>
+                    <tr>
+                        <th class="w-[10%]">No</th>
+                        <th class="w-[45%]">Kategori Sampah</th>
+                        <th class="w-[45%]">Total Berat Sampah(Kg)</th>
+                    </tr>
+                </thead>
+                <tbody>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+
+
+<script src="~/js/chart.js"></script>
+@section Scripts {
+<script type="text/javascript">
+    const labels = [
+        "Jan", "Feb", "Mar", "Apr", "Mei", "Jun",
+        "Jul", "Agu", "Sep", "Okt", "Nov", "Des"
+    ];
+
+    const dataValues = [
+        50000, 38000, 45000, 60000, 100000,
+        20000, 55000, 70000, 60000, 75000,
+        90000, 110000
+    ];
+
+    $(document).ready(() => {
+        new DataTable('#example', {
+            ajax: '/Main/Dashboard/Table',
+            scrollX: true,
+            autoWidth: false,
+            initComplete: () => {
+                $('div.dt-scroll-body thead').css('visibility', 'collapse');
+            },
+            columns: [
+                { data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
+                { data: 'kategori' },
+                { data: 'total_berat' },
+            ]
+        });
+    });
+
+    // ---------------------------------------------------------
+    //  Utility: Create gradient
+    // ---------------------------------------------------------
+    function createGradient(ctx, color, color2) {
+        const g = ctx.createLinearGradient(0, 0, 0, 220);
+        g.addColorStop(0, color);
+        g.addColorStop(1, color2);
+        return g;
+    }
+
+    // ---------------------------------------------------------
+    //  Utility: Create Chart
+    // ---------------------------------------------------------
+    function createLineChart(canvasId, borderColor, gradientColor, gradientColor2) {
+        const ctx = document.getElementById(canvasId).getContext("2d");
+
+        new Chart(ctx, {
+            type: "line",
+            data: {
+                labels,
+                datasets: [
+                    {
+                        data: dataValues,
+                        borderColor: borderColor,
+                        borderWidth: 3,
+                        backgroundColor: createGradient(ctx, gradientColor, gradientColor2),
+                        fill: true,
+                        tension: 0,
+                        pointBackgroundColor: "#fff",
+                        pointBorderWidth: 0,
+                        pointRadius: 0,
+                        pointHoverRadius: 0,
+                        borderDash: [6, 6],
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                plugins: { legend: { display: false } },
+                scales: {
+                    x: {
+                        grid: { display: false },
+                        ticks: { color: "#6b7280", font: { size: 12 } }
+                    },
+                    y: {
+                        beginAtZero: true,
+                        ticks: {
+                            callback: v => v >= 1000 ? v / 1000 + "k" : v,
+                            color: "#6b7280",
+                            font: { size: 12 }
+                        },
+                        grid: { color: "rgba(0,0,0,0.06)" }
+                    }
+                }
+            }
+        });
+    }
+
+    // ---------------------------------------------------------
+    //  Render Both Charts
+    // ---------------------------------------------------------
+    createLineChart("recycleChart_1", "rgba(37, 205, 37, 0.4)", "rgba(37, 205, 37, 0.4)", "rgba(37, 205, 37, 0)");
+    createLineChart("recycleChart_2", "rgba(247, 144, 9, 0.41)", "rgba(247, 144, 9, 0.41)", "rgba(255, 219, 172, 0)");
+</script>
+
+}
\ No newline at end of file