0xn0l

📂 /home/brightbrai/.trash/js/modules

✎ EDIT: products_customers.js ← BACK

// =============================================
// PRODUCTS PAGE
// =============================================
const ProductsPage = {
  render(container, sub) {
    const ta = document.getElementById('topbar-actions');
    if (ta) ta.innerHTML = `<button class="btn btn-primary" onclick="ProductsPage.openAddModal()">${Icons.plus} Add Product</button>`;
    const products = DB.getProducts();
    const cats = DB.getCategories();
    const catMap = Object.fromEntries(cats.map(c=>[c.id,c.name]));
    const activeProducts = products.filter(p => p.active !== false);
    const totalQty = activeProducts.reduce((sum, p) => sum + (p.stock || 0), 0);
    const lowStockCount = activeProducts.filter(p => p.stock <= (p.minStock || 0)).length;
    const inventoryValuation = activeProducts.reduce((sum, p) => sum + ((p.stock || 0) * (p.purchasePrice || 0)), 0);

container.innerHTML = `
      <div class="module-stats-grid">
        <div class="widget-card cyan">
          <div class="widget-content">
            <span class="widget-label">Unique Products</span>
            <div class="widget-value" style="color:var(--info);">${activeProducts.length} Items</div>
            <span class="widget-sub">Total active SKUs in shop</span>
          </div>
          <div class="widget-icon">${Icons.products}</div>
        </div>

<div class="widget-card green">
          <div class="widget-content">
            <span class="widget-label">Total Stock Units</span>
            <div class="widget-value" style="color:var(--success);">${totalQty} pcs</div>
            <span class="widget-sub">Total physical inventory units</span>
          </div>
          <div class="widget-icon">${Icons.check}</div>
        </div>

<div class="widget-card ${lowStockCount > 0 ? 'rose' : 'green'}">
          <div class="widget-content">
            <span class="widget-label">Low Stock Alerts</span>
            <div class="widget-value" style="color:${lowStockCount > 0 ? 'var(--danger)' : 'var(--success)'};">${lowStockCount} Items</div>
            <span class="widget-sub">${lowStockCount > 0 ? 'Below minimum threshold' : 'All stock levels healthy'}</span>
          </div>
          <div class="widget-icon">${Icons.alert}</div>
        </div>

<div class="widget-card purple">
          <div class="widget-content">
            <span class="widget-label">Valuation at Cost</span>
            <div class="widget-value" style="color:var(--purple, #7c3aed);">${fmt.currency(inventoryValuation)}</div>
            <span class="widget-sub">Current asset purchase cost</span>
          </div>
          <div class="widget-icon">${Icons.reports}</div>
        </div>
      </div>

<div class="filters-bar">
        <div class="search-bar" style="flex:1;max-width:360px">${Icons.search}<input id="prod-search" class="form-control" placeholder="Name, SKU, barcode, part number..." oninput="ProductsPage.filter()"></div>
        <select id="prod-cat" class="form-control" style="width:160px" onchange="ProductsPage.filter()">
          <option value="">All Categories</option>
          ${cats.map(c=>`<option value="${c.id}">${c.name}</option>`).join('')}
        </select>
        <select id="prod-stock-filter" class="form-control" style="width:140px" onchange="ProductsPage.filter()">
          <option value="">All Stock</option>
          <option value="low">Low Stock</option>
          <option value="out">Out of Stock</option>
          <option value="ok">In Stock</option>
        </select>
        <button class="btn btn-outline btn-sm" onclick="ProductsPage.exportCSV()">Export CSV</button>
      </div>
      <div class="card">
        <div class="table-wrapper">
          <table>
            <thead><tr><th>Product</th><th>SKU</th><th>Category</th><th>Brand</th><th class="text-right">Purchase</th><th class="text-right">Retail</th><th class="text-right">Wholesale</th><th class="text-right">Stock</th><th>Location</th><th>Status</th><th>Actions</th></tr></thead>
            <tbody id="prod-tbody"></tbody>
          </table>
        </div>
      </div>`;
    this._allProducts = products;
    this._catMap = catMap;
    this.filter();
  },

filter() {
    const q=(document.getElementById('prod-search')?.value||'').toLowerCase();
    const cat=document.getElementById('prod-cat')?.value||'';
    const sf=document.getElementById('prod-stock-filter')?.value||'';
    let list=(this._allProducts||[]).filter(p=>{
      if (!q && !cat && !sf) return true;
      const matchQ=!q||(p.name||'').toLowerCase().includes(q)||(p.sku||'').toLowerCase().includes(q)||(p.barcode||'').toLowerCase().includes(q)||(p.partNumber||'').toLowerCase().includes(q)||(p.brand||'').toLowerCase().includes(q)||(p.bikeModel||'').toLowerCase().includes(q);
      const matchCat=!cat||p.categoryId===cat;
      const matchSf=!sf||(sf==='out'&&p.stock<=0)||(sf==='low'&&p.stock>0&&p.stock<=(p.minStock||0))||(sf==='ok'&&p.stock>(p.minStock||0));
      return matchQ&&matchCat&&matchSf;
    });
    const tbody=document.getElementById('prod-tbody');
    if (!tbody) return;
    tbody.innerHTML=list.length===0?`<tr><td colspan="11" style="text-align:center;padding:32px;color:var(--gray-400)">No products found</td></tr>`:
      list.map(p=>`<tr>
        <td><div style="font-weight:500">${p.name}</div>${p.partNumber?`<div style="font-size:11px;color:var(--gray-400)">Part# ${p.partNumber}</div>`:''}</td>
        <td style="font-family:monospace;font-size:12px">${p.sku||'-'}</td>
        <td>${this._catMap[p.categoryId]||'-'}</td>
        <td>${p.brand||'-'}</td>
        <td class="text-right">${fmt.currency(p.purchasePrice)}</td>
        <td class="text-right">${fmt.currency(p.retailPrice)}</td>
        <td class="text-right">${fmt.currency(p.wholesalePrice)}</td>
        <td class="text-right"><span class="badge ${p.stock<=0?'badge-danger':p.stock<=(p.minStock||0)?'badge-warning':'badge-success'}">${p.stock}</span></td>
        <td style="font-size:12px;color:var(--gray-500)">${p.location||'-'}</td>
        <td><span class="badge ${p.active!==false?'badge-success':'badge-gray'}">${p.active!==false?'Active':'Inactive'}</span></td>
        <td>
          <button class="btn btn-ghost btn-icon btn-sm" title="Edit" onclick="ProductsPage.openEditModal('${p.id}')">${Icons.edit}</button>
          <button class="btn btn-ghost btn-icon btn-sm" title="Stock History" onclick="ProductsPage.viewStockHistory('${p.id}')">${Icons.eye}</button>
          <button class="btn btn-ghost btn-icon btn-sm" title="Adjust Stock" onclick="ProductsPage.adjustStock('${p.id}')" style="color:var(--warning)">${Icons.alert}</button>
        </td>
      </tr>`).join('');
  },

exportCSV() {
    const rows=[['Name','SKU','Barcode','Part#','Category','Brand','Bike Model','Purchase Price','Retail Price','Wholesale Price','Stock','Min Stock','Location']];
    (this._allProducts||[]).forEach(p=>rows.push([p.name,p.sku||'',p.barcode||'',p.partNumber||'',this._catMap?.[p.categoryId]||'',p.brand||'',p.bikeModel||'',p.purchasePrice||0,p.retailPrice||0,p.wholesalePrice||0,p.stock||0,p.minStock||0,p.location||'']));
    const csv=rows.map(r=>r.map(c=>`"${c}"`).join(',')).join('\n');
    const a=document.createElement('a');a.href='data:text/csv;charset=utf-8,'+encodeURIComponent(csv);a.download='products.csv';a.click();
  },

openAddModal() { this._openModal(null); },
  openEditModal(id) { this._openModal(DB.getProduct(id)); },

_openModal(product) {
    const cats=DB.getCategories();
    const brands=DB.getBrands();
    const models=DB.getBikeModels();
    const suppliers=DB.getSuppliers();
    const p=product||{};
    Modal.open(`
      <div class="modal modal-xl">
        <div class="modal-header"><span class="modal-title">${p.id?'Edit Product':'Add Product'}</span><button class="btn-close" onclick="Modal.close()">✕</button></div>
        <div class="modal-body">
          <div class="form-row cols-3">
            <div class="form-group" style="grid-column:span 2">
              <label class="form-label">Product Name <span class="req">*</span></label>
              <input id="pm-name" class="form-control" value="${p.name||''}">
            </div>
            <div class="form-group">
              <label class="form-label">Status</label>
              <select id="pm-active" class="form-control">
                <option value="true" ${p.active!==false?'selected':''}>Active</option>
                <option value="false" ${p.active===false?'selected':''}>Inactive</option>
              </select>
            </div>
          </div>
          <div class="form-row cols-4">
            <div class="form-group"><label class="form-label">SKU</label><input id="pm-sku" class="form-control" value="${p.sku||''}"></div>
            <div class="form-group"><label class="form-label">Barcode</label><input id="pm-barcode" class="form-control" value="${p.barcode||''}"></div>
            <div class="form-group"><label class="form-label">Part Number</label><input id="pm-part" class="form-control" value="${p.partNumber||''}"></div>
            <div class="form-group"><label class="form-label">Location / Rack</label><input id="pm-loc" class="form-control" value="${p.location||''}"></div>
          </div>
          <div class="form-row cols-4">
            <div class="form-group">
              <label class="form-label">Category</label>
              <select id="pm-cat" class="form-control"><option value="">Select</option>${cats.map(c=>`<option value="${c.id}" ${p.categoryId===c.id?'selected':''}>${c.name}</option>`).join('')}</select>
            </div>
            <div class="form-group">
              <label class="form-label">Brand</label>
              <select id="pm-brand" class="form-control"><option value="">Select</option>${brands.map(b=>`<option value="${b.name}" ${p.brand===b.name?'selected':''}>${b.name}</option>`).join('')}</select>
            </div>
            <div class="form-group">
              <label class="form-label">Bike Model</label>
              <select id="pm-model" class="form-control"><option value="">Select</option>${models.map(m=>`<option value="${m.name}" ${p.bikeModel===m.name?'selected':''}>${m.name}</option>`).join('')}<option value="Universal" ${p.bikeModel==='Universal'?'selected':''}>Universal</option></select>
            </div>
            <div class="form-group">
              <label class="form-label">Supplier</label>
              <select id="pm-supp" class="form-control"><option value="">Select</option>${suppliers.map(s=>`<option value="${s.id}" ${p.supplierId===s.id?'selected':''}>${s.name}</option>`).join('')}</select>
            </div>
          </div>
          <div class="form-row cols-3">
            <div class="form-group"><label class="form-label">Purchase Price <span class="req">*</span></label><input id="pm-pp" type="number" class="form-control" value="${p.purchasePrice||0}" min="0"></div>
            <div class="form-group"><label class="form-label">Retail Price <span class="req">*</span></label><input id="pm-rp" type="number" class="form-control" value="${p.retailPrice||0}" min="0"></div>
            <div class="form-group"><label class="form-label">Wholesale Price <span class="req">*</span></label><input id="pm-wp" type="number" class="form-control" value="${p.wholesalePrice||0}" min="0"></div>
          </div>
          <div class="form-row cols-3">
            <div class="form-group"><label class="form-label">Current Stock</label><input id="pm-stock" type="number" class="form-control" value="${p.stock||0}" ${p.id?'readonly':''} min="0"></div>
            <div class="form-group"><label class="form-label">Minimum Stock</label><input id="pm-minstock" type="number" class="form-control" value="${p.minStock||0}" min="0"></div>
            <div class="form-group"><label class="form-label">Notes</label><input id="pm-notes" class="form-control" value="${p.notes||''}"></div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" onclick="Modal.close()">Cancel</button>
          <button class="btn btn-primary" onclick="ProductsPage.saveProduct('${p.id||''}')">${Icons.check} Save Product</button>
        </div>
      </div>`);
  },

saveProduct(id) {
    const name=document.getElementById('pm-name')?.value.trim();
    if (!name) { Toast.error('Product name is required'); return; }
    const product={
      id:id||DB.genId(), name,
      sku:document.getElementById('pm-sku')?.value.trim(),
      barcode:document.getElementById('pm-barcode')?.value.trim(),
      partNumber:document.getElementById('pm-part')?.value.trim(),
      location:document.getElementById('pm-loc')?.value.trim(),
      categoryId:document.getElementById('pm-cat')?.value,
      brand:document.getElementById('pm-brand')?.value,
      bikeModel:document.getElementById('pm-model')?.value,
      supplierId:document.getElementById('pm-supp')?.value,
      purchasePrice:parseFloat(document.getElementById('pm-pp')?.value)||0,
      retailPrice:parseFloat(document.getElementById('pm-rp')?.value)||0,
      wholesalePrice:parseFloat(document.getElementById('pm-wp')?.value)||0,
      stock:parseInt(document.getElementById('pm-stock')?.value)||0,
      minStock:parseInt(document.getElementById('pm-minstock')?.value)||0,
      notes:document.getElementById('pm-notes')?.value.trim(),
      active:document.getElementById('pm-active')?.value==='true',
    };
    DB.saveProduct(product);
    // If new product with opening stock, record stock movement
    if (!id && product.stock>0) DB.addStockMovement({productId:product.id,type:'Opening Stock',ref:'OPEN',stockIn:product.stock,stockOut:0,balance:product.stock});
    Modal.close();
    Toast.success('Product saved');
    this.render(document.getElementById('page-content'));
  },

viewStockHistory(id) {
    const p=DB.getProduct(id);
    const moves=DB.getStockMovements(id);
    Modal.open(`
      <div class="modal modal-lg">
        <div class="modal-header"><span class="modal-title">Stock History - ${p.name}</span><button class="btn-close" onclick="Modal.close()">✕</button></div>
        <div class="modal-body" style="padding:0">
          <div class="table-wrapper">
            <table>
              <thead><tr><th>Date</th><th>Type</th><th>Reference</th><th class="text-right">In</th><th class="text-right">Out</th><th class="text-right">Balance</th></tr></thead>
              <tbody>
                ${moves.length===0?'<tr><td colspan="6" style="text-align:center;padding:24px;color:var(--gray-400)">No stock movements</td></tr>':
                moves.map(m=>`<tr>
                  <td>${fmt.date(m.createdAt)}</td>
                  <td>${m.type||'-'}</td>
                  <td style="font-size:12px;color:var(--gray-500)">${m.ref||'-'}</td>
                  <td class="text-right" style="color:var(--success)">${m.stockIn>0?m.stockIn:'-'}</td>
                  <td class="text-right" style="color:var(--danger)">${m.stockOut>0?m.stockOut:'-'}</td>
                  <td class="text-right"><strong>${m.balance}</strong></td>
                </tr>`).join('')}
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer"><button class="btn btn-outline" onclick="Modal.close()">Close</button></div>
      </div>`);
  },

adjustStock(id) {
    if (!Auth.can('products')) { Toast.error('Permission denied'); return; }
    const p=DB.getProduct(id);
    Modal.open(`
      <div class="modal modal-sm">
        <div class="modal-header"><span class="modal-title">Adjust Stock - ${p.name}</span><button class="btn-close" onclick="Modal.close()">✕</button></div>
        <div class="modal-body">
          <p style="color:var(--gray-500);margin-bottom:12px">Current Stock: <strong>${p.stock}</strong></p>
          <div class="form-group">
            <label class="form-label">Adjustment Type</label>
            <select id="adj-type" class="form-control">
              <option value="add">Add Stock</option>
              <option value="remove">Remove Stock</option>
              <option value="set">Set Exact Quantity</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">Quantity</label>
            <input id="adj-qty" type="number" class="form-control" value="0" min="0">
          </div>
          <div class="form-group">
            <label class="form-label">Reason</label>
            <input id="adj-reason" class="form-control" placeholder="e.g. Damaged, Lost, Correction">
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" onclick="Modal.close()">Cancel</button>
          <button class="btn btn-primary" onclick="ProductsPage.processAdjustment('${id}')">Adjust</button>
        </div>
      </div>`);
  },

processAdjustment(id) {
    const type=document.getElementById('adj-type')?.value;
    const qty=parseInt(document.getElementById('adj-qty')?.value)||0;
    const reason=document.getElementById('adj-reason')?.value||'Manual Adjustment';
    const p=DB.getProduct(id);
    let delta=0;
    if (type==='add') delta=qty;
    else if (type==='remove') delta=-qty;
    else if (type==='set') delta=qty-p.stock;
    DB.adjustStock(id,delta,'Adjustment','ADJ',reason);
    Modal.close();
    Toast.success('Stock adjusted');
    this.render(document.getElementById('page-content'));
  },
};

// =============================================
// CUSTOMERS PAGE
// =============================================
const CustomersPage = {
  render(container, sub, params) {
    if (params?.id || sub) {
      const id = params?.id || sub;
      if (id) { this.renderProfile(container, id); return; }
    }
    const ta=document.getElementById('topbar-actions');
    if (ta) ta.innerHTML=`<button class="btn btn-primary" onclick="CustomersPage.openModal(null)">${Icons.plus} Add Customer</button>`;
    const customers = DB.getCustomers();
    const totalReceivables = customers.reduce((sum, c) => {
      const bal = DB.getCustomerBalance(c.id);
      return sum + (bal > 0 ? bal : 0);
    }, 0);
    const wholesaleCusts = customers.filter(c => c.type === 'wholesale').length;
    const retailCusts = customers.filter(c => c.type !== 'wholesale').length;
    const totalPayments = DB.getPayments().filter(p => p.type === 'customer').reduce((sum, p) => sum + (p.amount || 0), 0);

container.innerHTML=`
      <div class="module-stats-grid">
        <div class="widget-card indigo">
          <div class="widget-content">
            <span class="widget-label">Total Customers</span>
            <div class="widget-value" style="color:#4f46e5;">${customers.length} Accounts</div>
            <span class="widget-sub">Registered client profiles</span>
          </div>
          <div class="widget-icon">${Icons.customers}</div>
        </div>

<div class="widget-card rose">
          <div class="widget-content">
            <span class="widget-label">Total Receivables</span>
            <div class="widget-value" style="color:var(--danger);">${fmt.currency(totalReceivables)}</div>
            <span class="widget-sub">Outstanding credit owed to shop</span>
          </div>
          <div class="widget-icon">${Icons.alert}</div>
        </div>

<div class="widget-card green">
          <div class="widget-content">
            <span class="widget-label">Payments Collected</span>
            <div class="widget-value" style="color:var(--success);">${fmt.currency(totalPayments)}</div>
            <span class="widget-sub">Customer ledger payments</span>
          </div>
          <div class="widget-icon">${Icons.payments}</div>
        </div>

<div class="widget-card purple">
          <div class="widget-content">
            <span class="widget-label">Customer Segments</span>
            <div class="widget-value" style="color:var(--purple, #7c3aed);">${wholesaleCusts} <span style="font-size:13px;font-weight:500;color:var(--gray-500)">B2B</span> / ${retailCusts} <span style="font-size:13px;font-weight:500;color:var(--gray-500)">B2C</span></div>
            <span class="widget-sub">Wholesale vs Retail breakdown</span>
          </div>
          <div class="widget-icon">${Icons.sales}</div>
        </div>
      </div>

<div class="filters-bar">
        <div class="search-bar" style="flex:1;max-width:360px">${Icons.search}<input id="cust-search" class="form-control" placeholder="Name, phone, shop..." oninput="CustomersPage.filter()"></div>
        <select id="cust-type" class="form-control" style="width:140px" onchange="CustomersPage.filter()">
          <option value="">All Types</option><option value="retail">Retail</option><option value="wholesale">Wholesale</option>
        </select>
      </div>
      <div class="card">
        <div class="table-wrapper">
          <table>
            <thead><tr><th>Name</th><th>Shop</th><th>Phone</th><th>Type</th><th class="text-right">Balance</th><th>Actions</th></tr></thead>
            <tbody id="cust-tbody"></tbody>
          </table>
        </div>
      </div>`;
    this._all=customers;
    this.filter();
  },

filter() {
    const q=(document.getElementById('cust-search')?.value||'').toLowerCase();
    const type=document.getElementById('cust-type')?.value||'';
    const list=(this._all||[]).filter(c=>
      (!q||(c.name||'').toLowerCase().includes(q)||(c.phone||'').includes(q)||(c.shopName||'').toLowerCase().includes(q))&&
      (!type||c.type===type)
    );
    const tbody=document.getElementById('cust-tbody');
    if (!tbody) return;
    tbody.innerHTML=list.map(c=>{
      const bal=DB.getCustomerBalance(c.id);
      return `<tr>
        <td><a href="#" onclick="CustomersPage.renderProfile(document.getElementById('page-content'),'${c.id}');return false" style="color:var(--primary);font-weight:500">${c.name}</a></td>
        <td>${c.shopName||'-'}</td>
        <td>${c.phone||'-'}</td>
        <td><span class="badge ${c.type==='wholesale'?'badge-warning':'badge-primary'}">${c.type||'retail'}</span></td>
        <td class="text-right" style="color:${bal>0?'var(--danger)':'inherit'};font-weight:${bal>0?600:400}">${fmt.currency(bal)}</td>
        <td>
          <button class="btn btn-ghost btn-icon btn-sm" onclick="CustomersPage.renderProfile(document.getElementById('page-content'),'${c.id}')">${Icons.eye}</button>
          <button class="btn btn-ghost btn-icon btn-sm" onclick="CustomersPage.openModal('${c.id}')">${Icons.edit}</button>
        </td>
      </tr>`;
    }).join('')||'<tr><td colspan="6" style="text-align:center;padding:32px;color:var(--gray-400)">No customers found</td></tr>';
  },

openModal(id) {
    const c=id?DB.getCustomer(id):{};
    Modal.open(`
      <div class="modal modal-md">
        <div class="modal-header"><span class="modal-title">${id?'Edit':'Add'} Customer</span><button class="btn-close" onclick="Modal.close()">✕</button></div>
        <div class="modal-body">
          <div class="form-row cols-2">
            <div class="form-group"><label class="form-label">Name <span class="req">*</span></label><input id="cm-name" class="form-control" value="${c.name||''}"></div>
            <div class="form-group"><label class="form-label">Shop / Business Name</label><input id="cm-shop" class="form-control" value="${c.shopName||''}"></div>
          </div>
          <div class="form-row cols-2">
            <div class="form-group"><label class="form-label">Phone</label><input id="cm-phone" class="form-control" value="${c.phone||''}"></div>
            <div class="form-group"><label class="form-label">WhatsApp</label><input id="cm-wa" class="form-control" value="${c.whatsapp||''}"></div>
          </div>
          <div class="form-row cols-2">
            <div class="form-group">
              <label class="form-label">Customer Type</label>
              <select id="cm-type" class="form-control"><option value="retail" ${(c.type||'retail')==='retail'?'selected':''}>Retail</option><option value="wholesale" ${c.type==='wholesale'?'selected':''}>Wholesale</option></select>
            </div>
            <div class="form-group"><label class="form-label">Credit Limit</label><input id="cm-credit" type="number" class="form-control" value="${c.creditLimit||0}"></div>
          </div>
          <div class="form-group"><label class="form-label">Address</label><input id="cm-addr" class="form-control" value="${c.address||''}"></div>
          ${!id?`<div class="form-group"><label class="form-label">Opening Balance</label><input id="cm-ob" type="number" class="form-control" value="0" min="0"><div class="form-hint">Amount customer owes from before</div></div>`:''}
          <div class="form-group"><label class="form-label">Notes</label><textarea id="cm-notes" class="form-control" rows="2">${c.notes||''}</textarea></div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-outline" onclick="Modal.close()">Cancel</button>
          <button class="btn btn-primary" onclick="CustomersPage.save('${id||''}')">${Icons.check} Save</button>
        </div>
      </div>`);
  },

save(id) {
    const name=document.getElementById('cm-name')?.value.trim();
    if (!name) { Toast.error('Name is required'); return; }
    const isNew=!id;
    const customer={
      id:id||DB.genId(), name,
      shopName:document.getElementById('cm-shop')?.value.trim(),
      phone:document.getElementById('cm-phone')?.value.trim(),
      whatsapp:document.getElementById('cm-wa')?.value.trim(),
      type:document.getElementById('cm-type')?.value,
      creditLimit:parseFloat(document.getElementById('cm-credit')?.value)||0,
      address:document.getElementById('cm-addr')?.value.trim(),
      notes:document.getElementById('cm-notes')?.value.trim(),
      openingBalance:isNew?parseFloat(document.getElementById('cm-ob')?.value)||0:undefined,
    };
    DB.saveCustomer(customer);
    if (isNew && customer.openingBalance>0) {
      DB.addLedgerEntry({entityType:'customer',entityId:customer.id,date:fmt.today(),description:'Opening Balance',debit:customer.openingBalance,credit:0,refType:'opening'});
    }
    Modal.close();
    Toast.success('Customer saved');
    this.render(document.getElementById('page-content'));
  },

renderProfile(container, id) {
    const ta=document.getElementById('topbar-actions');
    if (ta) ta.innerHTML=`<button class="btn btn-outline btn-sm" onclick="CustomersPage.render(document.getElementById('page-content'))">${Icons.back} Customers</button><button class="btn btn-primary btn-sm" onclick="CustomersPage.openModal('${id}')">${Icons.edit} Edit</button>`;
    const c=DB.getCustomer(id);
    if (!c) { container.innerHTML='<div class="empty-state"><h3>Customer not found</h3></div>'; return; }
    const bal=DB.getCustomerBalance(id);
    const sales=DB.getSales().filter(s=>s.customerId===id&&s.status!=='void');
    const payments=DB.getPayments().filter(p=>p.type==='customer'&&p.entityId===id);
    const ledger=DB.getLedgerEntries('customer',id);
    let runBal=0;
    const ledgerRows=ledger.map(e=>{ runBal+=( e.debit||0)-(e.credit||0); return {...e,runningBal:runBal}; });
    container.innerHTML=`
      <div class="profile-header">
        <div class="profile-avatar">${c.name[0].toUpperCase()}</div>
        <div class="profile-info">
          <h2>${c.name}</h2>
          <p>${c.shopName||''} ${c.phone?'· '+c.phone:''}</p>
          <p style="margin-top:4px"><span class="badge ${c.type==='wholesale'?'badge-warning':'badge-primary'}">${c.type||'retail'}</span></p>
        </div>
        <div class="profile-stats">
          <div class="profile-stat"><div class="value">${fmt.currency(sales.reduce((s,x)=>s+(x.total||0),0))}</div><div class="label">Total Sales</div></div>
          <div class="profile-stat"><div class="value" style="color:var(--success)">${fmt.currency(payments.reduce((s,p)=>s+p.amount,0))}</div><div class="label">Total Paid</div></div>
          <div class="profile-stat"><div class="value" style="color:${bal>0?'var(--danger)':'var(--success)'}">${fmt.currency(bal)}</div><div class="label">Outstanding</div></div>
        </div>
      </div>
      <div class="tabs">
        <button class="tab-btn active" onclick="CustomersPage.showTab(this,'tab-ledger')">Ledger</button>
        <button class="tab-btn" onclick="CustomersPage.showTab(this,'tab-sales')">Sales History</button>
        <button class="tab-btn" onclick="CustomersPage.showTab(this,'tab-payments')">Payments</button>
      </div>
      <div id="tab-ledger">
        <div style="display:flex;justify-content:flex-end;gap:8px;margin-bottom:10px">
          <button class="btn btn-primary btn-sm" onclick="PaymentsPage.openReceiveModal('${id}');return false">${Icons.plus} Receive Payment</button>
          <button class="btn btn-outline btn-sm" onclick="CustomersPage.printLedger('${id}')">${Icons.print} Print Statement</button>
        </div>
        <div class="card">
          <div class="table-wrapper"><table>
            <thead><tr><th>Date</th><th>Description</th><th class="text-right">Debit</th><th class="text-right">Credit</th><th class="text-right">Balance</th></tr></thead>
            <tbody>
              ${ledgerRows.length===0?'<tr><td colspan="5" style="text-align:center;padding:24px;color:var(--gray-400)">No transactions</td></tr>':
              ledgerRows.map(e=>`<tr>
                <td>${fmt.date(e.date)}</td><td>${e.description||'-'}</td>
                <td class="text-right" style="color:var(--danger)">${e.debit>0?fmt.currency(e.debit):'-'}</td>
                <td class="text-right" style="color:var(--success)">${e.credit>0?fmt.currency(e.credit):'-'}</td>
                <td class="text-right" style="font-weight:600;color:${e.runningBal>0?'var(--danger)':'var(--success)'}">${fmt.currency(e.runningBal)}</td>
              </tr>`).join('')}
            </tbody>
            <tfoot><tr><td colspan="4" class="text-right"><strong>Outstanding Balance</strong></td><td class="text-right" style="color:${bal>0?'var(--danger)':'var(--success)'};font-weight:700">${fmt.currency(bal)}</td></tr></tfoot>
          </table></div>
        </div>
      </div>
      <div id="tab-sales" style="display:none">
        <div class="card">
          <div class="table-wrapper"><table>
            <thead><tr><th>Invoice</th><th>Type</th><th class="text-right">Total</th><th class="text-right">Paid</th><th class="text-right">Balance</th><th>Date</th></tr></thead>
            <tbody>
              ${sales.length===0?'<tr><td colspan="6" style="text-align:center;padding:24px;color:var(--gray-400)">No sales</td></tr>':
              sales.map(s=>`<tr>
                <td><a href="#" onclick="SalesPage.viewSale('${s.id}');return false" style="color:var(--primary)">${s.invoiceNo}</a></td>
                <td><span class="badge ${s.type==='wholesale'?'badge-warning':'badge-primary'}">${s.type}</span></td>
                <td class="text-right">${fmt.currency(s.total)}</td>
                <td class="text-right" style="color:var(--success)">${fmt.currency(s.paidAmount)}</td>
                <td class="text-right" style="color:var(--danger)">${fmt.currency((s.total||0)-(s.paidAmount||0))}</td>
                <td>${fmt.date(s.date)}</td>
              </tr>`).join('')}
            </tbody>
          </table></div>
        </div>
      </div>
      <div id="tab-payments" style="display:none">
        <div class="card">
          <div class="table-wrapper"><table>
            <thead><tr><th>Date</th><th>Method</th><th>Reference</th><th class="text-right">Amount</th><th>Notes</th></tr></thead>
            <tbody>
              ${payments.length===0?'<tr><td colspan="5" style="text-align:center;padding:24px;color:var(--gray-400)">No payments</td></tr>':
              payments.map(p=>`<tr>
                <td>${fmt.date(p.date)}</td><td>${p.method||'-'}</td><td style="font-size:12px;color:var(--gray-500)">${p.ref||'-'}</td>
                <td class="text-right" style="color:var(--success);font-weight:600">${fmt.currency(p.amount)}</td>
                <td style="font-size:12px;color:var(--gray-500)">${p.notes||'-'}</td>
              </tr>`).join('')}
            </tbody>
          </table></div>
        </div>
      </div>`;
  },

showTab(btn, tabId) {
    btn.closest('.tabs')?.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
    btn.classList.add('active');
    ['tab-ledger','tab-sales','tab-payments'].forEach(id=>{
      const el=document.getElementById(id); if(el) el.style.display=id===tabId?'':'none';
    });
  },

printLedger(id) {
    const c=DB.getCustomer(id);
    const s=DB.getSettings();
    const ledger=DB.getLedgerEntries('customer',id);
    let runBal=0;
    const rows=ledger.map(e=>{runBal+=(e.debit||0)-(e.credit||0);return {...e,runningBal:runBal};});
    const w=window.open('','_blank','width=800,height=900');
    w.document.write(`<!DOCTYPE html><html><head><title>Statement - ${c.name}</title>
    <style>body{font-family:Arial,sans-serif;font-size:13px;padding:20px}h2{margin:0 0 4px}p{margin:2px 0;color:#666;font-size:12px}table{width:100%;border-collapse:collapse;margin-top:20px}th{background:#f3f4f6;padding:8px;text-align:left;font-size:12px;border-bottom:1px solid #ddd}td{padding:7px 8px;border-bottom:1px solid #eee;font-size:12px}.tr{text-align:right}.footer{text-align:center;font-size:11px;color:#999;margin-top:20px;border-top:1px solid #ddd;padding-top:10px}</style></head><body>
    <h2>${s.shopName}</h2><p>${s.address} | ${s.phone}</p>
    <hr style="margin:12px 0">
    <h3 style="margin:0">Customer Statement: ${c.name}</h3>
    <p>${c.shopName||''} ${c.phone?'| '+c.phone:''}</p>
    <table><thead><tr><th>Date</th><th>Description</th><th class="tr">Debit</th><th class="tr">Credit</th><th class="tr">Balance</th></tr></thead>
    <tbody>${rows.map(e=>`<tr><td>${fmt.date(e.date)}</td><td>${e.description||''}</td><td class="tr" style="color:#dc2626">${e.debit>0?fmt.currency(e.debit):''}</td><td class="tr" style="color:#16a34a">${e.credit>0?fmt.currency(e.credit):''}</td><td class="tr" style="font-weight:600">${fmt.currency(e.runningBal)}</td></tr>`).join('')}</tbody>
    <tfoot><tr><td colspan="4" style="text-align:right;font-weight:700">Outstanding Balance</td><td style="text-align:right;font-weight:700;color:${runBal>0?'#dc2626':'#16a34a'}">${fmt.currency(runBal)}</td></tr></tfoot>
    </table>
    <div class="footer">Printed on ${new Date().toLocaleDateString()} | ${s.shopName}</div>
    <script>window.onload=()=>{window.print();}<\/script></body></html>`);
    w.document.close();
  },
};

0xn0l - 0011000001111000011011100011000001101100