191 lines
8.9 KiB
Plaintext
191 lines
8.9 KiB
Plaintext
@{
|
|
Layout = "~/Views/Admin/Transport/SpjDriverUpst/Shared/_Layout.cshtml";
|
|
ViewData["Title"] = "Detail SPJ";
|
|
}
|
|
|
|
<div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen pb-20">
|
|
<div class="bg-upst text-white px-6 pt-8 pb-16 rounded-b-[40px] shadow-lg relative">
|
|
<div class="flex items-center justify-between relative z-10">
|
|
<a href="@Url.Action("Index", "Home")" class="w-10 h-10 flex items-center justify-center bg-white/10 rounded-xl backdrop-blur-md hover:bg-white/20 transition-all">
|
|
<i class="w-5 h-5" data-lucide="chevron-left"></i>
|
|
</a>
|
|
<h1 class="text-lg font-black uppercase tracking-tight">Detail SPJ</h1>
|
|
<div class="w-10"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-4 pb-6 relative -mt-10 z-20 space-y-4">
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
|
|
<div class="flex items-start justify-between gap-3 border-b border-gray-100 pb-4 mb-4">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-2 flex-wrap">
|
|
<div class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-xs font-bold border border-green-200" id="status-badge">-</div>
|
|
<div class="text-xs text-gray-500" id="tanggal-selesai">-</div>
|
|
</div>
|
|
<h3 class="font-bold text-gray-900 text-lg" id="nama-perusahaan">-</h3>
|
|
<p class="text-sm text-gray-700 leading-relaxed mt-1" id="alamat-perusahaan">-</p>
|
|
</div>
|
|
<div class="w-12 h-12 rounded-2xl bg-green-50 flex items-center justify-center text-green-600 border border-green-100 shrink-0">
|
|
<i class="w-6 h-6" data-lucide="badge-check"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="rounded-xl bg-gray-50 border border-gray-100 p-3">
|
|
<p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1">No. SPJ</p>
|
|
<p class="text-sm font-bold text-gray-800 wrap-break-word" id="nomor-spj">-</p>
|
|
</div>
|
|
<div class="rounded-xl bg-gray-50 border border-gray-100 p-3">
|
|
<p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1">Plat Nomor</p>
|
|
<p class="text-sm font-bold text-gray-800" id="plat-nomor">-</p>
|
|
</div>
|
|
<div class="rounded-xl bg-gray-50 border border-gray-100 p-3">
|
|
<p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1">No. Pintu</p>
|
|
<p class="text-sm font-bold text-gray-800" id="nomor-pintu">-</p>
|
|
</div>
|
|
<div class="rounded-xl bg-gray-50 border border-gray-100 p-3">
|
|
<p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1">Petugas</p>
|
|
<p class="text-sm font-bold text-gray-800" id="nama-checker">-</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<h3 class="font-bold text-gray-900">Ringkasan Timbangan</h3>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-2 mb-4">
|
|
<div class="bg-green-50 rounded-xl p-3 border border-green-100">
|
|
<p class="text-[9px] text-green-600 font-bold uppercase tracking-wider">Organik</p>
|
|
<p class="text-sm font-black text-green-700"><span id="total-organik">0,00</span> kg</p>
|
|
</div>
|
|
<div class="bg-blue-50 rounded-xl p-3 border border-blue-100">
|
|
<p class="text-[9px] text-blue-600 font-bold uppercase tracking-wider">Anorganik</p>
|
|
<p class="text-sm font-black text-blue-700"><span id="total-anorganik">0,00</span> kg</p>
|
|
</div>
|
|
<div class="bg-red-50 rounded-xl p-3 border border-red-100">
|
|
<p class="text-[9px] text-red-600 font-bold uppercase tracking-wider">Residu</p>
|
|
<p class="text-sm font-black text-red-700"><span id="total-residu">0,00</span> kg</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-xl bg-upst/5 px-4 py-3 border border-upst/10 flex items-center justify-between">
|
|
<p class="text-sm font-bold text-gray-700">Total Keseluruhan</p>
|
|
<p class="text-2xl font-black text-upst"><span id="total-keseluruhan">0,00</span> kg</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<h3 class="font-bold text-gray-900">Daftar TPS</h3>
|
|
</div>
|
|
<div class="space-y-3" id="tps-list-container"></div>
|
|
</div>
|
|
</div>
|
|
<partial name="~/Views/Admin/Transport/SpjDriverUpst/Shared/Components/_Navigation.cshtml" />
|
|
|
|
@section Scripts {
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', async function () {
|
|
const formatWeight = (value) => new Intl.NumberFormat('id-ID', {
|
|
minimumFractionDigits: 2,
|
|
maximumFractionDigits: 2
|
|
}).format(Number(value || 0));
|
|
const formatDateTime = (value) => {
|
|
const date = new Date(value);
|
|
return new Intl.DateTimeFormat('id-ID', {
|
|
day: '2-digit',
|
|
month: 'short',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
timeZone: 'Asia/Jakarta'
|
|
}).format(date) + ' WIB';
|
|
};
|
|
|
|
const renderTpsList = (tpsList) => {
|
|
const tpsContainer = document.getElementById('tps-list-container');
|
|
tpsContainer.innerHTML = '';
|
|
|
|
if (!Array.isArray(tpsList) || tpsList.length === 0) {
|
|
tpsContainer.innerHTML = '<div class="rounded-xl border border-dashed border-gray-300 bg-gray-50 px-4 py-5 text-center text-sm text-gray-500">Belum ada data TPS selesai.</div>';
|
|
return;
|
|
}
|
|
|
|
tpsList.forEach((tps) => {
|
|
const status = (tps.status || 'Selesai').toLowerCase();
|
|
const isBatal = status === 'batal';
|
|
const statusBadgeClass = isBatal
|
|
? 'bg-red-100 text-red-700'
|
|
: 'bg-green-100 text-green-700';
|
|
const itemClass = isBatal
|
|
? 'rounded-2xl border border-red-100 bg-red-50 p-4'
|
|
: 'rounded-2xl border border-gray-100 bg-gray-50 p-4';
|
|
const detailNote = isBatal && tps.keterangan
|
|
? `<div class="mt-3 rounded-xl border border-red-200 bg-white px-3 py-2 text-xs text-red-700 leading-relaxed">${tps.keterangan}</div>`
|
|
: '';
|
|
const item = document.createElement('div');
|
|
item.className = itemClass;
|
|
item.innerHTML = `
|
|
<div class="flex flex-col items-start justify-between gap-3 mb-3">
|
|
<div>
|
|
<div class="flex items-center gap-2 mb-1 flex-wrap">
|
|
<span class="bg-blue-100 text-blue-700 px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider">${tps.kode}</span>
|
|
<span class="${statusBadgeClass} px-2.5 py-1 rounded-full text-[10px] font-bold">${tps.status || 'Selesai'}</span>
|
|
</div>
|
|
<h4 class="font-bold text-gray-900 text-sm">${tps.nama}</h4>
|
|
<p class="text-xs text-gray-500 mt-1 leading-relaxed">${tps.alamat}</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2 text-xs">
|
|
<div class="rounded-xl bg-white border border-gray-100 p-3">
|
|
<p class="text-gray-400 font-black uppercase tracking-wider text-[9px] mb-1">Organik</p>
|
|
<p class="font-black text-green-700">${formatWeight(tps.timbangan.organik)} kg</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white border border-gray-100 p-3">
|
|
<p class="text-gray-400 font-black uppercase tracking-wider text-[9px] mb-1">Anorganik</p>
|
|
<p class="font-black text-blue-700">${formatWeight(tps.timbangan.anorganik)} kg</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white border border-gray-100 p-3">
|
|
<p class="text-gray-400 font-black uppercase tracking-wider text-[9px] mb-1">Residu</p>
|
|
<p class="font-black text-red-700">${formatWeight(tps.timbangan.residu)} kg</p>
|
|
</div>
|
|
<div class="rounded-xl bg-white border border-upst/10 p-3">
|
|
<p class="text-gray-400 font-black uppercase tracking-wider text-[9px] mb-1">Total</p>
|
|
<p class="font-black text-upst text-md">${formatWeight(tps.timbangan.total)} kg</p>
|
|
</div>
|
|
</div>
|
|
${detailNote}
|
|
`;
|
|
tpsContainer.appendChild(item);
|
|
});
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('/driver/json/selesai-data.json');
|
|
const data = await response.json();
|
|
const selesai = data.selesai;
|
|
|
|
document.getElementById('status-badge').textContent = selesai.status;
|
|
document.getElementById('nama-perusahaan').textContent = selesai.namaPerusahaan;
|
|
document.getElementById('alamat-perusahaan').textContent = selesai.alamat;
|
|
document.getElementById('nomor-spj').textContent = selesai.nomorSpj;
|
|
document.getElementById('plat-nomor').textContent = selesai.platNomor;
|
|
document.getElementById('nomor-pintu').textContent = selesai.nomorPintu;
|
|
document.getElementById('nama-checker').textContent = selesai.petugas.checker;
|
|
|
|
document.getElementById('total-organik').textContent = formatWeight(selesai.timbangan.organik);
|
|
document.getElementById('total-anorganik').textContent = formatWeight(selesai.timbangan.anorganik);
|
|
document.getElementById('total-residu').textContent = formatWeight(selesai.timbangan.residu);
|
|
document.getElementById('total-keseluruhan').textContent = formatWeight(selesai.timbangan.total);
|
|
|
|
document.getElementById('tanggal-selesai').textContent = formatDateTime(selesai.tanggalSelesai);
|
|
renderTpsList(selesai.tpsList);
|
|
} catch (error) {
|
|
console.error('Error loading selesai data:', error);
|
|
}
|
|
});
|
|
</script>
|
|
}
|