From 88aef852e06894698ccf27a2749a9dfbb9471624 Mon Sep 17 00:00:00 2001
From: muamars <official.muammar@gmail.com>
Date: Thu, 12 Mar 2026 10:22:40 +0700
Subject: [PATCH] update: fixing rerendering

---
 .../driver/js/detail-penjemputan-non-tps.js   | 49 +++++++++++++------
 wwwroot/driver/js/detail-penjemputan-tps.js   | 47 ++++++++++++------
 2 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/wwwroot/driver/js/detail-penjemputan-non-tps.js b/wwwroot/driver/js/detail-penjemputan-non-tps.js
index 7c1f30e..d01b80b 100644
--- a/wwwroot/driver/js/detail-penjemputan-non-tps.js
+++ b/wwwroot/driver/js/detail-penjemputan-non-tps.js
@@ -121,15 +121,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     <input type="file" class="tps-foto-kedatangan block w-full text-sm text-gray-700 border border-gray-200 rounded-xl p-2 file:mr-3 file:rounded-lg file:border-0 file:bg-upst file:px-3 file:py-2 file:text-xs file:font-bold file:text-white" accept="image/*" multiple />
                     <div class="tps-preview-kedatangan space-y-2"></div>
 
-                    ${tps.fotoKedatangan.length > 0 && !tps.fotoKedatanganUploaded ? `
-                        <button type="button" class="tps-btn-upload-kedatangan w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110">
-                            Upload ${tps.fotoKedatangan.length} Foto Kedatangan
-                        </button>
-                    ` : tps.fotoKedatanganUploaded ? `
-                        <div class="text-center text-xs text-green-600 font-bold py-2">
-                            ✓ Foto kedatangan sudah diupload
-                        </div>
-                    ` : ''}
+                    <div class="kedatangan-upload-state">${getKedatanganUploadStateMarkup(tps)}</div>
 
                     <div class="grid grid-cols-2 gap-2">
                         <div>
@@ -258,14 +250,14 @@ document.addEventListener('DOMContentLoaded', function() {
             tps.fotoKedatanganUploaded = false;
             updateWaktuKedatangan();
             updateMultiPreview(this, form.querySelector('.tps-preview-kedatangan'));
-            renderTpsForm();
+            refreshKedatanganUploadState(form);
         });
 
         fotoPetugasInput.addEventListener('change', function() {
             tps.fotoPetugas = Array.from(this.files);
             tps.fotoPetugasUploaded = false;
             updateMultiPreview(this, form.querySelector('.tps-preview-petugas'));
-            renderTpsForm();
+            refreshPetugasUploadState(form);
         });
 
         namaPetugasInput.addEventListener('input', function() {
@@ -660,7 +652,7 @@ document.addEventListener('DOMContentLoaded', function() {
         if (isUploaded) {
             return `
                 <div class="text-center text-xs text-green-600 font-bold py-2">✓ Foto timbangan sudah diupload</div>
-                <p class="text-[11px] text-gray-500 text-center">Kalau mau revisi, pilih file baru di atas. Status upload akan direset otomatis.</p>
+                <p class="text-[11px] text-gray-500 text-center">Jika ingin revisi, pilih file baru diatas. Status upload akan tereset otomatis.</p>
             `;
         }
 
@@ -677,6 +669,31 @@ document.addEventListener('DOMContentLoaded', function() {
         `;
     }
 
+    function getKedatanganUploadStateMarkup(tps) {
+        if (tps.fotoKedatanganUploaded) {
+            return '<div class="text-center text-xs text-green-600 font-bold py-2">✓ Foto kedatangan sudah diupload</div>';
+        }
+        if (!tps.fotoKedatangan.length) {
+            return '';
+        }
+        return `<button type="button" class="tps-btn-upload-kedatangan w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110">Upload ${tps.fotoKedatangan.length} Foto Kedatangan</button>`;
+    }
+
+    function refreshKedatanganUploadState(form) {
+        const stateContainer = form.querySelector('.kedatangan-upload-state');
+        if (!stateContainer) return;
+
+        const tps = tpsData[activeTpsIndex];
+        stateContainer.innerHTML = getKedatanganUploadStateMarkup(tps);
+
+        const btnUploadKedatangan = stateContainer.querySelector('.tps-btn-upload-kedatangan');
+        if (btnUploadKedatangan) {
+            btnUploadKedatangan.addEventListener('click', uploadFotoKedatangan);
+        }
+
+        refreshSubmitButtonState(form);
+    }
+
     function getPetugasUploadStateMarkup(tps) {
         if (tps.fotoPetugasUploaded) {
             return '<div class="text-center text-xs text-green-600 font-bold py-2">✓ Foto petugas sudah diupload</div>';
@@ -968,7 +985,7 @@ document.addEventListener('DOMContentLoaded', function() {
             const ocrInfo = item.querySelector('.input-ocr-info')?.textContent || 'OCR: belum diproses.';
             
             tps.timbangan.push({
-                file: fileInput.files[0] || null,
+                file: fileInput.files[0] || previousTimbangan[index]?.file || null,
                 berat: [weight],
                 jenisSampah: [jenisSampah],
                 lokasiAngkut: [],
@@ -1050,7 +1067,8 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         alert(`Upload ${tps.fotoKedatangan.length} foto kedatangan\n(Implementasi upload ke server)`);
         tps.fotoKedatanganUploaded = true;
-        renderTpsForm();
+        const form = tpsContentContainer.querySelector('form');
+        if (form) refreshKedatanganUploadState(form);
     }
 
     function uploadFotoPetugas() {
@@ -1065,7 +1083,8 @@ document.addEventListener('DOMContentLoaded', function() {
         }
         alert(`Upload ${tps.fotoPetugas.length} foto petugas untuk ${tps.name}\n(Implementasi upload ke server)`);
         tps.fotoPetugasUploaded = true;
-        renderTpsForm();
+        const form = tpsContentContainer.querySelector('form');
+        if (form) refreshPetugasUploadState(form);
     }
 
     function submitTpsData() {
diff --git a/wwwroot/driver/js/detail-penjemputan-tps.js b/wwwroot/driver/js/detail-penjemputan-tps.js
index c09e4c7..a530adf 100644
--- a/wwwroot/driver/js/detail-penjemputan-tps.js
+++ b/wwwroot/driver/js/detail-penjemputan-tps.js
@@ -250,15 +250,7 @@ const DetailPenjemputan = (function() {
                 <input type="file" class="tps-foto-kedatangan block w-full text-sm text-gray-700 border border-gray-200 rounded-xl p-2 file:mr-3 file:rounded-lg file:border-0 file:bg-upst file:px-3 file:py-2 file:text-xs file:font-bold file:text-white" accept="image/*" multiple />
                 <div class="tps-preview-kedatangan space-y-2"></div>
                 
-                ${tps.fotoKedatangan.length > 0 && !tps.fotoKedatanganUploaded ? `
-                    <button type="button" class="tps-btn-upload-kedatangan w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110">
-                        Upload ${tps.fotoKedatangan.length} Foto Kedatangan
-                    </button>
-                ` : tps.fotoKedatanganUploaded ? `
-                    <div class="text-center text-xs text-green-600 font-bold py-2">
-                        ✓ Foto kedatangan sudah diupload
-                    </div>
-                ` : ''}
+                <div class="kedatangan-upload-state">${getKedatanganUploadStateMarkup(tps)}</div>
 
                 <div class="grid grid-cols-2 gap-2">
                     <div>
@@ -338,14 +330,14 @@ const DetailPenjemputan = (function() {
             tps.fotoKedatanganUploaded = false;
             updateWaktuKedatangan();
             updateMultiPreview(this, form.querySelector('.tps-preview-kedatangan'));
-            renderTpsForm();
+            refreshKedatanganUploadState(form);
         });
 
         fotoPetugasInput.addEventListener('change', function() {
             tps.fotoPetugas = Array.from(this.files);
             tps.fotoPetugasUploaded = false;
             updateMultiPreview(this, form.querySelector('.tps-preview-petugas'));
-            renderTpsForm();
+            refreshPetugasUploadState(form);
         });
 
         namaPetugasInput.addEventListener('input', function() {
@@ -685,7 +677,7 @@ const DetailPenjemputan = (function() {
         if (isUploaded) {
             return `
                 <div class="text-center text-xs text-green-600 font-bold py-2 upload-success-message">✓ Foto timbangan sudah diupload</div>
-                <p class="text-[11px] text-gray-500 text-center">Kalau mau revisi, pilih file baru di atas. Status upload akan direset otomatis.</p>
+                <p class="text-[11px] text-gray-500 text-center">Jika ingin revisi, pilih file baru diatas. Status upload akan tereset otomatis.</p>
             `;
         }
 
@@ -702,6 +694,31 @@ const DetailPenjemputan = (function() {
         `;
     }
 
+    function getKedatanganUploadStateMarkup(tps) {
+        if (tps.fotoKedatanganUploaded) {
+            return '<div class="text-center text-xs text-green-600 font-bold py-2">✓ Foto kedatangan sudah diupload</div>';
+        }
+        if (!tps.fotoKedatangan.length) {
+            return '';
+        }
+        return `<button type="button" class="tps-btn-upload-kedatangan w-full bg-blue-500 text-white py-2 rounded-xl font-bold text-xs hover:brightness-110">Upload ${tps.fotoKedatangan.length} Foto Kedatangan</button>`;
+    }
+
+    function refreshKedatanganUploadState(form) {
+        const stateContainer = form.querySelector('.kedatangan-upload-state');
+        if (!stateContainer) return;
+
+        const tps = state.tpsData[state.activeTpsIndex];
+        stateContainer.innerHTML = getKedatanganUploadStateMarkup(tps);
+
+        const btnUploadKedatangan = stateContainer.querySelector('.tps-btn-upload-kedatangan');
+        if (btnUploadKedatangan) {
+            btnUploadKedatangan.addEventListener('click', uploadFotoKedatangan);
+        }
+
+        refreshSubmitButtonState(form);
+    }
+
     function getPetugasUploadStateMarkup(tps) {
         if (tps.fotoPetugasUploaded) {
             return '<div class="text-center text-xs text-green-600 font-bold py-2">✓ Foto petugas sudah diupload</div>';
@@ -1211,7 +1228,8 @@ async function applyWatermark(file, photoNumber) {
         alert(`Upload ${tps.fotoKedatangan.length} foto kedatangan untuk ${tps.name}\n(Implementasi upload ke server)`);
         
         tps.fotoKedatanganUploaded = true;
-        renderTpsForm();
+        const form = elements.tpsContentContainer.querySelector('form');
+        if (form) refreshKedatanganUploadState(form);
     }
 
     function uploadFotoPetugas() {
@@ -1228,7 +1246,8 @@ async function applyWatermark(file, photoNumber) {
         alert(`Upload ${tps.fotoPetugas.length} foto petugas untuk ${tps.name}\n(Implementasi upload ke server)`);
         
         tps.fotoPetugasUploaded = true;
-        renderTpsForm();
+        const form = elements.tpsContentContainer.querySelector('form');
+        if (form) refreshPetugasUploadState(form);
     }
 
     function buildSubmitFormData(tps) {