From bed92f8ab0744213bf0e84deea14ecac1bc17a1f Mon Sep 17 00:00:00 2001 From: marszayn Date: Wed, 6 Aug 2025 10:29:29 +0700 Subject: [PATCH] update: admin scan --- .../Transport/SpjAdmin/Scan/Index.cshtml | 126 ++++++++++++------ wwwroot/driver/css/scanner.css | 91 +++++++++++++ 2 files changed, 175 insertions(+), 42 deletions(-) diff --git a/Views/Admin/Transport/SpjAdmin/Scan/Index.cshtml b/Views/Admin/Transport/SpjAdmin/Scan/Index.cshtml index f38ea75..207c429 100644 --- a/Views/Admin/Transport/SpjAdmin/Scan/Index.cshtml +++ b/Views/Admin/Transport/SpjAdmin/Scan/Index.cshtml @@ -562,8 +562,8 @@ showModal(type, title, message, showCloseButton = true) { const iconHtml = { - 'success': '
', - 'error': '
', + 'success': '
', + 'error': '
', 'loading': '
' }; @@ -584,53 +584,62 @@ 'transform': 'scale(1)' }, 300); - if (typeof lucide !== 'undefined') { - lucide.createIcons(); + // Auto hide untuk loading modal setelah 3 detik jika tidak ada tombol + if (!showCloseButton && type === 'loading') { + setTimeout(() => { + this.hideModal(); + }, 3000); } } showSuccessModal(code, tanggal, waktu) { // Custom success modal dengan UI yang lebih keren const successIcon = ` -
- +
+ + +
`; const successContent = ` -
-
-
- ${code} +
+
+
+ ${code}
-
-
-
Status
+
+
-
- Aktif +
+
+ Status Aktif +
+
-
-
Waktu Scan
-
${waktu}
+
+
+
⏰ Waktu Scan
+
${waktu}
+
+ +
+
📅 Tanggal
+
${tanggal}
+
- -
-
Tanggal
-
${tanggal}
-
`; $('#modal-icon').html(successIcon); - $('#modal-title').html('🎉 Scan Berhasil!'); + $('#modal-title').html('🎉 Scan Berhasil!'); $('#modal-message').html(successContent); - $('#modal-close').html('Selesai').show(); + $('#modal-close').hide(); // Sembunyikan tombol $('#scan-modal').removeClass('hidden'); @@ -639,37 +648,69 @@ 'transform': 'scale(1)' }, 300); - if (typeof lucide !== 'undefined') { - lucide.createIcons(); - } + // Auto hide setelah 2 detik + setTimeout(() => { + this.hideModal(); + }, 2000); } showErrorModal(code) { // Custom error modal dengan UI yang lebih keren const errorIcon = ` -
- +
+ + +
`; const errorContent = ` -
-
-
- ${code} +
+
+
+ ${code}
-
-
Kode SPJ tidak ditemukan
-
Silakan periksa kembali kode yang Anda masukkan
+ +
+
+
+
+ + + + SPJ Tidak Ditemukan +
+
+ Kode yang Anda masukkan tidak terdaftar dalam sistem.
+ Silakan periksa kembali atau hubungi administrator. +
+
+
+ +
+
+ + + +
+
💡 Tips:
+
+ • Pastikan QR Code dalam kondisi baik
+ • Coba scan ulang dengan pencahayaan yang cukup
+ • Gunakan input manual jika diperlukan +
+
+
+
`; $('#modal-icon').html(errorIcon); - $('#modal-title').html('❌ SPJ Tidak Ditemukan'); + $('#modal-title').html('❌ Scan Gagal'); $('#modal-message').html(errorContent); - $('#modal-close').html('Coba Lagi').show(); + $('#modal-close').hide(); // Sembunyikan tombol $('#scan-modal').removeClass('hidden'); @@ -678,9 +719,10 @@ 'transform': 'scale(1)' }, 300); - if (typeof lucide !== 'undefined') { - lucide.createIcons(); - } + // Auto hide setelah 2 detik + setTimeout(() => { + this.hideModal(); + }, 2000); } hideModal() { diff --git a/wwwroot/driver/css/scanner.css b/wwwroot/driver/css/scanner.css index 8212bf0..1d7ff0b 100644 --- a/wwwroot/driver/css/scanner.css +++ b/wwwroot/driver/css/scanner.css @@ -1,3 +1,94 @@ +/* Modal animations and enhancements */ +#scan-modal { + backdrop-filter: blur(8px); + transition: all 0.3s ease; +} + +#scan-modal .bg-white { + transform-origin: center center; + transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +/* Enhanced modal auto-hide animation */ +.modal-auto-hide { + animation: modalAutoHide 0.4s ease-in-out; +} + +@keyframes modalAutoHide { + 0% { + opacity: 1; + transform: scale(1); + } + 80% { + opacity: 1; + transform: scale(1.02); + } + 100% { + opacity: 0; + transform: scale(0.95); + } +} + +/* Success modal specific animations */ +.success-gradient-bg { + background: linear-gradient(135deg, #10b981, #059669, #047857); + animation: gradientShift 2s ease-in-out; +} + +@keyframes gradientShift { + 0%, + 100% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } +} + +/* Error modal specific animations */ +.error-gradient-bg { + background: linear-gradient(135deg, #ef4444, #dc2626, #b91c1c); + animation: gradientShift 2s ease-in-out; +} + +/* Enhanced pulse animation for icons */ +.icon-pulse { + animation: iconPulse 1.5s ease-in-out infinite; +} + +@keyframes iconPulse { + 0%, + 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.1); + opacity: 0.8; + } +} + +/* Card shadow effects */ +.card-shadow-success { + box-shadow: 0 10px 25px rgba(16, 185, 129, 0.2); +} + +.card-shadow-error { + box-shadow: 0 10px 25px rgba(239, 68, 68, 0.2); +} + +/* Responsive modal improvements */ +@media (max-width: 640px) { + #scan-modal .bg-white { + margin: 16px; + max-width: calc(100vw - 32px); + } + + #scan-modal .bg-white .space-y-4 > div { + margin-bottom: 12px; + } +} + .scanner-container { position: relative; background: #1a1a1a;