feat: dashboard

Controllers/Main/DashboardBsiController.cs

@@ -0,0 +1,12 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace BankSampahApp.Controllers.Main
+{
+    public class DashboardBsiController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View("~/Views/Main/DashboardBsi/Index.cshtml");
+        }
+    }
+}

Controllers/Main/DashboardBsuController.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace BankSampahApp.Controllers.Main
+{
+    [Route("Main/[controller]/[action]")]
+    public class DashboardBsuController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View("~/Views/Main/DashboardBsu/Index.cshtml");
+        }
+    }
+}

Controllers/Main/DashboardController.cs

@@ -10,92 +10,9 @@ namespace BankSampahApp.Controllers.Main
             return View("~/Views/Main/Dashboard/Index.cshtml");
         }
 
-        public IActionResult Nasabah()
-        {
-            return View("~/Views/Main/Dashboard/Nasabah.cshtml");
-        }
-
         public IActionResult Bsu()
         {
             return View("~/Views/Main/Dashboard/Bsu.cshtml");
         }
-
-        [HttpGet]
-        public IActionResult Table(){
-            var data = new[]
-            {
-                new {
-                    kategori = "Logam",
-                    total_berat = 400,
-                },
-                new {
-                    kategori = "Plastik",
-                    total_berat = 120,
-                },
-                new {
-                    kategori = "Kertas",
-                    total_berat = 85,
-                },
-                new {
-                    kategori = "Kaca",
-                    total_berat = 300,
-                },
-                new {
-                    kategori = "Elektronik",
-                    total_berat = 25,
-                },
-                new {
-                    kategori = "Organik",
-                    total_berat = 500,
-                },
-                new {
-                    kategori = "Tekstil",
-                    total_berat = 60,
-                },
-                new {
-                    kategori = "Karet",
-                    total_berat = 150,
-                },
-                new {
-                    kategori = "Kayu",
-                    total_berat = 270,
-                },
-                new {
-                    kategori = "Baterai",
-                    total_berat = 18,
-                },
-                new {
-                    kategori = "Minyak",
-                    total_berat = 90,
-                },
-                new {
-                    kategori = "Medis",
-                    total_berat = 45,
-                },
-                new {
-                    kategori = "Aluminium",
-                    total_berat = 200,
-                },
-                new {
-                    kategori = "Tembaga",
-                    total_berat = 155,
-                },
-                new {
-                    kategori = "Karet Sintetis",
-                    total_berat = 130,
-                },
-                new {
-                    kategori = "Kompos",
-                    total_berat = 420,
-                },
-            };
-
-            var response = new
-            {
-                data = data
-            };
-
-            return Json(response);
-        }
     }
 }

Controllers/Main/DashboardNasabahController.cs

@@ -0,0 +1,91 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace BankSampahApp.Controllers.Main
+{
+    [Route("Main/[controller]/[action]")]
+    public class DashboardNasabahController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View("~/Views/Main/DashboardNasabah/Index.cshtml");
+        }
+
+        [HttpGet]
+        public IActionResult Table(){
+            var data = new[]
+            {
+                new {
+                    kategori = "Logam",
+                    total_berat = 400,
+                },
+                new {
+                    kategori = "Plastik",
+                    total_berat = 120,
+                },
+                new {
+                    kategori = "Kertas",
+                    total_berat = 85,
+                },
+                new {
+                    kategori = "Kaca",
+                    total_berat = 300,
+                },
+                new {
+                    kategori = "Elektronik",
+                    total_berat = 25,
+                },
+                new {
+                    kategori = "Organik",
+                    total_berat = 500,
+                },
+                new {
+                    kategori = "Tekstil",
+                    total_berat = 60,
+                },
+                new {
+                    kategori = "Karet",
+                    total_berat = 150,
+                },
+                new {
+                    kategori = "Kayu",
+                    total_berat = 270,
+                },
+                new {
+                    kategori = "Baterai",
+                    total_berat = 18,
+                },
+                new {
+                    kategori = "Minyak",
+                    total_berat = 90,
+                },
+                new {
+                    kategori = "Medis",
+                    total_berat = 45,
+                },
+                new {
+                    kategori = "Aluminium",
+                    total_berat = 200,
+                },
+                new {
+                    kategori = "Tembaga",
+                    total_berat = 155,
+                },
+                new {
+                    kategori = "Karet Sintetis",
+                    total_berat = 130,
+                },
+                new {
+                    kategori = "Kompos",
+                    total_berat = 420,
+                },
+            };
+
+            var response = new
+            {
+                data = data
+            };
+
+            return Json(response);
+        }
+    }
+}

Views/Main/DashboardBsi/Index.cshtml

@@ -0,0 +1,173 @@
+@{
+    ViewData["Title"] = "Dashboard BSI";
+}
+
+<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 BSI</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">BSI Jakarta Timur</span>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="grid grid-cols-1 gap-4 md:grid-cols-3">
+    <div class="stats bg-white">
+        <div class="stat">
+            <div class="stat-title">Total Sampah BSI</div>
+            <div class="stat-value">5,812 Kg</div>
+            <div class="stat-desc">
+                <span class="text-green-600">
+                    <i class="ph ph-arrow-up"></i>
+                    40%
+                </span>
+                vs bulan kemarin
+            </div>
+        </div>
+    </div>
+    <div class="stats bg-white">
+        <div class="stat">
+            <div class="stat-title">Total Sampah BSI</div>
+            <div class="stat-value">5,812 Kg</div>
+            <div class="stat-desc">
+                <span class="text-green-600">
+                    <i class="ph ph-arrow-up"></i>
+                    40%
+                </span>
+                vs bulan kemarin
+            </div>
+        </div>
+    </div>
+    <div class="stats bg-white">
+        <div class="stat">
+            <div class="stat-title">Total Sampah Offtaker</div>
+            <div class="stat-value">89.4 Kg</div>
+            <div class="stat-desc">
+                <span class="text-green-600">
+                    <i class="ph ph-arrow-up"></i>
+                    40%
+                </span>
+                vs bulan kemarin
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="h-6"></div>
+
+<div class="grid grid-cols-1 gap-4">
+    <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 selected>Yearly</option>
+                    <option>Monthly</option>
+                    <option>Quarterly</option>
+                </select>
+            </div>
+        
+            <div class="w-full overflow-x-auto">
+                <div class="w-full"> 
+                    <div class="h-64 md:h-96 relative">
+                    <canvas id="recycleChart_1" class="w-full h-full"></canvas>
+                    </div>
+                </div>
+            </div>
+        </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
+    ];
+
+    // ---------------------------------------------------------
+    //  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,
+                maintainAspectRatio: false,
+                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)");
+</script>
+
+}

Views/Main/DashboardBsu/Index.cshtml

@@ -4,7 +4,7 @@
 
 <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 BSU</span> <-- Update data --!>
+        <span class="text-xl font-semibold text-black">Dashboard BSU</span>
     </div>
 </div>
 
@@ -90,27 +90,6 @@
     </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 {
@@ -126,22 +105,6 @@
         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
     // ---------------------------------------------------------

Views/Main/DashboardNasabah/Index.cshtml

@@ -8,12 +8,57 @@
     </div>
 </div>
 
+<!-- Modal Filter -->
+<dialog id="success_modal" class="modal">
+    <div class="modal-box max-w-2xl">
+      <!-- Close button -->
+      <form method="dialog">
+        <button onclick="success_modal.close()" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+      </form>
+      
+      <!-- Content with horizontal layout -->
+      <div class="flex gap-6 py-4">
+        <!-- Left side - Confetti icon -->
+        <div class="flex-shrink-0 w-24 h-24 bg-cover bg-center bg-no-repeat" style="background-image: url('/images/welcome_modal.svg');">
+          
+        </div>
+
+        <!-- Right side - Text content -->
+        <div class="flex-1 text-left">
+          <!-- Heading -->
+          <h3 class="font-bold text-xl mb-3 text-gray-800">
+            Selamat, [Nama Nasabah]!
+          </h3>
+          
+          <!-- First paragraph -->
+          <p class="text-gray-700 mb-4 leading-relaxed">
+            Anda telah berhasil melakukan transaksi sebanyak <span class="font-semibold">[jumlah_kg]</span> Kg pada bulan ini.
+          </p>
+          
+          <!-- Second paragraph -->
+          <p class="text-gray-700 leading-relaxed">
+            Terima kasih telah berpartisipasi aktif dalam program e-Bank Sampah DLH DKI Jakarta untuk menjaga kebersihan dan kelestarian lingkungan 🌱
+          </p>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Modal backdrop -->
+    <form method="dialog" class="modal-backdrop">
+      <button onclick="success_modal.close()">close</button>
+    </form>
+</dialog>
+<!-- /modal filter -->
+
 <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 class="badge badge-warning text-white text-xs bg-[#F97316] rounded-full mt-4">
+            Status Aktif
+        </div>
     </div>
 </div>
 
@@ -124,8 +169,9 @@
     ];
 
     $(document).ready(() => {
+        success_modal.showModal();
         new DataTable('#example', {
-            ajax: '/Main/Dashboard/Table',
+            ajax: '/Main/DashboardNasabah/Table',
             scrollX: true,
             autoWidth: false,
             initComplete: () => {

Views/Shared/_SidebarUnified.cshtml

@@ -28,7 +28,7 @@
 
              <!-- Dashboard Nasabah -->
             <li>
-                <a asp-controller="Dashboard" asp-action="Nasabah" class="w-full rounded-full @(controller == "Dashboard" ? "menu-active" : "")">
+                <a asp-controller="DashboardNasabah" asp-action="Index" class="w-full rounded-full @(controller == "DashboardNasabah" ? "menu-active" : "")">
                     <i class="ph ph-gauge me-2 text-lg"></i>
                     Dashboard Nasabah
                 </a>
@@ -36,12 +36,21 @@
 
              <!-- Dashboard BSU -->
             <li>
-                <a asp-controller="Dashboard" asp-action="Bsu" class="w-full rounded-full @(controller == "Dashboard" ? "menu-active" : "")">
+                <a asp-controller="DashboardBsu" asp-action="Index" class="w-full rounded-full @(controller == "DashboardBsu" ? "menu-active" : "")">
                     <i class="ph ph-gauge me-2 text-lg"></i>
                     Dashboard BSU
                 </a>
             </li>
 
+             <!-- Dashboard BSI -->
+            <li>
+                <a asp-controller="DashboardBsi" asp-action="Index" class="w-full rounded-full @(controller == "DashboardBsi" ? "menu-active" : "")">
+                    <i class="ph ph-gauge me-2 text-lg"></i>
+                    Dashboard BSI
+                </a>
+            </li>
+
+
             <!-- Data Bank Sampah -->
             <li>
                 <a asp-controller="DataBankSampah" asp-action="Index" class="rounded-full @(controller == "DataBankSampah" ? "menu-active" : "")">