Fix customer persistence (POST writes local file + GET reads live repo), fix + Thêm row, add customer-list CSS contrast, add role-based visibility (admin 479b... sees all customers/orders; others only own orders, no customer-list button)

index.html

@@ -523,19 +523,36 @@
       .source-card-askai{display:flex;align-items:center;gap:6px;margin:8px 4px 2px;padding:7px 12px;background:linear-gradient(135deg,#003f62,#0077b6);color:#fff;border:none;border-radius:10px;font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;width:fit-content}
       .source-card-askai:hover{opacity:.9;transform:translateY(-1px)}
 
-      /* ── Đơn hàng (order) buttons — always visible ── */
+      /* ── V.AI STUDIO order buttons ── */
       #order-btn, #vaistudio-order-btn { display: flex !important; }
+
+      /* ── Customer list (Danh sách khách hàng) row styling ──
+         Rows use semantic classes injected by customers.js. Style them with
+         full contrast so they read clearly against the white modal background. */
+      #cus-list .cus-row{display:flex;align-items:center;gap:12px;padding:12px 10px;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:8px;background:#f8fafc;transition:background .15s}
+      #cus-list .cus-row:hover{background:#eef6ff;border-color:#b8d4e8}
+      #cus-list .cus-row-main{flex:1;min-width:0}
+      #cus-list .cus-row-name{font-size:0.86rem;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+      #cus-list .cus-row-meta{font-size:0.7rem;color:#64748b;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+      #cus-list .cus-row-actions{display:flex;gap:6px;flex-shrink:0}
+      #cus-list .cus-select-btn{padding:7px 14px;border:none;border-radius:8px;background:#0077b6;color:#fff;font-size:0.74rem;font-weight:700;cursor:pointer}
+      #cus-list .cus-select-btn:hover{background:#005f94}
+      #cus-list .cus-edit-btn{padding:7px 12px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#334155;font-size:0.78rem;cursor:pointer}
+      #cus-list .cus-edit-btn:hover{border-color:#0077b6;color:#0077b6}
+      /* Multi-value rows: give each input row a clear background */
+      #cus-detail-modal .cus-mv-row{display:flex;gap:8px;margin-bottom:6px;align-items:center}
+      #cus-detail-modal .cus-mv-row input{background:#fff !important}
     </style>
 
     <!-- V.AI STUDIO RAG Module - loads products + integrates search/showProduct -->
     <script src="https://cdn.jsdelivr.net/npm/exceljs@4.4.0/dist/exceljs.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
-    <script src="./src/cart-quote.js?gc=17"></script>    <!-- Cart + Quote module (Giỏ hàng / Báo giá) -->
-    <script src="./src/customers.js?gc=3"></script>    <!-- Customer list (Danh sách khách hàng) -->
+    <script src="./src/cart-quote.js?gc=18"></script>    <!-- Cart + Quote module (Giỏ hàng / Báo giá) -->
+    <script src="./src/customers.js?gc=4"></script>    <!-- Customer list (Danh sách khách hàng) -->
     <script src="./src/vaix-rag.js?gc=45"></script>    <!-- V.AI STUDIO RAG Module - loads FASTER via light index; lazy galleries; spec-aware search -->
     <script src="./src/greeting-news.js?gc=21"></script>  <!-- Greeting HOT news cards + source links -->
-    <script src="./src/order-sync.js?gc=12"></script>    <!-- Order sync with V.AISTUDIO backend -->
+    <script src="./src/order-sync.js?gc=13"></script>    <!-- Order sync with V.AISTUDIO backend -->
     <script type="module" src="./src/app.js?gc=50"></script>
     <script src="./src/greeting-source-cards.js?gc=14"></script> <!-- FIX: Nguồn tin cards under greeting -->
     <script src="./src/avatar-picker.js?gc=12"></script> <!-- ✨ Circular avatar picker (Mr V / Lisamy) + loading progress bar -->

index.ts

@@ -7,7 +7,7 @@
  * S2S upstream: victor-gemma-avatar.hf.space S2S backend (smolagents now gates access).
  * Text-only chat: /api/chat — uses victor's S2S backend in text-only mode.
  */
-import { readFileSync } from "fs";
+import { readFileSync, writeFileSync } from "fs";
 // Read index.html directly as text to avoid Bun HTMLBundle object
 const index = readFileSync(new URL("./index.html", import.meta.url), "utf-8");
 import { readdir } from "fs/promises";
@@ -1232,10 +1232,26 @@ const server = Bun.serve({
       GET: async () => {
         try {
           const f = join("/app", "customers.json");
-          if (!existsSync(f)) return Response.json({});
-          const raw = readFileSync(f, "utf-8");
           let data: any = {};
-          try { data = JSON.parse(raw); } catch (_e) { data = {}; }
+          // Prefer LIVE repo HEAD so edits from any writer (Zalo bot upload, new
+          // admin saves) appear immediately without waiting for a rebuild.
+          try {
+            const token = (process.env.HF_INFERENCE_TOKEN || process.env.HF_TOKEN || "").trim();
+            const r = await fetch("https://huggingface.co/spaces/bep40/vai-avatar2/raw/main/customers.json", {
+              headers: token ? { Authorization: "Bearer " + token } : {},
+              signal: AbortSignal.timeout(6000),
+            });
+            if (r.ok) {
+              const raw = await r.text();
+              if (raw && raw.trim()) { try { data = JSON.parse(raw); } catch (_e) {} }
+            }
+          } catch (_e) {}
+          // Fallback: local file (fast path, also fine after a local POST write).
+          if (!data || typeof data !== "object" || !Object.keys(data).length) {
+            if (existsSync(f)) {
+              try { data = JSON.parse(readFileSync(f, "utf-8")); } catch (_e) { data = {}; }
+            }
+          }
           return new Response(JSON.stringify(data), {
             headers: { "Content-Type": "application/json; charset=utf-8", "Access-Control-Allow-Origin": "*" }
           });
@@ -1284,6 +1300,11 @@ const server = Bun.serve({
             const errText = await commit.text().catch(() => "");
             return Response.json({ error: "Commit failed: HTTP " + commit.status + " " + errText.slice(0, 300) }, { status: 502 });
           }
+          // Persist locally too — without this, the live GET keeps returning the
+          // stale /app/customers.json until the Space rebuilds (rebuilds are slow
+          // and a write shouldn't depend on one). Keep local file in sync so
+          // subsequent GET /api/customers reflect the save immediately.
+          try { writeFileSync(f, content); } catch (_e) {}
           return Response.json({ ok: true, updated: changed, customers: data });
         } catch (e: any) {
           return Response.json({ error: e.message }, { status: 500 });

src/cart-quote.js

@@ -577,6 +577,15 @@ window.saveOrder = function() {
   ['ma_kh','cid','zalo_name','zalo_id','shipping_address','company','company_address','tax_code','representative','recipient','ck'].forEach(function (k) {
     if (_cust[k] != null) order[k] = _cust[k];
   });
+  // Ensure ownership fields are set so role-based order filtering works.
+  if (!order.cid && window.currentCid) { try { order.cid = window.currentCid() || ''; } catch (e) {} }
+  if (!order.ma_kh) {
+    try {
+      var sel2 = JSON.parse(localStorage.getItem('vas_selected_customer') || 'null');
+      if (sel2 && sel2.ma_kh) order.ma_kh = sel2.ma_kh;
+      else { var p2 = new URLSearchParams(location.search); if (p2.get('kh')) order.ma_kh = p2.get('kh'); }
+    } catch (e) {}
+  }
   var idx = orders.findIndex(function(o) { return o.code === code; });
   if (idx >= 0) orders[idx] = order; else orders.unshift(order);
   _lss(ORDER_KEY, orders);
@@ -594,13 +603,33 @@ window.deleteOrder = function(code) {
 window.openOrderModal = function() {
   var old = document.getElementById('vai-order-modal');
   if (old) old.remove();
-  var orders = getAllOrders();
+  var allOrders = getAllOrders();
+  // Role-based order visibility: admin sees ALL orders; any other visitor sees
+  // only orders belonging to their own customer (matched by cid or ma_kh, or
+  // orders created in this same browser session with no owner).
+  var myCid = (window.currentCid ? window.currentCid() : '') || '';
+  var isAdmin = (window.isAdmin ? window.isAdmin() : (myCid === '479b1cfad6a83ff666b9'));
+  var myKh = '';
+  try {
+    var sel = JSON.parse(localStorage.getItem('vas_selected_customer') || 'null');
+    if (sel && sel.ma_kh) myKh = String(sel.ma_kh);
+    else { var khp = new URLSearchParams(location.search).get('kh'); if (khp) myKh = khp; }
+  } catch (e) {}
+  function ownsOrder(o) {
+    if (isAdmin) return true;
+    if (o.cid && myCid && String(o.cid) === String(myCid)) return true;
+    if (o.ma_kh && myKh && String(o.ma_kh).toUpperCase() === String(myKh).toUpperCase()) return true;
+    // Orders created in THIS browser without an owner are the user's own.
+    if (!o.cid && !o.ma_kh && o.source !== 'vaistudio') return true;
+    return false;
+  }
+  var orders = allOrders.filter(ownsOrder);
   var ov = document.createElement('div');
   ov.id = 'vai-order-modal';
   ov.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:5000;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto';
   ov.onclick = function(e){ if (e.target === ov) ov.remove(); };
   ov.innerHTML = '<div style="background:#fff;border-radius:16px;max-width:720px;width:100%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column">'
-    + '<div style="padding:14px 18px;background:#003f62;display:flex;align-items:center"><div style="font-size:16px;font-weight:800;color:#fff;flex:1"><i class="fas fa-receipt"></i> Đơn hàng (' + orders.length + ')</div><button id="vai-ord-close" style="background:none;border:none;color:#fff;font-size:22px;cursor:pointer">✕</button></div>'
+    + '<div style="padding:14px 18px;background:#003f62;display:flex;align-items:center"><div style="font-size:16px;font-weight:800;color:#fff;flex:1"><i class="fas fa-receipt"></i> Đơn hàng (' + orders.length + (isAdmin ? ')' : ' của tôi)') + '</div><button id="vai-ord-close" style="background:none;border:none;color:#fff;font-size:22px;cursor:pointer">✕</button></div>'
     + '<div style="padding:10px 18px;border-bottom:1px solid #e2e8f0"><input id="vai-ord-q" placeholder="Tìm mã đơn, tên KH, SĐT..." style="width:100%;padding:9px;border:2px solid #e2e8f0;border-radius:8px;font-size:12px;box-sizing:border-box"></div>'
     + '<div id="vai-ord-r" style="flex:1;overflow-y:auto;padding:10px 18px"></div>'
     + '</div>';

src/customers.js

@@ -105,6 +105,57 @@
     } catch (e) {}
   })();
 
+  // ── Current visitor identity & role ──
+  // Admin = the V.AI STUDIO Zalo owner (cid 479b1cfad6a83ff666b9). Admin sees
+  // the customer-list button (all customers) and ALL orders. Any other visitor
+  // (e.g. a customer via a ?kh= discount link) must NOT see the customer-list
+  // button and must only see their OWN orders.
+  var ADMIN_CID = '479b1cfad6a83ff666b9';
+  function currentCid() {
+    try {
+      var p = new URLSearchParams(location.search);
+      var kh = p.get('kh');
+      if (kh) {
+        // ?kh=<ma_kh> — find the matching customer's cid.
+        var cust = window.__customers || {};
+        for (var k in cust) {
+          if (cust.hasOwnProperty(k) && String(cust[k].ma_kh || '').trim().toUpperCase() === String(kh).trim().toUpperCase()) {
+            return k;
+          }
+        }
+      }
+    } catch (e) {}
+    // Fall back to the selected customer (may be set by admin picking a customer).
+    try {
+      var sel = JSON.parse(localStorage.getItem('vas_selected_customer') || 'null');
+      if (sel && sel.cid) return sel.cid;
+    } catch (e) {}
+    return '';
+  }
+  window.currentCid = currentCid;
+  // Admin = V.AI STUDIO owner (cid matches) OR the user has unlocked editing
+  // with the V.AISTUDIO access code (admin-only signal). Keeping both lets the
+  // admin see the customer list even when opening the Space directly (no ?kh).
+  window.isAdmin = function () {
+    if (currentCid() === ADMIN_CID) return true;
+    try { return localStorage.getItem('vas_quote_unlocked') === '1'; } catch (e) { return false; }
+  };
+
+  // ── Role-based UI visibility ──
+  // Admin: sees customer-list button. Non-admin: hides it so customers cannot
+  // browse/manage the shared customer directory.
+  function applyRoleVisibility() {
+    var admin = (window.isAdmin ? window.isAdmin() : false);
+    var custBtns = document.querySelectorAll('#customer-btn, #vaistudio-customer-btn');
+    custBtns.forEach(function (b) { b.style.display = admin ? '' : 'none'; });
+  }
+  window.applyRoleVisibility = applyRoleVisibility;
+  // Re-apply after the catalog/buttons are ready and after discount-link load.
+  if (document.readyState !== 'loading') { setTimeout(applyRoleVisibility, 400); }
+  if (typeof window.addEventListener === 'function') {
+    window.addEventListener('load', function () { setTimeout(applyRoleVisibility, 800); });
+  }
+
   // ── Discount link (?kh=MA_KH) auto-apply on load ──
   // The Zalo bot appends a link https://<space>/?kh=<ma_kh> next to the
   // customer code. When the user opens it, look up that customer's ck in
@@ -294,13 +345,23 @@
       var add = e.target.closest('.cus-mv-add');
       if (add) {
         var field = add.getAttribute('data-field');
-        var list = add.closest('div').querySelector('.cus-mv-list');
+        // FIND the correct list: the add button sits in the header-row <div>,
+        // whose PARENT (the field wrapper) contains the .cus-mv-list. Using
+        // closest('div') returns the header row, whose querySelector on the
+        // sibling list returns null -> row was never appended. Fix below.
+        var headerRow = add.closest('div');
+        var wrap = (headerRow && headerRow.parentNode) ? headerRow.parentNode : null;
+        var list = wrap ? wrap.querySelector('.cus-mv-list') : null;
+        if (!list) { toast('Không tìm thấy vùng nhập'); return; }
         var row = document.createElement('div');
         row.className = 'cus-mv-row';
         row.setAttribute('data-field', field);
         row.innerHTML = '<input class="cus-mv-input" placeholder="' + esc(field) + '" style="flex:1;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:13px;outline:none">'
           + '<button class="cus-mv-del" style="background:#fee2e2;border:none;color:#dc2626;padding:6px 10px;border-radius:6px;cursor:pointer">−</button>';
         list.appendChild(row);
+        // Focus the newly added input for immediate data entry.
+        var ni = row.querySelector('.cus-mv-input');
+        if (ni) ni.focus();
         return;
       }
       var del = e.target.closest('.cus-mv-del');
@@ -352,7 +413,14 @@
       });
       _lss('vas_quote_unlocked', '1'); // ensure save path unlocked
       try {
-        await saveCustomers([record], ACCESS_CODE);
+        var resp = await saveCustomers([record], ACCESS_CODE);
+        // Update the in-memory cache with the server's authoritative data so the
+        // list reflects the just-saved values immediately (avoids stale re-open).
+        if (resp && resp.customers && typeof resp.customers === 'object') {
+          window.__customers = resp.customers;
+        } else {
+          try { window.__customers = await fetchCustomers(); } catch (_e) {}
+        }
         toast('✅ Đã lưu khách hàng');
         ov.remove();
         renderCustomerList(); // refresh list

src/order-sync.js

@@ -53,7 +53,10 @@
       remaining: order.remaining || 0,
       status: order.status || 'pending',
       savedAt: order.savedAt || new Date().toISOString(),
-      source: 'avatar2'
+      source: 'avatar2',
+      // ownership for privacy filtering
+      cid: order.cid || '',
+      ma_kh: order.ma_kh || ''
     };
   }
 
@@ -100,11 +103,38 @@
       grandTotal: so.grandTotal || so.total || 0,
       status: so.status || 'pending',
       savedAt: so.savedAt || '',
-      source: so.source || 'vaistudio'
+      source: so.source || 'vaistudio',
+      cid: so.cid || '',
+      ma_kh: so.ma_kh || ''
     };
   }
 
   // ---- merge server orders into local malloca_orders (V.AISTUDIO-style) ----
+  // PRIVACY: a non-admin visitor must only ever see/sync their OWN orders.
+  // Admin (cid 479b1cfad6a83ff666b9) syncs the full list. Filter server orders
+  // by the current visitor's cid / ma_kh before merging, so other customers'
+  // orders never land in this browser's list.
+  function currentIdentity() {
+    var cid = '', kh = '';
+    try {
+      if (window.currentCid) cid = window.currentCid() || '';
+      var sel = JSON.parse(localStorage.getItem('vas_selected_customer') || 'null');
+      if (sel && sel.ma_kh) kh = String(sel.ma_kh);
+      else { var p = new URLSearchParams(location.search); if (p.get('kh')) kh = p.get('kh'); }
+    } catch (e) {}
+    return { cid: cid, kh: kh };
+  }
+  function orderBelongsToMe(o, strict) {
+    try { if (window.isAdmin && window.isAdmin()) return true; } catch (e) {}
+    var me = currentIdentity();
+    if (o.cid && me.cid && String(o.cid) === String(me.cid)) return true;
+    if (o.ma_kh && me.kh && String(o.ma_kh).toUpperCase() === String(me.kh).toUpperCase()) return true;
+    // Ownerless orders: allowed only for browser-local display (strict=false),
+    // never pulled from the server for a non-admin (strict=true) — those can't
+    // be attributed and would leak other people's data.
+    if (!strict && !o.cid && !o.ma_kh) return true;
+    return false;
+  }
   function syncFromServer() {
     try {
       var ac = new AbortController();
@@ -122,6 +152,11 @@
           serverOrders.forEach(function (so) {
             var code = so.ma_don || so.code || '';
             if (!code) return;
+            // Privacy: for non-admin only pull orders that match THIS visitor's
+            // identity (strict). Ownerless server orders are never synced to a
+            // non-admin browser.
+            var oId = { cid: so.cid || so.zalo_id || '', ma_kh: so.ma_kh || '' };
+            if (!orderBelongsToMe(oId, true)) return;
             var existingIdx = local.findIndex(function (o) { return String(o.code) === String(code); });
             if (existingIdx >= 0 && !so.overwrite && !so.savedAt && so.source !== 'avatar2') return;
             var order = toLocalOrder(so);