banksampah
/
bank-sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: dashboard

main
Kevin Hendrawan 2025-11-27 14:36:29 +07:00
parent d773ea397b
commit 94be771bcb
9 changed files with 2606 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Controllers/Main/DashboardBsiController.cs 100644
View File

@ -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");
}
}
}

13
Controllers/Main/DashboardBsuController.cs 100644
View File

@ -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");
}
}
}

83
Controllers/Main/DashboardController.cs
View File

@ -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);
}
}
}

91
Controllers/Main/DashboardNasabahController.cs 100644
View File

@ -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);
}
}
}

173
Views/Main/DashboardBsi/Index.cshtml 100644
View File

@ -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>
}

39
Views/Main/Dashboard/Bsu.cshtml → Views/Main/DashboardBsu/Index.cshtml
View File

@ -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
// ---------------------------------------------------------

48
Views/Main/Dashboard/Nasabah.cshtml → Views/Main/DashboardNasabah/Index.cshtml
View File

@ -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: () => {

13
Views/Shared/_SidebarUnified.cshtml
View File

@ -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" : "")">

2258
wwwroot/images/welcome_modal.svg 100644
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB