amar
/
pesapakawan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: SPJ dan Image Home

main
marszayn 2025-08-18 19:17:26 +07:00
parent 636d3d47fc
commit 6d569dac06
21 changed files with 1614 additions and 617 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Controllers/SpjDriverController/SpjDriverController.cs
View File

@ -50,7 +50,7 @@ public class SpjDriverController : Controller
} }
[HttpGet("/submit/struk")] [HttpGet("submit/struk")]
public IActionResult Struk() public IActionResult Struk()
{ {
return View("~/Views/Admin/Transport/SpjDriver/Submit/Struk.cshtml"); return View("~/Views/Admin/Transport/SpjDriver/Submit/Struk.cshtml");

16
Views/Admin/Transport/SpjAdmin/History/Details.cshtml
View File

@ -5,7 +5,7 @@
<div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen"> <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
<!-- Header --> <!-- Header -->
<div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg"> <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="@Url.Action("Index", "History")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200"> <a href="@Url.Action("Index", "History")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
<i class="w-5 h-5" data-lucide="chevron-left"></i> <i class="w-5 h-5" data-lucide="chevron-left"></i>
@ -19,8 +19,8 @@
<!-- SPJ Information Card --> <!-- SPJ Information Card -->
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100"> <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center"> <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
<i class="w-5 h-5 text-orange-600" data-lucide="file-text"></i> <i class="w-5 h-5 text-cyan-600" data-lucide="file-text"></i>
</div> </div>
<div> <div>
<h2 class="text-lg font-bold text-gray-900">Muhammad Yusuf</h2> <h2 class="text-lg font-bold text-gray-900">Muhammad Yusuf</h2>
@ -35,7 +35,7 @@
</div> </div>
<div class="flex justify-between items-center py-2 border-b border-gray-50"> <div class="flex justify-between items-center py-2 border-b border-gray-50">
<span class="text-sm text-gray-600">Plat Nomor</span> <span class="text-sm text-gray-600">Plat Nomor</span>
<span class="bg-orange-50 text-orange-700 px-3 py-1 rounded-full text-sm font-medium">B 9632 TOR</span> <span class="bg-cyan-50 text-cyan-700 px-3 py-1 rounded-full text-sm font-medium">B 9632 TOR</span>
</div> </div>
<div class="flex justify-between items-center py-2 border-b border-gray-50"> <div class="flex justify-between items-center py-2 border-b border-gray-50">
<span class="text-sm text-gray-600">Nomer Pintu</span> <span class="text-sm text-gray-600">Nomer Pintu</span>
@ -52,8 +52,8 @@
<!-- Summary Card --> <!-- Summary Card -->
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100"> <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center"> <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
<i class="w-5 h-5 text-orange-600" data-lucide="bar-chart-3"></i> <i class="w-5 h-5 text-cyan-600" data-lucide="bar-chart-3"></i>
</div> </div>
<div> <div>
<h2 class="text-lg font-bold text-gray-900">Ringkasan</h2> <h2 class="text-lg font-bold text-gray-900">Ringkasan</h2>
@ -84,8 +84,8 @@
<!-- Pickup Locations --> <!-- Pickup Locations -->
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100"> <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center"> <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
<i class="w-5 h-5 text-orange-600" data-lucide="map-pin"></i> <i class="w-5 h-5 text-cyan-600" data-lucide="map-pin"></i>
</div> </div>
<div> <div>
<h2 class="text-lg font-bold text-gray-900">Lokasi Pengangkutan</h2> <h2 class="text-lg font-bold text-gray-900">Lokasi Pengangkutan</h2>

10
Views/Admin/Transport/SpjAdmin/History/Index.cshtml
View File

@ -4,7 +4,7 @@
} }
<div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen"> <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
<div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg"> <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="@Url.Action("Index", "Admin")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200"> <a href="@Url.Action("Index", "Admin")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
<i class="w-5 h-5" data-lucide="chevron-left"></i> <i class="w-5 h-5" data-lucide="chevron-left"></i>
@ -79,8 +79,8 @@
@foreach (var spj in spjList) @foreach (var spj in spjList)
{ {
<a href="@Url.Action("Details", "Admin", new { id = spj.Id })" class="block"> <a href="@Url.Action("Details", "Admin", new { id = spj.Id })" class="block">
<div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-lg hover:border-orange-200 transition-all duration-300 relative overflow-hidden"> <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-lg hover:border-cyan-200 transition-all duration-300 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-orange-400 to-orange-500"></div> <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-400 to-cyan-500"></div>
<div class="flex items-start justify-between mb-3"> <div class="flex items-start justify-between mb-3">
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
@ -111,8 +111,8 @@
<div class="bg-gray-50 rounded-xl p-3 mb-3"> <div class="bg-gray-50 rounded-xl p-3 mb-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center"> <div class="w-10 h-10 bg-cyan-100 rounded-lg flex items-center justify-center">
<i class="w-5 h-5 text-orange-600" data-lucide="car"></i> <i class="w-5 h-5 text-cyan-600" data-lucide="car"></i>
</div> </div>
<div> <div>
<div class="font-bold text-gray-900 text-sm">@spj.Plat</div> <div class="font-bold text-gray-900 text-sm">@spj.Plat</div>

10
Views/Admin/Transport/SpjAdmin/Home/Index.cshtml
View File

@ -5,7 +5,7 @@
<div class="w-full lg:max-w-sm mx-auto bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative overflow-hidden"> <div class="w-full lg:max-w-sm mx-auto bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative overflow-hidden">
<div class="relative z-10"> <div class="relative z-10">
<div class="bg-gradient-to-br from-orange-500 via-orange-600 to-red-500 rounded-b-[2rem] shadow-2xl p-6 mb-6"> <div class="bg-gradient-to-br from-cyan-500 via-cyan-600 to-red-500 rounded-b-[2rem] shadow-2xl p-6 mb-6">
<div class="relative z-10 pt-8 pb-4"> <div class="relative z-10 pt-8 pb-4">
@ -15,8 +15,8 @@
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<div class="relative"> <div class="relative">
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-white to-orange-100 p-1 shadow-lg"> <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-white to-cyan-100 p-1 shadow-lg">
<div class="w-full h-full rounded-xl bg-gradient-to-br from-orange-400 to-orange-600 flex items-center justify-center shadow-inner"> <div class="w-full h-full rounded-xl bg-gradient-to-br from-cyan-400 to-cyan-600 flex items-center justify-center shadow-inner">
<i class="w-8 h-8 text-white" data-lucide="user"></i> <i class="w-8 h-8 text-white" data-lucide="user"></i>
</div> </div>
</div> </div>
@ -29,7 +29,7 @@
<div class="flex flex-col"> <div class="flex flex-col">
<h1 class="text-xl font-bold text-white leading-tight">Yusuf</h1> <h1 class="text-xl font-bold text-white leading-tight">Yusuf</h1>
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<span class="bg-orange-700/30 text-orange-100 px-3 py-1 rounded-full text-sm font-base backdrop-blur-sm border border-orange-400/20"> <span class="bg-cyan-700/30 text-cyan-100 px-3 py-1 rounded-full text-sm font-base backdrop-blur-sm border border-cyan-400/20">
Administrator Administrator
</span> </span>
</div> </div>
@ -63,7 +63,7 @@
<div class="mt-4 text-center"> <div class="mt-4 text-center">
<h2 class="text-white/90 text-lg font-semibold">Selamat Datang!</h2> <h2 class="text-white/90 text-lg font-semibold">Selamat Datang!</h2>
<p class="text-orange-100/70 text-sm">Siap kelola sistem eSPJ dengan efisien</p> <p class="text-cyan-100/70 text-sm">Siap kelola sistem eSPJ dengan efisien</p>
</div> </div>
</div> </div>
</div> </div>

14
Views/Admin/Transport/SpjAdmin/Scan/Index.cshtml
View File

@ -112,7 +112,7 @@
<div class="w-full lg:max-w-sm mx-auto bg-white min-h-screen"> <div class="w-full lg:max-w-sm mx-auto bg-white min-h-screen">
<div class="bg-orange-500 text-white px-3 py-4 rounded-b-2xl relative pb-12"> <div class="bg-cyan-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors"> <a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors">
<i class="w-5 h-5" data-lucide="chevron-left"></i> <i class="w-5 h-5" data-lucide="chevron-left"></i>
@ -164,7 +164,7 @@
</div> </div>
<div class="space-y-3 mb-4"> <div class="space-y-3 mb-4">
<button id="start-scanner" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-3 px-4 rounded-lg transition-colors btn-scanner"> <button id="start-scanner" class="w-full bg-cyan-500 hover:bg-cyan-600 text-white font-medium py-3 px-4 rounded-lg transition-colors btn-scanner">
<i class="w-5 h-5 inline mr-2" data-lucide="camera"></i> <i class="w-5 h-5 inline mr-2" data-lucide="camera"></i>
Mulai Scan Mulai Scan
</button> </button>
@ -262,7 +262,7 @@
</div> </div>
<h3 id="modal-title" class="text-xl font-bold mb-3 text-gray-800"></h3> <h3 id="modal-title" class="text-xl font-bold mb-3 text-gray-800"></h3>
<p id="modal-message" class="text-gray-600 mb-6 leading-relaxed"></p> <p id="modal-message" class="text-gray-600 mb-6 leading-relaxed"></p>
<button id="modal-close" class="bg-orange-500 hover:bg-orange-600 text-white px-8 py-3 rounded-xl transition-all duration-200 font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5"> <button id="modal-close" class="bg-cyan-500 hover:bg-cyan-600 text-white px-8 py-3 rounded-xl transition-all duration-200 font-medium shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
OK OK
</button> </button>
</div> </div>
@ -381,7 +381,7 @@
'<div class="spj-code">' + spj.platNomor + '|' + spj.nomorPintu + '</div>' + '<div class="spj-code">' + spj.platNomor + '|' + spj.nomorPintu + '</div>' +
@* '<div class="spj-details">' + @* '<div class="spj-details">' +
'<span>' + spj.driverName + '</span>' + '<span>' + spj.driverName + '</span>' +
'<span class="bg-orange-300 rounded-full px-2 py-1 text-xs text-gray-500">' + spj.nomorPintu + '</span>' + '<span class="bg-cyan-300 rounded-full px-2 py-1 text-xs text-gray-500">' + spj.nomorPintu + '</span>' +
'</div>' + *@ '</div>' + *@
'<div style="font-size: 11px; color: #9ca3af; font-family: monospace;">' + spj.text + '</div>' + '<div style="font-size: 11px; color: #9ca3af; font-family: monospace;">' + spj.text + '</div>' +
'</div>' '</div>'
@ -452,7 +452,7 @@
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
this.startBtn.disabled = true; this.startBtn.disabled = true;
this.startBtn.innerHTML = '<i class="w-5 h-5 inline mr-2" data-lucide="x-circle"></i>Browser Tidak Didukung'; this.startBtn.innerHTML = '<i class="w-5 h-5 inline mr-2" data-lucide="x-circle"></i>Browser Tidak Didukung';
this.startBtn.classList.remove('bg-orange-500', 'hover:bg-orange-600'); this.startBtn.classList.remove('bg-cyan-500', 'hover:bg-cyan-600');
this.startBtn.classList.add('bg-gray-400', 'cursor-not-allowed'); this.startBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
this.showError('Browser Anda tidak mendukung akses kamera. Gunakan browser modern seperti Chrome, Firefox, atau Safari.'); this.showError('Browser Anda tidak mendukung akses kamera. Gunakan browser modern seperti Chrome, Firefox, atau Safari.');
return; return;
@ -461,7 +461,7 @@
if (typeof Html5Qrcode === 'undefined') { if (typeof Html5Qrcode === 'undefined') {
this.startBtn.disabled = true; this.startBtn.disabled = true;
this.startBtn.innerHTML = '<i class="w-5 h-5 inline mr-2" data-lucide="x-circle"></i>Library Tidak Dimuat'; this.startBtn.innerHTML = '<i class="w-5 h-5 inline mr-2" data-lucide="x-circle"></i>Library Tidak Dimuat';
this.startBtn.classList.remove('bg-orange-500', 'hover:bg-orange-600'); this.startBtn.classList.remove('bg-cyan-500', 'hover:bg-cyan-600');
this.startBtn.classList.add('bg-gray-400', 'cursor-not-allowed'); this.startBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
this.showError('Library scanner tidak dapat dimuat. Periksa koneksi internet dan refresh halaman.'); this.showError('Library scanner tidak dapat dimuat. Periksa koneksi internet dan refresh halaman.');
return; return;
@ -942,7 +942,7 @@
`; `;
const warningContent = ` const warningContent = `
<div class="bg-gradient-to-br from-yellow-50 via-amber-50 to-orange-50 rounded-2xl p-6 border border-yellow-200 shadow-inner"> <div class="bg-gradient-to-br from-yellow-50 via-amber-50 to-cyan-50 rounded-2xl p-6 border border-yellow-200 shadow-inner">
<div class="flex items-center justify-center mb-4"> <div class="flex items-center justify-center mb-4">
<div class="bg-gradient-to-r from-yellow-500 to-amber-600 text-white rounded-xl px-4 py-2 shadow-lg"> <div class="bg-gradient-to-r from-yellow-500 to-amber-600 text-white rounded-xl px-4 py-2 shadow-lg">
<span class="font-mono font-bold text-xl tracking-wider">${code}</span> <span class="font-mono font-bold text-xl tracking-wider">${code}</span>

14
Views/Admin/Transport/SpjAdmin/Shared/Components/_Navigation.cshtml
View File

@ -12,10 +12,10 @@
<!-- Home Button --> <!-- Home Button -->
<a href="@Url.Action("Index", "SpjAdmin")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group"> <a href="@Url.Action("Index", "SpjAdmin")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group">
<div class="relative"> <div class="relative">
<i class="w-6 h-6 text-gray-400 group-hover:text-orange-500 transition-colors duration-300" data-lucide="home"></i> <i class="w-6 h-6 text-gray-400 group-hover:text-cyan-500 transition-colors duration-300" data-lucide="home"></i>
<div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-orange-500 group-hover:w-full transition-all duration-300"></div> <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-300"></div>
</div> </div>
<span class="text-xs text-gray-600 group-hover:text-orange-500 font-medium transition-colors duration-300">Home</span> <span class="text-xs text-gray-600 group-hover:text-cyan-500 font-medium transition-colors duration-300">Home</span>
</a> </a>
<div class="w-12"></div> <div class="w-12"></div>
@ -24,17 +24,17 @@
<a href="@Url.Action("History", "SpjAdmin")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group"> <a href="@Url.Action("History", "SpjAdmin")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group">
<div class="relative"> <div class="relative">
<i class="w-6 h-6 text-gray-400 group-hover:text-orange-500 transition-colors duration-300" data-lucide="clipboard-check"></i> <i class="w-6 h-6 text-gray-400 group-hover:text-cyan-500 transition-colors duration-300" data-lucide="clipboard-check"></i>
<div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-orange-500 group-hover:w-full transition-all duration-300"></div> <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-300"></div>
</div> </div>
<span class="text-xs text-gray-600 group-hover:text-orange-500 font-medium transition-colors duration-300">History</span> <span class="text-xs text-gray-600 group-hover:text-cyan-500 font-medium transition-colors duration-300">History</span>
</a> </a>
</div> </div>
</div> </div>
<!-- Center Submit --> <!-- Center Submit -->
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2"> <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<a href="@Url.Action("Scan", "SpjAdmin")" id="odoBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-orange-500 via-orange-400 to-orange-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-orange-200"> <a href="@Url.Action("Scan", "SpjAdmin")" id="odoBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-cyan-500 via-cyan-400 to-cyan-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-cyan-200">
<i class="w-6 h-6 text-white" data-lucide="camera"></i> <i class="w-6 h-6 text-white" data-lucide="camera"></i>
</a> </a>
</div> </div>

12
Views/Admin/Transport/SpjDriver/DetailPenjemputan/Batal.cshtml
View File

@ -4,7 +4,7 @@
} }
<div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen"> <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
<div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg"> <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="@Url.Action("Index", "Home")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200"> <a href="@Url.Action("Index", "Home")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
<i class="w-5 h-5" data-lucide="chevron-left"></i> <i class="w-5 h-5" data-lucide="chevron-left"></i>
@ -17,8 +17,8 @@
<div class="px-4 pt-4"> <div class="px-4 pt-4">
<div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 mb-4"> <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 mb-4">
<div class="flex items-center gap-3 mb-3"> <div class="flex items-center gap-3 mb-3">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center"> <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
<i class="w-5 h-5 text-orange-600" data-lucide="map-pin"></i> <i class="w-5 h-5 text-cyan-600" data-lucide="map-pin"></i>
</div> </div>
<div> <div>
<h3 class="font-bold text-gray-900">CV Tri Berkah Sejahtera</h3> <h3 class="font-bold text-gray-900">CV Tri Berkah Sejahtera</h3>
@ -34,8 +34,8 @@
<div class="px-4 pb-6"> <div class="px-4 pb-6">
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100"> <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center"> <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
<i class="w-5 h-5 text-orange-600" data-lucide="file-text"></i> <i class="w-5 h-5 text-cyan-600" data-lucide="file-text"></i>
</div> </div>
<div> <div>
<h2 class="text-lg font-bold text-gray-900">Form Pembatalan</h2> <h2 class="text-lg font-bold text-gray-900">Form Pembatalan</h2>
@ -63,7 +63,7 @@
Batal Batal
</a> </a>
<button type="submit" <button type="submit"
class="flex-1 bg-gradient-to-r from-orange-500 to-orange-600 text-white font-semibold py-3 rounded-xl hover:from-orange-600 hover:to-orange-700 transition-all duration-200 shadow-lg"> class="flex-1 bg-gradient-to-r from-cyan-500 to-cyan-600 text-white font-semibold py-3 rounded-xl hover:from-cyan-600 hover:to-cyan-700 transition-all duration-200 shadow-lg">
Konfirmasi Konfirmasi
</button> </button>
</div> </div>

83
Views/Admin/Transport/SpjDriver/DetailPenjemputan/Index.cshtml
View File

@ -4,9 +4,9 @@
} }
<div class="w-full lg:max-w-sm mx-auto min-h-screen"> <div class="w-full lg:max-w-sm mx-auto min-h-screen">
<div class="bg-orange-500 text-white px-4 py-6 rounded-b-3xl relative pb-12"> <div class="bg-cyan-500 text-white px-4 py-6 rounded-b-3xl relative pb-12">
<div class="flex items-center justify-center relative"> <div class="flex items-center justify-center relative">
<a href="@Url.Action("Index", "Home")" class="absolute left-0 p-1 hover:bg-white/10 rounded-full transition-colors"> <a href="@Url.Action("DetailPenjemputan", "SpjDriver")" class="absolute left-0 p-1 hover:bg-white/10 rounded-full transition-colors">
<i class="w-5 h-5" data-lucide="chevron-left"></i> <i class="w-5 h-5" data-lucide="chevron-left"></i>
</a> </a>
<h1 class="text-xl font-bold">Detail Lokasi</h1> <h1 class="text-xl font-bold">Detail Lokasi</h1>
@ -14,9 +14,9 @@
</div> </div>
<div class="flex justify-center -mt-10 mb-6 relative"> <div class="flex justify-center -mt-10 mb-6 relative">
<div class="bg-orange-100 border border-orange-400 px-4 py-2 rounded-xl shadow flex flex-col items-center"> <div class="bg-cyan-100 border border-cyan-400 px-4 py-2 rounded-xl shadow flex flex-col items-center">
<span class="text-green-700 font-bold text-lg">B 9632 TOR</span> <span class="text-green-700 font-bold text-lg">B 9632 TOR</span>
<span class="text-orange-500 text-xs mt-1">(JRC 005)</span> <span class="text-cyan-500 text-xs mt-1">(JRC 005)</span>
</div> </div>
</div> </div>
@ -39,14 +39,14 @@
</p> </p>
</div> </div>
<div class="space-y-6"> @* <div class="space-y-6">
<form method="post" enctype="multipart/form-data"> <form method="post" enctype="multipart/form-data">
<h3 class="font-bold text-gray-800 text-center text-lg tracking-wide mb-4">Masukkan Odometer</h3> <h3 class="font-bold text-gray-800 text-center text-lg tracking-wide mb-4">Masukkan Odometer</h3>
<div class="flex justify-center"> <div class="flex justify-center">
<div class="relative flex items-center justify-center"> <div class="relative flex items-center justify-center">
<img src="@Url.Content("~/driver/odo_simple.svg")" class="overflow-visible drop-shadow-lg scale-110" alt=""> <img src="@Url.Content("~/driver/odo_simple.svg")" class="overflow-visible drop-shadow-lg scale-110" alt="">
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2"> <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2">
<input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="7" name="Odometer" id="input-odometer" class="bg-gray-900 text-green-400 px-4 py-2 rounded-lg text-lg font-mono tracking-widest text-center w-36 outline-none border-2 border-green-400 focus:ring-2 focus:ring-orange-400 transition" placeholder="000000" /> <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="7" name="Odometer" id="input-odometer" class="bg-gray-900 text-green-400 px-4 py-2 rounded-lg text-lg font-mono tracking-widest text-center w-36 outline-none border-2 border-green-400 focus:ring-2 focus:ring-cyan-400 transition" placeholder="000000" />
</div> </div>
</div> </div>
</div> </div>
@ -54,16 +54,83 @@
<input type="hidden" name="Longitude" id="input-longitude" /> <input type="hidden" name="Longitude" id="input-longitude" />
<input type="hidden" name="AlamatJalan" id="input-alamat-jalan" /> <input type="hidden" name="AlamatJalan" id="input-alamat-jalan" />
<div class="pt-6 flex gap-3"> <div class="pt-6 flex gap-3">
<a href="@Url.Action("Batal", "DetailPenjemputan")" class="w-full bg-red-500 text-white py-3 rounded-xl font-bold text-lg shadow hover:scale-105 hover:bg-red-600 transition-all duration-200 flex items-center justify-center gap-2"> <a href="@Url.Action("BatalJemput", "SpjDriver")" class="w-full bg-red-500 text-white py-3 rounded-xl font-bold text-lg shadow hover:scale-105 hover:bg-red-600 transition-all duration-200 flex items-center justify-center gap-2">
Batal Angkut Batal Angkut
</a> </a>
<button type="submit" class="hover:cursor-pointer w-full bg-gradient-to-r from-orange-500 to-orange-400 text-white py-3 rounded-xl font-bold text-lg shadow-xl hover:scale-105 hover:bg-orange-600 transition-all duration-200 flex items-center justify-center gap-2"> <button type="submit" class="hover:cursor-pointer w-full bg-gradient-to-r from-cyan-500 to-cyan-400 text-white py-3 rounded-xl font-bold text-lg shadow-xl hover:scale-105 hover:bg-cyan-600 transition-all duration-200 flex items-center justify-center gap-2">
Submit Submit
</button> </button>
</div> </div>
</form> </form>
</div> *@
<div class="mt-6 space-y-4">
<h3 class="font-bold text-gray-800 text-center text-lg tracking-wide">Data Pengangkutan</h3>
<div class="bg-gray-50 rounded-xl p-4 shadow-sm">
<div class="mb-4">
<label for="input-berat" class="block text-sm font-medium text-gray-700 mb-1">Berat Sampah (kg)</label>
<div class="relative">
<input type="number" step="0.01" min="0" name="BeratSampah" id="input-berat"
class="w-full bg-white border border-gray-300 text-gray-900 rounded-lg px-4 py-2.5
focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 transition-all"
placeholder="0.00" required />
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<span class="text-gray-500">kg</span>
</div>
</div>
</div>
<div>
<label for="input-tanggal" class="block text-sm font-medium text-gray-700 mb-1">Tanggal Pengangkutan</label>
<input type="datetime-local" name="TanggalPengangkutan" id="input-tanggal"
class="w-full bg-white border border-gray-300 text-gray-900 rounded-lg px-4 py-2.5
focus:ring-2 focus:ring-cyan-400 focus:border-cyan-400 transition-all"
required />
</div>
</div>
</div> </div>
<div class="mt-6 mb-16">
<form method="post" action="@Url.Action("SubmitPenjemputan", "SpjDriver")" class="space-y-4">
<input type="hidden" name="BeratSampah" id="hidden-berat" />
<input type="hidden" name="TanggalPengangkutan" id="hidden-tanggal" />
<button type="submit" class="w-full bg-gradient-to-r from-cyan-500 to-cyan-400 text-white py-3 rounded-xl font-bold text-lg shadow-xl hover:scale-105 hover:bg-cyan-600 transition-all duration-200 flex items-center justify-center gap-2">
<i class="w-5 h-5" data-lucide="check-circle"></i>
Simpan Data Pengangkutan
</button>
<a href="@Url.Action("DetailPenjemputan", "SpjDriver")" class="block text-center w-full bg-gray-200 text-gray-700 py-3 rounded-xl font-medium shadow hover:bg-gray-300 transition-all duration-200">
Kembali
</a>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('form');
const inputBerat = document.getElementById('input-berat');
const inputTanggal = document.getElementById('input-tanggal');
const hiddenBerat = document.getElementById('hidden-berat');
const hiddenTanggal = document.getElementById('hidden-tanggal');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (!inputBerat.value || !inputTanggal.value) {
alert('Mohon lengkapi semua data pengangkutan');
return;
}
hiddenBerat.value = inputBerat.value;
hiddenTanggal.value = inputTanggal.value;
this.submit();
});
});
</script>
<partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" /> <partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
</div> </div>

18
Views/Admin/Transport/SpjDriver/History/Details.cshtml
View File

@ -5,9 +5,9 @@
<div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen"> <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
<!-- Header --> <!-- Header -->
<div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg"> <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="@Url.Action("Index", "History")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200"> <a href="@Url.Action("HistoryDetails", "SpjDriver")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
<i class="w-5 h-5" data-lucide="chevron-left"></i> <i class="w-5 h-5" data-lucide="chevron-left"></i>
</a> </a>
<h1 class="text-lg font-bold">Detail Perjalanan</h1> <h1 class="text-lg font-bold">Detail Perjalanan</h1>
@ -19,8 +19,8 @@
<!-- SPJ Information Card --> <!-- SPJ Information Card -->
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100"> <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center"> <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
<i class="w-5 h-5 text-orange-600" data-lucide="file-text"></i> <i class="w-5 h-5 text-cyan-600" data-lucide="file-text"></i>
</div> </div>
<div> <div>
<h2 class="text-lg font-bold text-gray-900">Data SPJ</h2> <h2 class="text-lg font-bold text-gray-900">Data SPJ</h2>
@ -35,7 +35,7 @@
</div> </div>
<div class="flex justify-between items-center py-2 border-b border-gray-50"> <div class="flex justify-between items-center py-2 border-b border-gray-50">
<span class="text-sm text-gray-600">Plat Nomor</span> <span class="text-sm text-gray-600">Plat Nomor</span>
<span class="bg-orange-50 text-orange-700 px-3 py-1 rounded-full text-sm font-medium">B 9632 TOR</span> <span class="bg-cyan-50 text-cyan-700 px-3 py-1 rounded-full text-sm font-medium">B 9632 TOR</span>
</div> </div>
<div class="flex justify-between items-center py-2 border-b border-gray-50"> <div class="flex justify-between items-center py-2 border-b border-gray-50">
<span class="text-sm text-gray-600">Nomer Pintu</span> <span class="text-sm text-gray-600">Nomer Pintu</span>
@ -52,8 +52,8 @@
<!-- Summary Card --> <!-- Summary Card -->
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100"> <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center"> <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
<i class="w-5 h-5 text-orange-600" data-lucide="bar-chart-3"></i> <i class="w-5 h-5 text-cyan-600" data-lucide="bar-chart-3"></i>
</div> </div>
<div> <div>
<h2 class="text-lg font-bold text-gray-900">Ringkasan</h2> <h2 class="text-lg font-bold text-gray-900">Ringkasan</h2>
@ -84,8 +84,8 @@
<!-- Pickup Locations --> <!-- Pickup Locations -->
<div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100"> <div class="bg-white rounded-2xl p-5 shadow-sm border border-gray-100">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center"> <div class="w-10 h-10 bg-cyan-100 rounded-full flex items-center justify-center">
<i class="w-5 h-5 text-orange-600" data-lucide="map-pin"></i> <i class="w-5 h-5 text-cyan-600" data-lucide="map-pin"></i>
</div> </div>
<div> <div>
<h2 class="text-lg font-bold text-gray-900">Lokasi Pengangkutan</h2> <h2 class="text-lg font-bold text-gray-900">Lokasi Pengangkutan</h2>

14
Views/Admin/Transport/SpjDriver/History/Index.cshtml
View File

@ -4,7 +4,7 @@
} }
<div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen"> <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
<div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg"> <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-4 py-4 sticky top-0 z-10 shadow-lg">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="@Url.Action("Index", "Home")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200"> <a href="@Url.Action("Index", "Home")" class="p-2 hover:bg-white/10 rounded-full transition-all duration-200">
<i class="w-5 h-5" data-lucide="chevron-left"></i> <i class="w-5 h-5" data-lucide="chevron-left"></i>
@ -73,14 +73,14 @@
<div class="px-4 py-4 space-y-3"> <div class="px-4 py-4 space-y-3">
@foreach (var spj in spjList) @foreach (var spj in spjList)
{ {
<a href="@Url.Action("Details", "History", new { id = spj.Id })" class="block"> <a href="@Url.Action("HistoryDetails", "SpjDriver", new { id = spj.Id })" class="block">
<div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-lg hover:border-orange-200 transition-all duration-300 relative overflow-hidden"> <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 hover:shadow-lg hover:border-cyan-200 transition-all duration-300 relative overflow-hidden">
<div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-orange-400 to-orange-500"></div> <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-cyan-400 to-cyan-500"></div>
<div class="flex items-start justify-between mb-3"> <div class="flex items-start justify-between mb-3">
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">
<div class="flex items-center gap-2 mb-1"> <div class="flex items-center gap-2 mb-1">
<div class="w-2 h-2 bg-orange-400 rounded-full"></div> <div class="w-2 h-2 bg-cyan-400 rounded-full"></div>
<span class="text-xs font-medium text-gray-500 uppercase tracking-wider">No. SPJ</span> <span class="text-xs font-medium text-gray-500 uppercase tracking-wider">No. SPJ</span>
</div> </div>
<div class="font-bold text-gray-900 text-sm">@spj.NoSpj</div> <div class="font-bold text-gray-900 text-sm">@spj.NoSpj</div>
@ -106,8 +106,8 @@
<div class="bg-gray-50 rounded-xl p-3 mb-3"> <div class="bg-gray-50 rounded-xl p-3 mb-3">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center"> <div class="w-10 h-10 bg-cyan-100 rounded-lg flex items-center justify-center">
<i class="w-5 h-5 text-orange-600" data-lucide="car"></i> <i class="w-5 h-5 text-cyan-600" data-lucide="car"></i>
</div> </div>
<div> <div>
<div class="font-bold text-gray-900 text-sm">@spj.Plat</div> <div class="font-bold text-gray-900 text-sm">@spj.Plat</div>

132
Views/Admin/Transport/SpjDriver/Home/Index.cshtml
View File

@ -3,72 +3,93 @@
ViewData["Title"] = "Home Page"; ViewData["Title"] = "Home Page";
} }
<div class="w-full lg:max-w-sm mx-auto bg-white min-h-screen"> <div class="w-full lg:max-w-sm mx-auto bg-gray-50 min-h-screen">
<!-- Header --> <div class="absolute top-0 w-full lg:max-w-sm mx-auto bg-gradient-to-r from-cyan-600 to-cyan-500 text-white rounded-b-3xl h-[250px] flex flex-col justify-between px-6 py-6 shadow-lg z-10">
<div class="absolute top-0 w-full lg:max-w-sm mx-auto bg-orange-500 text-white rounded-br-[125px] h-[250px] flex flex-row justify-between items-start px-6 py-6 shadow-lg z-20"> <div class="flex justify-between items-center">
<div class="flex flex-col"> <div class="flex flex-col">
<h1 class="text-md font-bold leading-tight text-white">Bonny Agung Putra</h1> <h1 class="text-xl font-bold text-white mb-1">Bonny Agung Putra</h1>
<p class="text-xs opacity-90 font-medium text-orange-100">Driver UPST</span></p> <div class="flex items-center gap-2">
<!-- Your Location --> <div class="w-2 h-2 bg-green-300 rounded-full animate-pulse"></div>
<div class="mt-5 flex items-center gap-2"> <p class="text-sm font-medium text-cyan-100">Driver</p>
</div>
</div>
<div class="relative">
<div class="w-12 h-12 rounded-full border-2 border-white overflow-hidden shadow-md flex items-center justify-center cursor-pointer bg-white/20 hover:bg-white/30 transition-all duration-200" id="profileMenuButton">
<i class="w-6 h-6 text-white" data-lucide="user"></i>
</div>
<div id="profileMenuDropdown" class="absolute top-14 right-0 mt-2 w-36 bg-white rounded-lg shadow-xl py-1.5 z-50 hidden border border-gray-100">
<form method="post" asp-controller="Auth" asp-action="Logout">
<button type="submit" class="flex items-center gap-2 w-full text-left px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 transition">
<i class="w-4 h-4" data-lucide="log-out"></i>
Logout
</button>
</form>
</div>
</div>
</div>
@* <div class="flex flex-col space-y-2">
<div class="flex items-center gap-2">
<div class="p-1.5 bg-white/20 rounded-lg">
<i class="w-4 h-4 text-white" data-lucide="map-pin"></i> <i class="w-4 h-4 text-white" data-lucide="map-pin"></i>
<span class="text-sm opacity-90">Lokasi Anda:</span> </div>
<span class="text-sm font-medium text-white/90">Lokasi Anda:</span>
</div> </div>
<p id="userLocation" class="font-semibold text-xs tracking-wide cursor-pointer underline text-white hover:text-orange-200 transition"> <div class="bg-white/10 rounded-lg p-3 border border-white/20">
<p id="userLocation" class="font-medium text-sm cursor-pointer text-white hover:text-cyan-200 transition-colors">
Mendeteksi lokasi... Mendeteksi lokasi...
</p> </p>
</div>
<div class="flex items-center justify-center">
<div class="relative flex flex-col items-center justify-center">
<div class="w-12 h-12 rounded-full border-3 border-white overflow-hidden shadow-md flex items-center justify-center cursor-pointer group" id="profileMenuButton">
<i class="w-8 h-8 text-white" data-lucide="user"></i>
</div>
<!-- Dropdown Menu -->
<div id="profileMenuDropdown" class="absolute top-12 right-0 mt-2 w-32 bg-white rounded shadow-lg py-2 z-50 hidden">
<form method="post" asp-controller="Auth" asp-action="Logout">
<button type="submit" class="hover:cursor-pointer flex items-center gap-2 w-full text-left px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 transition rounded-md">
<i class="w-4 h-4" data-lucide="log-out"></i>
Logout
</button>
</form>
</div>
</div> </div>
</div> *@
</div>
</div> </div>
<!-- SPJ Data Card --> <div class="bg-gradient-to-br from-cyan-700 to-cyan-900 text-white mx-4 px-5 py-5 mt-25 rounded-2xl relative shadow-lg border border-cyan-700/50 z-20">
<div class="bg-green-500 text-white mx-4 px-6 py-6 mt-40 rounded-2xl relative overflow-hidden shadow-lg z-21"> <div class="absolute inset-0 opacity-5">
<div class="absolute right-0 bottom-0 opacity-30 pointer-events-none select-none" style="width: 160px; height: 160px;"> <div class="absolute -top-5 -right-5 w-24 h-24 bg-white rounded-full"></div>
<img src="@Url.Content("~/driver/tree.svg")" alt="tree" class="w-full h-full object-contain"> <div class="absolute top-20 -left-5 w-12 h-12 bg-white rounded-full"></div>
</div> </div>
<div class="absolute right-3 bottom-3 opacity-15 pointer-events-none select-none" style="width: 120px; height: 120px;">
<img src="@Url.Content("~/driver/tree.svg")" alt="tree" class="w-full h-full object-contain">
</div>
<div class="relative z-10"> <div class="relative z-10">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-start mb-4">
<h2 class="text-xl font-bold">Data SPJ</h2> <div>
<div class="flex flex-col items-end"> <h2 class="text-xl font-bold mb-1 text-white">Data SPJ</h2>
<div class="bg-white text-green-600 px-4 py-2 rounded-full text-base font-bold shadow-md flex items-center gap-2"> <div class="w-10 h-1 bg-cyan-300 rounded-full"></div>
<span>B 9632 TOR</span>
</div>
<div class="text-xs text-white mt-1 font-semibold tracking-wide opacity-80">(JRC 005)</div>
</div>
</div> </div>
<div class="space-y-1 mt-2"> <div class="flex flex-col items-end gap-2">
<p class="text-sm opacity-90">No. SPJ</p> <div class="bg-white text-cyan-800 px-3 py-1.5 rounded-xl text-sm font-bold shadow flex items-center gap-1.5">
<p class="font-bold text-lg tracking-wide">SPJ/07-2025/PKM/000476</p> <i class="w-4 h-4 text-green-600" data-lucide="truck"></i>
<p class="text-sm opacity-90 mt-3">Tujuan Pembuangan</p> <span>B 9632 TOR</span>
<p class="font-bold text-lg tracking-wide">Taman Barito</p>
</div> </div>
<!-- DLH logo --> <div class="bg-cyan-700/70 text-white px-2.5 py-1 rounded-full text-xs font-medium tracking-wide border border-cyan-600/50">
<div class="absolute bottom-2 right-4 opacity-80 cursor-pointer" style="width: 60px; height: 60px;" id="qrCodeTrigger"> JRC 005
<div class="bg-white p-2 rounded-xl hover:shadow-lg transition-shadow">
<img src="@Url.Content("~/driver/images/qr.png")" alt="DLH Logo" class="w-full h-full object-contain">
</div>
</div> </div>
</div>
</div>
<div class="grid grid-cols-2 gap-3 mb-3">
<div class="bg-white/10 rounded-xl p-3 border border-white/20 col-span-2">
<p class="text-xs text-cyan-100 mb-1">No. SPJ</p>
<p class="font-bold text-base text-white">SPJ/07-2025/PKM/000476</p>
</div>
<div class=" p-3 col-span-2">
<p class="text-xs text-cyan-100 mb-1">Tujuan Pembuangan</p>
<p class="font-bold text-base text-white">BANTAR GEBANG</p>
</div>
</div>
<div class="absolute -bottom-3 right-1" id="qrCodeTrigger">
<div class="bg-white p-2.5 rounded-xl shadow-lg border-2 border-cyan-200 hover:shadow-xl transition-all duration-300 transform hover:scale-105">
<img src="@Url.Content("~/driver/images/qr.png")" alt="QR Code" class="w-14 h-14 object-contain">
</div>
</div>
</div> </div>
</div> </div>
<!-- Lokasi Pengangkutan -->
<div class="px-4 mt-8"> <div class="px-4 mt-8">
<div class="flex justify-between items-center mb-4"> <div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold text-gray-800">Lokasi Pengangkutan</h3> <h3 class="text-lg font-semibold text-gray-800">Lokasi Pengangkutan</h3>
@ -80,8 +101,7 @@
</div> </div>
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<!-- Location 1 - Berlangsung --> <a href="@Url.Action("DetailPenjemputan", "SpjDriver")" class="hover:cursor-pointer">
<a href="@Url.Action("Index", "DetailPenjemputan")" class="hover:cursor-pointer">
<div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 relative"> <div class="bg-white border border-gray-200 rounded-lg p-4 mb-3 relative">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div class="flex-1"> <div class="flex-1">
@ -100,7 +120,6 @@
</div> </div>
</div> </div>
</a> </a>
<!-- Location 2 - Selesai -->
<a href="@Url.Action("Index", "DetailPenjemputan")" class="hover:cursor-pointer"> <a href="@Url.Action("Index", "DetailPenjemputan")" class="hover:cursor-pointer">
<div class="bg-green-100 border border-green-200 rounded-lg p-4 mb-3 relative"> <div class="bg-green-100 border border-green-200 rounded-lg p-4 mb-3 relative">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
@ -121,7 +140,6 @@
</div> </div>
</a> </a>
<!-- Location 3 - Batal -->
<a href="@Url.Action("Batal", "DetailPenjemputan")" class="hover:cursor-pointer"> <a href="@Url.Action("Batal", "DetailPenjemputan")" class="hover:cursor-pointer">
<div class="bg-red-100 border border-red-200 rounded-lg p-4 mb-3 relative"> <div class="bg-red-100 border border-red-200 rounded-lg p-4 mb-3 relative">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
@ -145,31 +163,25 @@
</div> </div>
</div> </div>
<!-- Bottom Navigation -->
<partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" /> <partial name="~/Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml" />
</div> </div>
<!-- QR Code Popup Modal -->
<div id="qrCodeModal" class="fixed inset-0 bg-black/75 items-center justify-center z-50 hidden"> <div id="qrCodeModal" class="fixed inset-0 bg-black/75 items-center justify-center z-50 hidden">
<div class="bg-white rounded-2xl p-6 mx-4 max-w-sm relative"> <div class="bg-white rounded-2xl p-6 mx-4 max-w-sm relative">
<!-- Close Button -->
<button id="closeQrModal" class="absolute top-3 right-3 w-8 h-8 bg-gray-200 hover:bg-gray-300 rounded-full flex items-center justify-center transition-colors"> <button id="closeQrModal" class="absolute top-3 right-3 w-8 h-8 bg-gray-200 hover:bg-gray-300 rounded-full flex items-center justify-center transition-colors">
<i class="w-4 h-4 text-gray-600" data-lucide="x"></i> <i class="w-4 h-4 text-gray-600" data-lucide="x"></i>
</button> </button>
<!-- Modal Header -->
<div class="text-center mb-4"> <div class="text-center mb-4">
<h3 class="text-lg font-bold text-gray-800">QR Code SPJ</h3> <h3 class="text-lg font-bold text-gray-800">QR Code SPJ</h3>
<p class="text-sm text-gray-600">SPJ/07-2025/PKM/000476</p> <p class="text-sm text-gray-600">SPJ/07-2025/PKM/000476</p>
</div> </div>
<!-- QR Code Display -->
<div class="bg-white p-4 rounded-xl border-2 border-gray-200 flex items-center justify-center"> <div class="bg-white p-4 rounded-xl border-2 border-gray-200 flex items-center justify-center">
<img src="@Url.Content("~/driver/images/qr.png")" alt="QR Code SPJ" class="w-64 h-64 object-contain"> <img src="@Url.Content("~/driver/images/qr.png")" alt="QR Code SPJ" class="w-64 h-64 object-contain">
</div> </div>
<!-- Instructions -->
<div class="mt-4 text-center"> <div class="mt-4 text-center">
<p class="text-xs text-gray-500">Arahkan QR Code ke scanner untuk verifikasi</p> <p class="text-xs text-gray-500">Arahkan QR Code ke scanner untuk verifikasi</p>
</div> </div>

16
Views/Admin/Transport/SpjDriver/Shared/Components/_Navigation.cshtml
View File

@ -12,10 +12,10 @@
<!-- Home Button --> <!-- Home Button -->
<a href="@Url.Action("Index", "SpjDriver")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group"> <a href="@Url.Action("Index", "SpjDriver")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group">
<div class="relative"> <div class="relative">
<i class="w-6 h-6 text-gray-400 group-hover:text-orange-500 transition-colors duration-300" data-lucide="home"></i> <i class="w-6 h-6 text-gray-400 group-hover:text-cyan-500 transition-colors duration-300" data-lucide="home"></i>
<div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-orange-500 group-hover:w-full transition-all duration-300"></div> <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-300"></div>
</div> </div>
<span class="text-xs text-gray-600 group-hover:text-orange-500 font-medium transition-colors duration-300">Home</span> <span class="text-xs text-gray-600 group-hover:text-cyan-500 font-medium transition-colors duration-300">Home</span>
</a> </a>
<div class="w-12"></div> <div class="w-12"></div>
@ -24,22 +24,22 @@
<a href="@Url.Action("History", "SpjDriver")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group"> <a href="@Url.Action("History", "SpjDriver")" class="flex flex-col items-center gap-1 px-4 py-2 transition-all duration-300 hover:scale-105 group">
<div class="relative"> <div class="relative">
<i class="w-6 h-6 text-gray-400 group-hover:text-orange-500 transition-colors duration-300" data-lucide="clipboard-check"></i> <i class="w-7 h-6 text-gray-400 group-hover:text-cyan-500 transition-colors duration-300" data-lucide="clipboard-check"></i>
<div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-orange-500 group-hover:w-full transition-all duration-300"></div> <div class="absolute -bottom-0.5 left-1/2 transform -translate-x-1/2 w-0 h-0.5 bg-cyan-500 group-hover:w-full transition-all duration-300"></div>
</div> </div>
<span class="text-xs text-gray-600 group-hover:text-orange-500 font-medium transition-colors duration-300">History</span> <span class="text-xs text-gray-600 group-hover:text-cyan-500 font-medium transition-colors duration-300">History</span>
</a> </a>
</div> </div>
</div> </div>
<!-- Center Submit --> <!-- Center Submit -->
<div class="absolute -top-4 left-1/2 transform -translate-x-1/2"> <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
<a href="@Url.Action("Submit", "SpjDriver")" id="odoBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-orange-500 via-orange-400 to-orange-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-orange-200"> <a href="@Url.Action("Submit", "SpjDriver")" id="odoBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-cyan-500 via-cyan-400 to-cyan-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-cyan-200">
<i class="w-6 h-6 text-white" data-lucide="truck"></i> <i class="w-6 h-6 text-white" data-lucide="truck"></i>
</a> </a>
@* <!-- ini untuk yang struk --> @* <!-- ini untuk yang struk -->
<a href="@Url.Action("Struk", "Submit")" id="strukBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-orange-500 via-orange-400 to-orange-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-orange-200"> <a href="@Url.Action("Struk", "Submit")" id="strukBtn" class="hover:cursor-pointer w-14 h-14 bg-gradient-to-br from-cyan-500 via-cyan-400 to-cyan-600 rounded-full shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 hover:rotate-6 border-4 border-white ring-2 ring-cyan-200">
<i class="w-6 h-6 text-white" data-lucide="file-text"></i> <i class="w-6 h-6 text-white" data-lucide="file-text"></i>
</a> *@ </a> *@
</div> </div>

16
Views/Admin/Transport/SpjDriver/Submit/Index.cshtml
View File

@ -4,7 +4,7 @@
} }
<div class="w-full lg:max-w-sm mx-auto bg-white min-h-screen"> <div class="w-full lg:max-w-sm mx-auto bg-white min-h-screen">
<div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-3 py-4 rounded-b-2xl relative pb-12"> <div class="bg-gradient-to-r from-cyan-500 to-cyan-600 text-white px-3 py-4 rounded-b-2xl relative pb-12">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors"> <a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors">
<i class="w-5 h-5" data-lucide="chevron-left"></i> <i class="w-5 h-5" data-lucide="chevron-left"></i>
@ -17,8 +17,8 @@
<div class="px-4 py-6 -mt-6 relative z-10"> <div class="px-4 py-6 -mt-6 relative z-10">
<div class="bg-white rounded-2xl p-5 border border-gray-100"> <div class="bg-white rounded-2xl p-5 border border-gray-100">
<div class="flex items-center gap-3 mb-4"> <div class="flex items-center gap-3 mb-4">
<div class="w-12 h-12 bg-gradient-to-br from-orange-100 to-orange-200 rounded-2xl flex items-center justify-center"> <div class="w-12 h-12 bg-gradient-to-br from-cyan-100 to-cyan-200 rounded-2xl flex items-center justify-center">
<i class="w-6 h-6 text-orange-600" data-lucide="camera"></i> <i class="w-6 h-6 text-cyan-600" data-lucide="camera"></i>
</div> </div>
<div> <div>
<h2 class="text-lg font-bold text-gray-900">Foto Muatan Kendaraan</h2> <h2 class="text-lg font-bold text-gray-900">Foto Muatan Kendaraan</h2>
@ -29,7 +29,7 @@
</div> </div>
</div> </div>
<div class="upload-area border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-orange-400 transition-colors cursor-pointer" id="upload-area"> <div class="upload-area border-2 border-dashed border-gray-300 rounded-xl p-6 text-center hover:border-cyan-400 transition-colors cursor-pointer" id="upload-area">
<input type="file" name="FotoKondisiKendaraan" accept="image/jpeg,image/png" class="hidden" id="foto-upload"> <input type="file" name="FotoKondisiKendaraan" accept="image/jpeg,image/png" class="hidden" id="foto-upload">
<label for="foto-upload" class="cursor-pointer w-full block"> <label for="foto-upload" class="cursor-pointer w-full block">
<div class="relative w-full h-60 bg-center bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-3 overflow-hidden preview-container" id="preview-container"> <div class="relative w-full h-60 bg-center bg-gray-100 rounded-xl flex items-center justify-center mx-auto mb-3 overflow-hidden preview-container" id="preview-container">
@ -37,7 +37,7 @@
<div class="upload-icon-container"> <div class="upload-icon-container">
<img class="object-cover" src="~/driver/images/trukk.jpg" alt="contoh gambar"> <img class="object-cover" src="~/driver/images/trukk.jpg" alt="contoh gambar">
<p class="absolute inset-0 flex items-center justify-center text-white">Contoh Foto</p> <p class="absolute inset-0 flex items-center justify-center text-white">Contoh Foto</p>
@* <i class="w-8 h-8 text-orange-600" data-lucide="upload-cloud" id="preview-icon"></i> *@ @* <i class="w-8 h-8 text-cyan-600" data-lucide="upload-cloud" id="preview-icon"></i> *@
</div> </div>
</div> </div>
<img id="preview-image" src="#" alt="Preview" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;" /> <img id="preview-image" src="#" alt="Preview" style="display:none;position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;" />
@ -83,7 +83,7 @@
<i class="w-4 h-4 text-gray-500" data-lucide="refresh-cw"></i> <i class="w-4 h-4 text-gray-500" data-lucide="refresh-cw"></i>
</button> </button>
</div> </div>
<p id="userLocationSubmit" class="font-semibold text-xs tracking-wide cursor-pointer underline text-orange-600 hover:text-orange-800 transition mt-1 flex items-center gap-2"> <p id="userLocationSubmit" class="font-semibold text-xs tracking-wide cursor-pointer underline text-cyan-600 hover:text-cyan-800 transition mt-1 flex items-center gap-2">
<span>Mendeteksi lokasi...</span> <span>Mendeteksi lokasi...</span>
</p> </p>
<p class="text-xs text-gray-400 mt-1">Klik lokasi di atas untuk update posisi Anda</p> <p class="text-xs text-gray-400 mt-1">Klik lokasi di atas untuk update posisi Anda</p>
@ -97,7 +97,7 @@
<input type="hidden" name="AlamatJalan" id="input-alamat-jalan" /> <input type="hidden" name="AlamatJalan" id="input-alamat-jalan" />
<div class="flex gap-3 pt-4"> <div class="flex gap-3 pt-4">
<button type="submit" id="submit-btn" <button type="submit" id="submit-btn"
class="floating-button flex-1 bg-gradient-to-r from-orange-500 to-orange-600 text-white font-semibold py-3 rounded-xl hover:from-orange-600 hover:to-orange-700 transition-all duration-200 shadow-lg flex items-center justify-center gap-2"> class="floating-button flex-1 bg-gradient-to-r from-cyan-500 to-cyan-600 text-white font-semibold py-3 rounded-xl hover:from-cyan-600 hover:to-cyan-700 transition-all duration-200 shadow-lg flex items-center justify-center gap-2">
<i class="w-5 h-5" data-lucide="upload"></i> <i class="w-5 h-5" data-lucide="upload"></i>
<span>Unggah</span> <span>Unggah</span>
</button> </button>
@ -246,8 +246,6 @@
} }
.upload-icon-container { .upload-icon-container {
width: 64px;
height: 64px;
background: linear-gradient(135deg, #fef7ed 0%, #fed7aa 100%); background: linear-gradient(135deg, #fef7ed 0%, #fed7aa 100%);
border-radius: 16px; border-radius: 16px;
display: flex; display: flex;

38
Views/Admin/Transport/SpjDriver/Submit/Struk.cshtml
View File

@ -8,7 +8,7 @@
} }
<div class="max-w-sm mx-auto bg-white min-h-screen"> <div class="max-w-sm mx-auto bg-white min-h-screen">
<div class="bg-orange-500 text-white px-3 py-4 rounded-b-2xl relative pb-12"> <div class="bg-cyan-500 text-white px-3 py-4 rounded-b-2xl relative pb-12">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors"> <a href="@Url.Action("Index", "Home")" class="p-1 hover:bg-white/10 rounded-full transition-colors">
<i class="w-5 h-5" data-lucide="chevron-left"></i> <i class="w-5 h-5" data-lucide="chevron-left"></i>
@ -21,10 +21,10 @@
<div class="px-8 py-4"> <div class="px-8 py-4">
<div class="mb-6"> <div class="mb-6">
<div class="flex flex-col items-center space-y-2 mb-4"> <div class="flex flex-col items-center space-y-2 mb-4">
<div class="bg-orange-100 rounded-full p-3"> <div class="bg-cyan-100 rounded-full p-3">
<i data-lucide="camera" class="w-7 h-7 text-orange-500"></i> <i data-lucide="camera" class="w-7 h-7 text-cyan-500"></i>
</div> </div>
<h2 class="text-xl font-bold text-orange-500">Scan Struk Otomatis</h2> <h2 class="text-xl font-bold text-cyan-500">Scan Struk Otomatis</h2>
<p class="text-sm text-gray-500 text-center">Arahkan kamera ke struk atau upload foto struk untuk membaca data secara otomatis.</p> <p class="text-sm text-gray-500 text-center">Arahkan kamera ke struk atau upload foto struk untuk membaca data secara otomatis.</p>
</div> </div>
@ -58,7 +58,7 @@
</div> </div>
<div class="space-y-3 mb-4"> <div class="space-y-3 mb-4">
@* <button id="start-scanner" type="button" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-medium py-3 px-4 rounded-lg transition-colors btn-scanner"> @* <button id="start-scanner" type="button" class="w-full bg-cyan-500 hover:bg-cyan-600 text-white font-medium py-3 px-4 rounded-lg transition-colors btn-scanner">
<i class="w-5 h-5 inline mr-2" data-lucide="camera"></i> <i class="w-5 h-5 inline mr-2" data-lucide="camera"></i>
Mulai Scan Struk Mulai Scan Struk
</button> *@ </button> *@
@ -130,12 +130,12 @@
</div> </div>
</div> </div>
<form action="@Url.Action("ProcessStruk", "Submit")" method="post" class="px-8 py-4 space-y-6 bg-white"> <form action="@Url.Action("Struk", "SpjDriver")" method="post" class="px-8 py-4 space-y-6 bg-white">
<div class="flex flex-col items-center space-y-2"> <div class="flex flex-col items-center space-y-2">
<div class="bg-orange-100 rounded-full p-3"> <div class="bg-cyan-100 rounded-full p-3">
<i data-lucide="edit-3" class="w-7 h-7 text-orange-500"></i> <i data-lucide="edit-3" class="w-7 h-7 text-cyan-500"></i>
</div> </div>
<h2 class="text-xl font-bold text-orange-500">Data Struk</h2> <h2 class="text-xl font-bold text-cyan-500">Data Struk</h2>
<p class="text-sm text-gray-500 text-center">Periksa dan lengkapi data struk sebelum submit.</p> <p class="text-sm text-gray-500 text-center">Periksa dan lengkapi data struk sebelum submit.</p>
</div> </div>
@ -147,7 +147,7 @@
type="text" type="text"
id="NomorStruk" id="NomorStruk"
name="NomorStruk" name="NomorStruk"
class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2"
required required
placeholder="8001441" placeholder="8001441"
/> />
@ -161,7 +161,7 @@
type="text" type="text"
id="NomorPolisi" id="NomorPolisi"
name="NomorPolisi" name="NomorPolisi"
class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2"
placeholder="B 9125 PJA" placeholder="B 9125 PJA"
/> />
</div> </div>
@ -173,7 +173,7 @@
type="text" type="text"
id="Penugasan" id="Penugasan"
name="Penugasan" name="Penugasan"
class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2"
placeholder="JAKARTA BARAT" placeholder="JAKARTA BARAT"
/> />
</div> </div>
@ -186,7 +186,7 @@
type="text" type="text"
id="WaktuMasuk" id="WaktuMasuk"
name="WaktuMasuk" name="WaktuMasuk"
class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2"
placeholder="2025-08-04, 08:13:51" placeholder="2025-08-04, 08:13:51"
/> />
</div> </div>
@ -196,7 +196,7 @@
type="text" type="text"
id="WaktuKeluar" id="WaktuKeluar"
name="WaktuKeluar" name="WaktuKeluar"
class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2"
placeholder="2025-08-04, 14:35:10" placeholder="2025-08-04, 14:35:10"
/> />
</div> </div>
@ -210,7 +210,7 @@
type="number" type="number"
id="BeratMasuk" id="BeratMasuk"
name="BeratMasuk" name="BeratMasuk"
class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2"
placeholder="23280" placeholder="23280"
/> />
</div> </div>
@ -220,7 +220,7 @@
type="number" type="number"
id="BeratKeluar" id="BeratKeluar"
name="BeratKeluar" name="BeratKeluar"
class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2"
placeholder="13540" placeholder="13540"
/> />
</div> </div>
@ -233,7 +233,7 @@
type="number" type="number"
id="BeratNett" id="BeratNett"
name="BeratNett" name="BeratNett"
class="mt-1 block w-full rounded-lg border border-orange-300 shadow-sm focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition-all duration-150 px-4 py-2" class="mt-1 block w-full rounded-lg border border-cyan-300 shadow-sm focus:border-cyan-500 focus:ring-2 focus:ring-cyan-200 transition-all duration-150 px-4 py-2"
required required
placeholder="9740" placeholder="9740"
/> />
@ -241,7 +241,7 @@
</div> </div>
</div> </div>
<button type="submit" class="w-full bg-gradient-to-r from-orange-500 to-orange-400 text-white py-3 rounded-lg font-semibold shadow hover:from-orange-600 hover:to-orange-500 transition-all duration-150 flex items-center justify-center gap-2"> <button type="submit" class="w-full bg-gradient-to-r from-cyan-500 to-cyan-400 text-white py-3 rounded-lg font-semibold shadow hover:from-cyan-600 hover:to-cyan-500 transition-all duration-150 flex items-center justify-center gap-2">
<i data-lucide="send" class="w-5 h-5"></i> <i data-lucide="send" class="w-5 h-5"></i>
Submit Data Struk Submit Data Struk
</button> </button>
@ -403,7 +403,7 @@
disableScanner(message) { disableScanner(message) {
this.startBtn.disabled = true; this.startBtn.disabled = true;
this.startBtn.innerHTML = `<i class="w-5 h-5 inline mr-2" data-lucide="x-circle"></i>${message}`; this.startBtn.innerHTML = `<i class="w-5 h-5 inline mr-2" data-lucide="x-circle"></i>${message}`;
this.startBtn.classList.remove('bg-orange-500', 'hover:bg-orange-600'); this.startBtn.classList.remove('bg-cyan-500', 'hover:bg-cyan-600');
this.startBtn.classList.add('bg-gray-400', 'cursor-not-allowed'); this.startBtn.classList.add('bg-gray-400', 'cursor-not-allowed');
} }

3
package.json
View File

@ -4,6 +4,7 @@
"tailwindcss": "^4.1.10" "tailwindcss": "^4.1.10"
}, },
"scripts": { "scripts": {
"watch": "npx @tailwindcss/cli -i ./wwwroot/website/css/site.css -o ./wwwroot/website/css/watch.css --watch" "watch": "npx @tailwindcss/cli -i ./wwwroot/website/css/site.css -o ./wwwroot/website/css/watch.css --watch",
"watch-driver": "npx @tailwindcss/cli -i ./wwwroot/driver/css/site.css -o ./wwwroot/driver/css/watch.css --watch"
} }
} }

1235
wwwroot/driver/css/watch.css
View File

File diff suppressed because it is too large Load Diff

598
wwwroot/website/css/watch.css
View File

File diff suppressed because it is too large Load Diff

BIN
wwwroot/website/images/laksanakan_bagan.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 50 KiB

BIN
wwwroot/website/images/pengelolaan_bagan.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 81 KiB

BIN
wwwroot/website/images/peran_bagan.webp
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 138 KiB

After

Width:  |  Height:  |  Size: 138 KiB

BIN
wwwroot/website/images/wish.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB