253 lines
8.9 KiB
Plaintext
253 lines
8.9 KiB
Plaintext
@{
|
|
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>
|
|
|
|
<!-- Modal Popup Informasi Prestasi -->
|
|
<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 hidden md:block" 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 Popup Informasi Prestasi -->
|
|
|
|
<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>
|
|
|
|
<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(() => {
|
|
success_modal.showModal();
|
|
new DataTable('#example', {
|
|
ajax: '/Main/DashboardNasabah/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>
|
|
|
|
} |