Update app.js

app.js

@@ -1,180 +1,230 @@
-const GAS_WEB_APP_URL = "https://script.google.com/macros/s/AKfycbykSpcWHYjyY9QpZFzQfs70-Jj69PfRdnRc4MI0IVUQd9sCDixKMKYNB_2xVbP8y_FKNQ/exec"; 
+// A simple base64 decode to mildly obfuscate the URL from casual source-code reading.
+const ENCODED_URL = "aHR0cHM6Ly9zY3JpcHQuZ29vZ2xlLmNvbS9tYWNyb3Mvcy9BS2Z5Y2J3LW5TRXR5N2ZIMkRoM1BQYmdZNVlUOXdNOUY2eWJMR2p2MEZGMjFlYVF5M3g2MGxmZGl2VGJMMU5MLVRhVXlHTXpJZy9leGVj"; 
+const GAS_WEB_APP_URL = atob(ENCODED_URL);
 
 let state = {
-  user: null,
-  config: null,
+  user: null, role: null,
+  options: { items: [] },
   data: [],
+  currentMode: 'ADD', // 'ADD' or 'EDIT'
   currentRowIndex: null
 };
 
-// --- API HELPER ---
-// Using raw text POST prevents complex browser CORS Preflight errors with Apps Script
+// API Helper
 async function apiCall(action, payload = {}) {
+  const reqPayload = { action, username: state.user, password: state.password, ...payload };
   const response = await fetch(GAS_WEB_APP_URL, {
     method: 'POST',
-    body: JSON.stringify({ action, ...payload })
+    body: JSON.stringify(reqPayload)
   });
   const res = await response.json();
   if (res.status === 'error') throw new Error(res.message);
   return res.data;
 }
 
-// --- AUTH & INIT ---
+// Authentication
 async function login() {
-  const user = document.getElementById('username').value;
-  const pass = document.getElementById('password').value;
+  const u = document.getElementById('username').value;
+  const p = document.getElementById('password').value;
   try {
-    const data = await apiCall('login', { username: user, password: pass });
-    state.user = { username: user, role: data.role };
+    const data = await apiCall('login', { username: u, password: p });
+    state.user = u; 
+    state.password = p; 
+    state.role = data.role;
+    
     document.getElementById('login-view').classList.add('d-none');
     document.getElementById('app-view').classList.remove('d-none');
-    document.getElementById('user-role-badge').innerText = `Logged in as: ${data.role}`;
-    
-    if (data.role === 'Admin') document.getElementById('btn-admin').classList.remove('d-none');
+    document.getElementById('user-role-badge').innerText = `Role: ${state.role}`;
     
-    await loadConfigAndData();
+    if (state.role === 'User' || state.role === 'Admin') {
+      document.getElementById('btn-add-new').classList.remove('d-none');
+    }
+    await loadInitialData();
   } catch (e) {
     document.getElementById('login-error').classList.remove('d-none');
   }
 }
 
 function logout() {
-  state.user = null;
+  state.user = null; state.password = null; state.role = null;
   document.getElementById('app-view').classList.add('d-none');
   document.getElementById('login-view').classList.remove('d-none');
-  document.getElementById('username').value = '';
-  document.getElementById('password').value = '';
 }
 
-async function loadConfigAndData() {
-  state.config = await apiCall('getConfig');
-  if (state.config) {
-    state.data = await apiCall('getData');
-    renderTable();
-  }
+// Data Loading
+async function loadInitialData() {
+  const result = await apiCall('getData');
+  state.options = result.options;
+  state.data = result.data;
+  
+  populateDropdowns();
+  renderTable();
 }
 
-// --- DATA DASHBOARD ---
-function renderTable() {
-  if (!state.config || !state.config.schema) return;
+function populateDropdowns() {
+  const buildOptions = (arr, valKey, labelKey = null) => 
+    `<option value="">Select...</option>` + arr.map(i => `<option value="${labelKey ? i[valKey] : i}">${labelKey ? i[labelKey] : i}</option>`).join('');
   
+  document.getElementById('f_supplier').innerHTML = buildOptions(state.options.suppliers);
+  document.getElementById('f_subInv').innerHTML = buildOptions(state.options.subinv);
+  document.getElementById('f_item').innerHTML = `<option value="">Select...</option>` + 
+    state.options.items.map(i => `<option value="${i.display}">${i.display}</option>`).join('');
+}
+
+function updateUOM() {
+  const selectedItemDisplay = document.getElementById('f_item').value;
+  const itemData = state.options.items.find(i => i.display === selectedItemDisplay);
+  document.getElementById('f_uom').value = itemData ? itemData.uom : '';
+}
+
+// Table Rendering
+function renderTable() {
   const search = document.getElementById('searchInput').value.toLowerCase();
-  const filtered = state.data.filter(row => Object.values(row).some(v => String(v).toLowerCase().includes(search)));
+  const filtered = state.data.filter(r => Object.values(r).some(v => String(v).toLowerCase().includes(search)));
 
-  let html = `<thead><tr>`;
-  state.config.schema.forEach(col => html += `<th>${col.header}</th>`);
-  html += `<th>Actions</th></tr></thead><tbody>`;
+  // Build Headers
+  let headHTML = `<tr><th>No. STG</th><th>Supplier</th><th>Item</th><th>Status</th>`;
+  if (state.role === 'User' || state.role === 'Admin') headHTML += `<th class="text-center">Action</th>`;
+  headHTML += `</tr>`;
+  document.getElementById('tableHead').innerHTML = headHTML;
 
+  // Build Body
+  let bodyHTML = '';
   filtered.forEach(row => {
-    html += `<tr>`;
-    state.config.schema.forEach(col => html += `<td>${row[col.header] || ''}</td>`);
-    html += `<td><button class="btn btn-sm btn-info text-white" onclick="openDataModal(${row._rowIndex})">Inspect/Edit</button></td></tr>`;
+    let dateStr = row.tglDatang ? new Date(row.tglDatang).toLocaleDateString() : '';
+    bodyHTML += `<tr>
+      <td>${row.stgManual || '-'}</td>
+      <td>${row.supplier}</td>
+      <td>${row.item}</td>
+      <td><span class="badge ${row.stat === 'OK' ? 'bg-success' : 'bg-secondary'}">${row.stat}</span></td>`;
+    
+    if (state.role === 'User' || state.role === 'Admin') {
+      bodyHTML += `<td class="text-center">
+        <button class="btn btn-warning btn-sm text-white py-0 px-2" onclick="openEditModal(${row._rowIndex})" title="Edit">
+          <i class="bi bi-pencil-square"></i>
+        </button>
+      </td>`;
+    }
+    bodyHTML += `</tr>`;
   });
-  html += `</tbody>`;
-  document.getElementById('dataTable').innerHTML = html;
+  document.getElementById('tableBody').innerHTML = bodyHTML;
 }
 
-function openDataModal(rowIndex = null) {
-  if (!state.config) return alert("System not configured by admin yet.");
-  state.currentRowIndex = rowIndex;
-  const rowData = rowIndex !== null ? state.data.find(r => r._rowIndex === rowIndex) : {};
+// Modals & Forms
+function openAddModal() {
+  state.currentMode = 'ADD';
+  document.getElementById('recordForm').reset();
+  document.getElementById('modalTitle').innerText = "Kedatangan Baru";
+  
+  document.getElementById('section-edit').classList.add('d-none');
+  document.getElementById('divider-edit').classList.add('d-none');
+  
+  lockFields(false); // Enable base fields
+  document.getElementById('btnActionSave').innerText = "Save";
+  document.getElementById('btnActionSave').disabled = true;
   
-  let html = '';
-  state.config.schema.forEach(field => {
-    let val = rowData[field.header] || '';
-    if (field.type === 'text') {
-      html += `<div class="mb-3"><label>${field.header}</label><input type="text" class="form-control data-field" data-key="${field.header}" value="${val}"></div>`;
-    } else if (field.type === 'dropdown') {
-      let opts = field.options.split(',').map(o => `<option value="${o.trim()}" ${val==o.trim()?'selected':''}>${o.trim()}</option>`).join('');
-      html += `<div class="mb-3"><label>${field.header}</label><select class="form-select data-field" data-key="${field.header}"><option value="">Select...</option>${opts}</select></div>`;
-    } else if (field.type === 'radio') {
-      let opts = field.options.split(',').map((o, i) => `
-        <div class="form-check">
-          <input class="form-check-input data-field" type="radio" name="${field.header}" data-key="${field.header}" value="${o.trim()}" ${val==o.trim()?'checked':''}>
-          <label class="form-check-label">${o.trim()}</label>
-        </div>
-      `).join('');
-      html += `<div class="mb-3"><label>${field.header}</label>${opts}</div>`;
-    }
-  });
-
-  document.getElementById('dataFormContainer').innerHTML = html;
   new coreui.Modal(document.getElementById('dataModal')).show();
 }
 
-async function saveData() {
-  let rowData = {};
-  document.querySelectorAll('.data-field').forEach(el => {
-    if (el.type === 'radio') {
-      if(el.checked) rowData[el.dataset.key] = el.value;
-    } else {
-      rowData[el.dataset.key] = el.value;
-    }
-  });
-
-  await apiCall('saveRow', { rowData, rowIndex: state.currentRowIndex });
-  closeModal('dataModal');
-  await loadConfigAndData();
+function openEditModal(rowIndex) {
+  state.currentMode = 'EDIT';
+  state.currentRowIndex = rowIndex;
+  const rowData = state.data.find(r => r._rowIndex === rowIndex);
+  
+  document.getElementById('modalTitle').innerText = "Edit Row";
+  document.getElementById('section-edit').classList.remove('d-none');
+  document.getElementById('divider-edit').classList.remove('d-none');
+
+  // Populate Base Fields
+  document.getElementById('f_supplier').value = rowData.supplier;
+  document.getElementById('f_tglDatang').value = formatDateForInput(rowData.tglDatang);
+  document.getElementById('f_noSj').value = rowData.noSj;
+  document.getElementById('f_item').value = rowData.item;
+  document.getElementById('f_qtyAwal').value = rowData.qtyAwal;
+  document.getElementById('f_qtyReject').value = rowData.qtyReject;
+  document.getElementById('f_qtyNett').value = rowData.qtyNett;
+  document.getElementById('f_uom').value = rowData.uom;
+  document.getElementById('f_subInv').value = rowData.subInv;
+  document.getElementById('f_stgManual').value = rowData.stgManual;
+  document.getElementById('f_ekspedisi').value = formatDateForInput(rowData.ekspedisi);
+
+  // Populate Edit Fields (Parse prefix PO/SKL/_)
+  const cleanPo = rowData.noPo ? String(rowData.noPo).replace('PO/SKL/_', '') : '';
+  document.getElementById('f_noPo').value = cleanPo;
+  document.getElementById('f_tglPo').value = formatDateForInput(rowData.tglPo);
+  document.getElementById('f_noReceive').value = rowData.noReceive;
+  document.getElementById('f_notes').value = rowData.notes;
+
+  lockFields(true); // Disable non-editable base fields
+  document.getElementById('btnActionSave').innerText = "Update";
+  document.getElementById('btnActionSave').disabled = true;
+  
+  new coreui.Modal(document.getElementById('dataModal')).show();
 }
 
-// --- ADMIN CONFIGURATION ---
-function openAdminModal() {
-  if (state.config) {
-    document.getElementById('adminSheetUrl').value = `https://docs.google.com/spreadsheets/d/${state.config.targetSheetId}`;
-  }
-  new coreui.Modal(document.getElementById('adminModal')).show();
+function formatDateForInput(dateString) {
+  if (!dateString) return '';
+  const d = new Date(dateString);
+  return d.toISOString().split('T')[0];
 }
 
-async function fetchSheets() {
-  const url = document.getElementById('adminSheetUrl').value;
-  const sheets = await apiCall('getRemoteSheets', { sheetUrl: url });
-  const select = document.getElementById('adminSheetSelect');
-  select.innerHTML = sheets.map(s => `<option value="${s}">${s}</option>`).join('');
-  document.getElementById('adminSheetSelectGroup').classList.remove('d-none');
+function lockFields(isEdit) {
+  // In Edit mode, Supplier, TglDatang, NoSj, Item are locked. 
+  // qtyAwal, qtyReject, qtyNett, subInv, stgManual, ekspedisi remain editable.
+  const toLock = ['f_supplier', 'f_tglDatang', 'f_noSj', 'f_item'];
+  toLock.forEach(id => document.getElementById(id).disabled = isEdit);
 }
 
-async function fetchColumns() {
-  const url = document.getElementById('adminSheetUrl').value;
-  const sheetName = document.getElementById('adminSheetSelect').value;
-  const columns = await apiCall('getRemoteColumns', { sheetUrl: url, sheetName });
-  
-  let html = columns.map(col => `
-    <tr>
-      <td class="col-header">${col}</td>
-      <td>
-        <select class="form-select col-type" onchange="this.parentElement.nextElementSibling.children[0].classList.toggle('d-none', this.value === 'text')">
-          <option value="text">Textbox</option>
-          <option value="dropdown">Dropdown</option>
-          <option value="radio">Radio</option>
-        </select>
-      </td>
-      <td><input type="text" class="form-control col-options d-none" placeholder="e.g. Option1, Option2"></td>
-    </tr>
-  `).join('');
-  
-  document.getElementById('adminColumnsBody').innerHTML = html;
-  document.getElementById('adminColumnsTable').classList.remove('d-none');
+function checkFormValidity() {
+  let isValid = true;
+  if (state.currentMode === 'ADD') {
+    document.querySelectorAll('.req-add').forEach(el => {
+      if (!el.value.trim()) isValid = false;
+    });
+  } else {
+    // In edit mode, strict edit fields must be filled
+    document.querySelectorAll('.req-edit-strict').forEach(el => {
+      if (!el.value.trim()) isValid = false;
+    });
+    // And base editable fields must still be filled
+    document.querySelectorAll('.req-edit').forEach(el => {
+      if (!el.value.trim()) isValid = false;
+    });
+  }
+  document.getElementById('btnActionSave').disabled = !isValid;
 }
 
-async function saveAdminConfig() {
-  const schema = [];
-  document.querySelectorAll('#adminColumnsBody tr').forEach(tr => {
-    schema.push({
-      header: tr.querySelector('.col-header').innerText,
-      type: tr.querySelector('.col-type').value,
-      options: tr.querySelector('.col-options').value
-    });
-  });
+async function submitData() {
+  const btn = document.getElementById('btnActionSave');
+  btn.disabled = true;
+  btn.innerHTML = `<span class="spinner-border spinner-border-sm"></span> Processing...`;
 
   const payload = {
-    sheetUrl: document.getElementById('adminSheetUrl').value,
-    sheetName: document.getElementById('adminSheetSelect').value,
-    schema: schema
+    qtyAwal: document.getElementById('f_qtyAwal').value,
+    qtyReject: document.getElementById('f_qtyReject').value,
+    qtyNett: document.getElementById('f_qtyNett').value,
+    subInv: document.getElementById('f_subInv').value,
+    stgManual: document.getElementById('f_stgManual').value.toUpperCase(),
+    ekspedisi: document.getElementById('f_ekspedisi').value
   };
 
-  await apiCall('saveConfig', { config: payload });
-  closeModal('adminModal');
-  await loadConfigAndData();
+  if (state.currentMode === 'ADD') {
+    payload.supplier = document.getElementById('f_supplier').value;
+    payload.tglDatang = document.getElementById('f_tglDatang').value;
+    payload.noSj = document.getElementById('f_noSj').value;
+    payload.item = document.getElementById('f_item').value;
+    payload.uom = document.getElementById('f_uom').value;
+    await apiCall('saveRow', { rowData: payload });
+  } else {
+    payload.noPo = document.getElementById('f_noPo').value;
+    payload.tglPo = document.getElementById('f_tglPo').value;
+    payload.noReceive = document.getElementById('f_noReceive').value;
+    payload.notes = document.getElementById('f_notes').value;
+    await apiCall('updateRow', { rowData: payload, rowIndex: state.currentRowIndex });
+  }
+
+  closeModal('dataModal');
+  await loadInitialData();
 }
 
 function closeModal(id) {