Update app.js

app.js

@@ -35,13 +35,13 @@ async function login() {
     document.getElementById('app-view').classList.remove('d-none');
     document.getElementById('user-role-badge').innerText = `Role: ${state.role}`;
     
+    // Make 'Baru' button visible, but handle enablement
     const btnAdd = document.getElementById('btn-add-new');
-    btnAdd.classList.remove('d-none'); 
-    
-    if (state.role === 'User' || state.role === 'Admin') {
-      btnAdd.disabled = false; 
+    btnAdd.classList.remove('d-none');
+    if (state.role === 'Viewer') {
+      btnAdd.disabled = true;
     } else {
-      btnAdd.disabled = true;  
+      btnAdd.disabled = false;
     }
     
     await loadInitialData();
@@ -59,6 +59,9 @@ function logout() {
 }
 
 async function loadInitialData() {
+  // Show Loading indicator in table body
+  document.getElementById('tableBody').innerHTML = `<tr><td colspan="17" class="text-center py-4"><span class="spinner-border spinner-border-sm text-warning me-2"></span>Loading data...</td></tr>`;
+  
   const result = await apiCall('getData');
   state.options = result.options;
   state.data = result.data;
@@ -124,20 +127,29 @@ function renderTable() {
   pageHTML += `<li class="page-item ${state.currentPage === totalPages || totalPages === 0 ? 'disabled' : ''}"><button class="page-link" onclick="changePage(${state.currentPage + 1})">›</button></li>`;
   document.getElementById('paginationNav').innerHTML = pageHTML;
 
+  // Action column header is always rendered
   let headHTML = `<tr>
     <th>Nama Supplier</th><th>Tgl Kedatangan</th><th>No. SJ Supplier</th>
     <th>Item</th><th>Qty Awal</th><th>Qty Reject</th><th>Qty Nett</th>
     <th>UOM</th><th>Sub Inv</th><th>No. STG Manual</th><th>Ekspedisi PIC</th>
     <th>Nomer PO</th><th>Tanggal PO</th><th>No. Receive</th><th>Notes</th>
-    <th>Status</th>`;
-  if (state.role === 'User' || state.role === 'Admin') headHTML += `<th class="text-center sticky-right">Action</th>`;
-  headHTML += `</tr>`;
+    <th>Status</th><th class="text-center sticky-right">Action</th>
+  </tr>`;
   document.getElementById('tableHead').innerHTML = headHTML;
 
+  if (paginated.length === 0) {
+    document.getElementById('tableBody').innerHTML = `<tr><td colspan="17" class="text-center py-4 text-muted">No data found</td></tr>`;
+    return;
+  }
+
   let bodyHTML = '';
   paginated.forEach(row => {
     let statColor = row.stat === 'OK' ? 'bg-success' : (row.stat === 'EDITED' ? 'bg-primary' : 'bg-secondary');
-    let btnDisabled = row.stat === 'OK' ? 'disabled' : '';
+    
+    // Disable edit button if role is Viewer OR if status is OK
+    let isViewer = state.role === 'Viewer';
+    let btnDisabled = (isViewer || row.stat === 'OK') ? 'disabled' : '';
+    let btnClass = btnDisabled ? 'btn-secondary opacity-50' : 'btn-warning';
 
     bodyHTML += `<tr>
       <td>${row.supplier}</td>
@@ -155,21 +167,19 @@ function renderTable() {
       <td>${displayDate(row.tglPo)}</td>
       <td>${row.noReceive}</td>
       <td>${row.notes}</td>
-      <td><span class="badge ${statColor}">${row.stat}</span></td>`;
-    
-    if (state.role === 'User' || state.role === 'Admin') {
-      bodyHTML += `<td class="text-center sticky-right">
-        <button class="btn btn-warning btn-sm text-white py-0 px-2" onclick="openEditModal(${row._rowIndex})" title="Edit" ${btnDisabled}>
+      <td><span class="badge ${statColor}">${row.stat}</span></td>
+      <td class="text-center sticky-right">
+        <button class="btn ${btnClass} btn-sm text-white py-0 px-2" onclick="openEditModal(${row._rowIndex})" title="Edit" ${btnDisabled}>
           <i class="bi bi-pencil-square"></i>
         </button>
-      </td>`;
-    }
-    bodyHTML += `</tr>`;
+      </td>
+    </tr>`;
   });
   document.getElementById('tableBody').innerHTML = bodyHTML;
 }
 
 function openAddModal() {
+  if (state.role === 'Viewer') return;
   state.currentMode = 'ADD';
   document.getElementById('recordForm').reset();
   document.getElementById('modalTitle').innerText = "Kedatangan Baru";
@@ -185,6 +195,7 @@ function openAddModal() {
 }
 
 function openEditModal(rowIndex) {
+  if (state.role === 'Viewer') return;
   state.currentMode = 'EDIT';
   state.currentRowIndex = rowIndex;
   const rowData = state.data.find(r => r._rowIndex === rowIndex);