update: fixing multiple

wwwroot/driver/js/detail-penjemputan-non-tps.js

@@ -416,7 +416,7 @@ document.addEventListener('DOMContentLoaded', async function() {
                     </div>
 
                     <label class="block text-xs font-semibold text-gray-600">Upload Foto Kedatangan</label>
-                    <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 />
+                    <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/*" />
                     <div class="tps-preview-kedatangan space-y-2"></div>
 
                     <div class="kedatangan-upload-state">${getKedatanganUploadStateMarkup(tps)}</div>
@@ -464,7 +464,7 @@ document.addEventListener('DOMContentLoaded', async function() {
                     </div>
 
                     <label class="block text-xs font-semibold text-gray-600">Upload Foto Petugas</label>
-                    <input type="file" class="tps-foto-petugas 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 />
+                    <input type="file" class="tps-foto-petugas 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/*" />
                     <div class="tps-preview-petugas space-y-2"></div>
 
                     <div class="petugas-upload-state">${getPetugasUploadStateMarkup(tps)}</div>

wwwroot/driver/js/detail-penjemputan-tps.js

@@ -748,7 +748,7 @@ const DetailPenjemputan = (function () {
     const submitState = getSubmitState(tps);
     const actionMarkup = tps.submitted
       ? `<div class="flex items-center justify-center gap-2 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 flex-shrink-0 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
             <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
           </svg>
           <span class="font-medium text-green-700">
@@ -801,7 +801,7 @@ const DetailPenjemputan = (function () {
                 </div>
 
                 <label class="block text-xs font-semibold text-gray-600">Upload Foto Kedatangan</label>
-                <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 />
+                <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/*" />
                 <div class="tps-preview-kedatangan space-y-2"></div>
                 
                 <div class="kedatangan-upload-state">${getKedatanganUploadStateMarkup(tps)}</div>
@@ -857,7 +857,7 @@ const DetailPenjemputan = (function () {
                 </div>
 
                 <label class="block text-xs font-semibold text-gray-600">Upload Foto Petugas</label>
-                <input type="file" class="tps-foto-petugas 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 />
+                <input type="file" class="tps-foto-petugas 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/*" />
                 <div class="tps-preview-petugas space-y-2"></div>
                 
                 <div class="petugas-upload-state">${getPetugasUploadStateMarkup(tps)}</div>
@@ -881,17 +881,23 @@ const DetailPenjemputan = (function () {
     const btnAddTimbangan = form.querySelector(".tps-btn-add-timbangan");
 
         fotoKedatanganInput.addEventListener('change', function() {
-            tps.fotoKedatangan = Array.from(this.files);
+            replaceSelectedPhotos(
-            tps.fotoKedatanganUploaded = false;
+              tps,
+              'fotoKedatangan',
+              this.files,
+              form.querySelector('.tps-preview-kedatangan')
+            );
             updateWaktuKedatangan(tps.index);
-            updateMultiPreview(this, form.querySelector('.tps-preview-kedatangan'));
             refreshKedatanganUploadState(form);
         });
 
         fotoPetugasInput.addEventListener('change', function() {
-            tps.fotoPetugas = Array.from(this.files);
+            replaceSelectedPhotos(
-            tps.fotoPetugasUploaded = false;
+              tps,
-            updateMultiPreview(this, form.querySelector('.tps-preview-petugas'));
+              'fotoPetugas',
+              this.files,
+              form.querySelector('.tps-preview-petugas')
+            );
             refreshPetugasUploadState(form);
         });
 
@@ -951,21 +957,56 @@ const DetailPenjemputan = (function () {
 
     const previewKedatangan = form.querySelector('.tps-preview-kedatangan');
     if (previewKedatangan) {
-            if (tps.fotoKedatangan.length > 0) {
+      renderPhotoPreviewByState({
-                renderStoredPhotos(tps.fotoKedatangan, previewKedatangan);
+        files: tps.fotoKedatangan,
-            } else if (tps.fotoKedatanganUploaded && tps.fotoKedatanganFileNames.length > 0) {
+        uploaded: tps.fotoKedatanganUploaded,
-                renderServerImagePreview(tps.fotoKedatanganFileNames, previewKedatangan);
+        fileNames: tps.fotoKedatanganFileNames,
-            }
+        container: previewKedatangan,
+      });
     }
 
     const previewPetugas = form.querySelector('.tps-preview-petugas');
     if (previewPetugas) {
-            if (tps.fotoPetugas.length > 0) {
+      renderPhotoPreviewByState({
-                renderStoredPhotos(tps.fotoPetugas, previewPetugas);
+        files: tps.fotoPetugas,
-            } else if (tps.fotoPetugasUploaded && tps.fotoPetugasFileNames.length > 0) {
+        uploaded: tps.fotoPetugasUploaded,
-                renderServerImagePreview(tps.fotoPetugasFileNames, previewPetugas);
+        fileNames: tps.fotoPetugasFileNames,
+        container: previewPetugas,
+      });
     }
   }
+
+  function renderPhotoPreviewByState({ files, uploaded, fileNames, container }) {
+    if (!container) return;
+
+    container.innerHTML = '';
+
+    if (Array.isArray(files) && files.length > 0) {
+      renderStoredPhotos(files, container);
+      return;
+    }
+
+    if (uploaded && Array.isArray(fileNames) && fileNames.length > 0) {
+      renderServerImagePreview(fileNames, container);
+    }
+  }
+
+  function replaceSelectedPhotos(tps, fieldName, files, previewContainer) {
+    const fileNamesField = `${fieldName}FileNames`;
+    const uploadedField = `${fieldName}Uploaded`;
+
+    tps[fieldName] = Array.from(files || []);
+    tps[fileNamesField] = [];
+    tps[uploadedField] = false;
+
+    renderPhotoPreviewByState({
+      files: tps[fieldName],
+      uploaded: tps[uploadedField],
+      fileNames: tps[fileNamesField],
+      container: previewContainer,
+    });
+
+    saveState();
   }
 
   function renderStoredPhotos(files, container) {