0xn0l

📂 /home/brightbrai/public_html/pakauto/js/modules

✎ EDIT: reports_settings.js ← BACK

// =============================================
// REPORTS & SETTINGS MODULES
// =============================================

// ---- Reports Page ----
const ReportsPage = {
  currentTab: 'daily',

render(container, sub, params) {
    const ta = document.getElementById('topbar-actions');
    if (ta) {
      ta.innerHTML = `
        <button class="btn btn-outline btn-sm no-print" onclick="window.print()">
          ${Icons.print} Print Report
        </button>
      `;
    }

if (sub) this.currentTab = sub;

container.innerHTML = `
      <div class="reports-container">
        
        <div class="report-nav no-print" style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--gray-200);padding-bottom:12px;">
          <button class="btn btn-sm ${this.currentTab === 'daily' ? 'btn-primary' : 'btn-outline'}" onclick="ReportsPage.switchTab('daily')">Daily Summary</button>
          <button class="btn btn-sm ${this.currentTab === 'sales' ? 'btn-primary' : 'btn-outline'}" onclick="ReportsPage.switchTab('sales')">Sales Report</button>
          <button class="btn btn-sm ${this.currentTab === 'purchases' ? 'btn-primary' : 'btn-outline'}" onclick="ReportsPage.switchTab('purchases')">Purchases</button>
          <button class="btn btn-sm ${this.currentTab === 'inventory' ? 'btn-primary' : 'btn-outline'}" onclick="ReportsPage.switchTab('inventory')">Inventory Valuation</button>
          <button class="btn btn-sm ${this.currentTab === 'lowstock' ? 'btn-primary' : 'btn-outline'}" onclick="ReportsPage.switchTab('lowstock')">Low Stock Alert</button>
          <button class="btn btn-sm ${this.currentTab === 'receivables' ? 'btn-primary' : 'btn-outline'}" onclick="ReportsPage.switchTab('receivables')">Customer Balances</button>
          <button class="btn btn-sm ${this.currentTab === 'payables' ? 'btn-primary' : 'btn-outline'}" onclick="ReportsPage.switchTab('payables')">Supplier Balances</button>
          <button class="btn btn-sm ${this.currentTab === 'profit' ? 'btn-primary' : 'btn-outline'}" onclick="ReportsPage.switchTab('profit')">Profit & Loss</button>
          <button class="btn btn-sm ${this.currentTab === 'cash' ? 'btn-primary' : 'btn-outline'}" onclick="ReportsPage.switchTab('cash')">Cash Register</button>
        </div>

<div id="report-view"></div>
      </div>
    `;

this.loadTabContent();
  },

switchTab(tab) {
    this.currentTab = tab;
    this.render(document.getElementById('page-content'));
  },

loadTabContent() {
    const view = document.getElementById('report-view');
    if (!view) return;

switch (this.currentTab) {
      case 'daily': this.renderDailySummary(view); break;
      case 'sales': this.renderSalesReport(view); break;
      case 'purchases': this.renderPurchasesReport(view); break;
      case 'inventory': this.renderInventoryReport(view); break;
      case 'lowstock': this.renderLowStockReport(view); break;
      case 'receivables': this.renderReceivablesReport(view); break;
      case 'payables': this.renderPayablesReport(view); break;
      case 'profit': this.renderProfitReport(view); break;
      case 'cash': this.renderCashReport(view); break;
      default: this.renderDailySummary(view);
    }
  },

renderDailySummary(container) {
    const today = fmt.today();
    container.innerHTML = `
      <div class="card" style="margin-bottom:20px;">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
          <h3 class="card-title">Daily Operations Summary</h3>
          <div style="display:flex;align-items:center;gap:10px;">
            <label class="form-label" style="margin:0;">Select Date:</label>
            <input type="date" id="daily-date-picker" class="form-control" style="width:160px;" value="${today}">
          </div>
        </div>
        <div class="card-body" id="daily-summary-content"></div>
      </div>
    `;

const updateDaily = () => {
      const selectedDate = document.getElementById('daily-date-picker').value || today;
      const sales = DB.get('sales').filter(s => s.date === selectedDate && s.status !== 'void');
      const purchases = DB.get('purchases').filter(p => p.date === selectedDate && p.status !== 'void');
      const expenses = DB.get('expenses').filter(e => e.date === selectedDate);
      const payments = DB.get('payments').filter(p => p.date === selectedDate);

const totalSales = sales.reduce((sum, s) => sum + (s.total || 0), 0);
      const retailSales = sales.filter(s => s.type === 'retail').reduce((sum, s) => sum + (s.total || 0), 0);
      const wholesaleSales = sales.filter(s => s.type === 'wholesale').reduce((sum, s) => sum + (s.total || 0), 0);
      const salesCash = sales.filter(s => s.paymentMethod === 'Cash').reduce((sum, s) => sum + (s.paidAmount || 0), 0);
      const salesCredit = sales.reduce((sum, s) => sum + (s.dueAmount || 0), 0);

const totalPurchases = purchases.reduce((sum, p) => sum + (p.total || 0), 0);
      const totalExpenses = expenses.reduce((sum, e) => sum + (e.amount || 0), 0);
      
      let cogs = 0;
      sales.forEach(s => {
        const items = DB.getSaleItems(s.id);
        items.forEach(it => { cogs += (it.cost || 0) * (it.qty || 0); });
      });
      const grossProfit = totalSales - cogs;
      const netProfit = grossProfit - totalExpenses;

<h4 style="margin:20px 0 10px;">Invoices for ${fmt.date(selectedDate)}</h4>
        <div class="table-container">
          <table class="table">
            <thead>
              <tr>
                <th>Invoice #</th>
                <th>Time / Customer</th>
                <th>Type</th>
                <th>Items</th>
                <th>Total</th>
                <th>Paid</th>
                <th>Due</th>
                <th>Method</th>
              </tr>
            </thead>
            <tbody>
              ${sales.length === 0 ? `<tr><td colspan="8" class="text-center text-muted" style="padding:24px;">No sales recorded on this date.</td></tr>` : 
                sales.map(s => `
                  <tr>
                    <td><strong>${s.invoiceNo}</strong></td>
                    <td>${s.customerName || 'Walking Customer'}</td>
                    <td><span class="badge ${s.type === 'wholesale' ? 'badge-primary' : 'badge-secondary'}">${s.type}</span></td>
                    <td>${s.itemCount || 1}</td>
                    <td><strong>${fmt.currency(s.total)}</strong></td>
                    <td class="text-success">${fmt.currency(s.paidAmount)}</td>
                    <td class="${s.dueAmount > 0 ? 'text-danger font-weight-bold' : ''}">${fmt.currency(s.dueAmount)}</td>
                    <td><span class="badge badge-outline">${s.paymentMethod || 'Cash'}</span></td>
                  </tr>
                `).join('')
              }
            </tbody>
          </table>
        </div>
      `;
    };

document.getElementById('daily-date-picker').addEventListener('change', updateDaily);
    updateDaily();
  },

renderSalesReport(container) {
    const today = fmt.today();
    const firstDay = today.substring(0, 8) + '01';

container.innerHTML = `
      <div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;">
          <h3 class="card-title">Detailed Sales Report</h3>
          <div class="no-print" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
            <input type="date" id="rep-from" class="form-control" style="width:140px;" value="${firstDay}">
            <span>to</span>
            <input type="date" id="rep-to" class="form-control" style="width:140px;" value="${today}">
            <select id="rep-type" class="form-control" style="width:130px;">
              <option value="">All Types</option>
              <option value="retail">Retail</option>
              <option value="wholesale">Wholesale</option>
            </select>
            <button id="rep-filter-btn" class="btn btn-primary btn-sm">Filter</button>
          </div>
        </div>
        <div class="card-body">
          <div id="sales-rep-summary" style="display:flex;gap:20px;margin-bottom:16px;padding:12px;background:var(--gray-50);border-radius:6px;"></div>
          <div class="table-container">
            <table class="table">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Invoice #</th>
                  <th>Customer</th>
                  <th>Type</th>
                  <th>Total</th>
                  <th>Discount</th>
                  <th>Paid</th>
                  <th>Due</th>
                  <th>Payment</th>
                </tr>
              </thead>
              <tbody id="sales-rep-rows"></tbody>
            </table>
          </div>
        </div>
      </div>
    `;

const loadData = () => {
      const from = document.getElementById('rep-from').value;
      const to = document.getElementById('rep-to').value;
      const type = document.getElementById('rep-type').value;

const sales = DB.getSalesReport(from, to, { type });
      const totalAmount = sales.reduce((s, x) => s + (x.total || 0), 0);
      const totalPaid = sales.reduce((s, x) => s + (x.paidAmount || 0), 0);
      const totalDue = sales.reduce((s, x) => s + (x.dueAmount || 0), 0);
      const totalDiscount = sales.reduce((s, x) => s + (x.discount || 0), 0);

const tbody = document.getElementById('sales-rep-rows');
      if (sales.length === 0) {
        tbody.innerHTML = `<tr><td colspan="9" class="text-center text-muted" style="padding:24px;">No records match the filter criteria.</td></tr>`;
        return;
      }

tbody.innerHTML = sales.map(s => `
        <tr>
          <td>${fmt.date(s.date)}</td>
          <td><strong>${s.invoiceNo}</strong></td>
          <td>${s.customerName || 'Walk-in'}</td>
          <td><span class="badge ${s.type === 'wholesale' ? 'badge-primary' : 'badge-secondary'}">${s.type}</span></td>
          <td><strong>${fmt.currency(s.total)}</strong></td>
          <td>${s.discount ? fmt.currency(s.discount) : '-'}</td>
          <td class="text-success">${fmt.currency(s.paidAmount)}</td>
          <td class="${s.dueAmount > 0 ? 'text-danger font-weight-bold' : ''}">${fmt.currency(s.dueAmount)}</td>
          <td>${s.paymentMethod || 'Cash'}</td>
        </tr>
      `).join('');
    };

document.getElementById('rep-filter-btn').addEventListener('click', loadData);
    loadData();
  },

renderPurchasesReport(container) {
    const today = fmt.today();
    const firstDay = today.substring(0, 8) + '01';
    const suppliers = DB.getSuppliers();

container.innerHTML = `
      <div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;">
          <h3 class="card-title">Purchases Report</h3>
          <div class="no-print" style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
            <input type="date" id="pur-from" class="form-control" style="width:140px;" value="${firstDay}">
            <span>to</span>
            <input type="date" id="pur-to" class="form-control" style="width:140px;" value="${today}">
            <select id="pur-supplier" class="form-control" style="width:160px;">
              <option value="">All Suppliers</option>
              ${suppliers.map(s => `<option value="${s.id}">${s.name}</option>`).join('')}
            </select>
            <button id="pur-filter-btn" class="btn btn-primary btn-sm">Filter</button>
          </div>
        </div>
        <div class="card-body">
          <div id="pur-rep-summary" style="display:flex;gap:20px;margin-bottom:16px;padding:12px;background:var(--gray-50);border-radius:6px;"></div>
          <div class="table-container">
            <table class="table">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>PO / Inv #</th>
                  <th>Supplier</th>
                  <th>Total</th>
                  <th>Paid</th>
                  <th>Due</th>
                  <th>Payment Method</th>
                </tr>
              </thead>
              <tbody id="pur-rep-rows"></tbody>
            </table>
          </div>
        </div>
      </div>
    `;

const loadData = () => {
      const from = document.getElementById('pur-from').value;
      const to = document.getElementById('pur-to').value;
      const supplierId = document.getElementById('pur-supplier').value;

const purchases = DB.getPurchasesReport(from, to, { supplierId });
      const totalAmount = purchases.reduce((s, x) => s + (x.total || 0), 0);
      const totalPaid = purchases.reduce((s, x) => s + (x.paidAmount || 0), 0);
      const totalDue = purchases.reduce((s, x) => s + (x.dueAmount || 0), 0);

const tbody = document.getElementById('pur-rep-rows');
      if (purchases.length === 0) {
        tbody.innerHTML = `<tr><td colspan="7" class="text-center text-muted" style="padding:24px;">No purchase records found.</td></tr>`;
        return;
      }

tbody.innerHTML = purchases.map(p => `
        <tr>
          <td>${fmt.date(p.date)}</td>
          <td><strong>${p.invoiceNo}</strong></td>
          <td>${p.supplierName}</td>
          <td><strong>${fmt.currency(p.total)}</strong></td>
          <td class="text-success">${fmt.currency(p.paidAmount)}</td>
          <td class="${p.dueAmount > 0 ? 'text-danger font-weight-bold' : ''}">${fmt.currency(p.dueAmount)}</td>
          <td>${p.paymentMethod || 'Cash'}</td>
        </tr>
      `).join('');
    };

document.getElementById('pur-filter-btn').addEventListener('click', loadData);
    loadData();
  },

renderInventoryReport(container) {
    const products = DB.getProducts().filter(p => p.active !== false);
    const categories = DB.getCategories();

let totalValuationCost = 0;
    let totalValuationRetail = 0;
    let totalStockQty = 0;

products.forEach(p => {
      const qty = p.stock || 0;
      totalStockQty += qty;
      totalValuationCost += qty * (p.purchasePrice || 0);
      totalValuationRetail += qty * (p.retailPrice || 0);
    });

container.innerHTML = `
      <div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;">
          <h3 class="card-title">Inventory Valuation & Stock Status</h3>
          <div class="no-print" style="display:flex;gap:8px;align-items:center;">
            <select id="inv-cat-filter" class="form-control" style="width:160px;">
              <option value="">All Categories</option>
              ${categories.map(c => `<option value="${c.name}">${c.name}</option>`).join('')}
            </select>
          </div>
        </div>
        <div class="card-body">
          <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:16px;margin-bottom:20px;">
            <div class="stat-card">
              <div class="stat-label">Total Unique Products</div>
              <div class="stat-value">${products.length}</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Total Stock Quantity</div>
              <div class="stat-value">${totalStockQty} pcs</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Valuation at Cost</div>
              <div class="stat-value" style="color:var(--primary);">${fmt.currency(totalValuationCost)}</div>
            </div>
            <div class="stat-card">
              <div class="stat-label">Valuation at Retail</div>
              <div class="stat-value" style="color:var(--success);">${fmt.currency(totalValuationRetail)}</div>
            </div>
          </div>

<div class="table-container">
            <table class="table" id="inv-table">
              <thead>
                <tr>
                  <th>Product</th>
                  <th>SKU / Part #</th>
                  <th>Category</th>
                  <th>Current Stock</th>
                  <th>Cost Price</th>
                  <th>Retail Price</th>
                  <th>Stock Valuation (Cost)</th>
                  <th>Stock Status</th>
                </tr>
              </thead>
              <tbody id="inv-rows"></tbody>
            </table>
          </div>
        </div>
      </div>
    `;

const renderRows = () => {
      const selectedCat = document.getElementById('inv-cat-filter').value;
      const filtered = products.filter(p => !selectedCat || p.category === selectedCat);

document.getElementById('inv-cat-filter').addEventListener('change', renderRows);
    renderRows();
  },

renderLowStockReport(container) {
    const low = DB.getLowStockProducts();

container.innerHTML = `
      <div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
          <div>
            <h3 class="card-title" style="color:var(--danger);">Low Stock Alert Report</h3>
            <div style="font-size:13px;color:var(--gray-600);margin-top:4px;">Products that are at or below minimum threshold</div>
          </div>
          <button class="btn btn-primary btn-sm no-print" onclick="App.navigate('purchases/new')">
            ${Icons.plus} Create Purchase Order
          </button>
        </div>
        <div class="card-body">
          <div class="table-container">
            <table class="table">
              <thead>
                <tr>
                  <th>Product</th>
                  <th>SKU</th>
                  <th>Category</th>
                  <th>Current Stock</th>
                  <th>Min Alert Qty</th>
                  <th>Cost Price</th>
                  <th>Suggested Order</th>
                  <th class="no-print">Action</th>
                </tr>
              </thead>
              <tbody>
                ${low.length === 0 ? `<tr><td colspan="8" class="text-center text-success" style="padding:24px;">✓ All products are well stocked! No low stock alerts.</td></tr>` : 
                  low.map(p => {
                    const deficit = Math.max(0, (p.minStock || 0) * 2 - p.stock);
                    return `
                      <tr>
                        <td><strong>${p.name}</strong><br><span style="font-size:12px;color:var(--gray-500);">${p.brand || ''}</span></td>
                        <td><code>${p.sku || '-'}</code></td>
                        <td>${p.category || '-'}</td>
                        <td><span style="color:var(--danger);font-weight:700;font-size:15px;">${p.stock}</span></td>
                        <td>${p.minStock || 0}</td>
                        <td>${fmt.currency(p.purchasePrice)}</td>
                        <td><span class="badge badge-warning">+${deficit > 0 ? deficit : 5} pcs</span></td>
                        <td class="no-print">
                          <button class="btn btn-outline btn-sm" onclick="App.navigate('purchases/new')">Order Now</button>
                        </td>
                      </tr>
                    `;
                  }).join('')
                }
              </tbody>
            </table>
          </div>
        </div>
      </div>
    `;
  },

renderReceivablesReport(container) {
    const customers = DB.getCustomers().map(c => ({
      ...c,
      balance: DB.getCustomerBalance(c.id)
    })).filter(c => c.balance > 0);

const totalReceivables = customers.reduce((sum, c) => sum + c.balance, 0);

container.innerHTML = `
      <div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
          <div>
            <h3 class="card-title">Customer Balances & Receivables</h3>
            <div style="font-size:13px;color:var(--gray-600);">Total pending credit owed to shop: <strong style="color:var(--danger);">${fmt.currency(totalReceivables)}</strong></div>
          </div>
        </div>
        <div class="card-body">
          <div class="table-container">
            <table class="table">
              <thead>
                <tr>
                  <th>Customer Name</th>
                  <th>Shop / Company</th>
                  <th>Phone Number</th>
                  <th>Credit Limit</th>
                  <th>Outstanding Balance</th>
                  <th class="no-print">Action</th>
                </tr>
              </thead>
              <tbody>
                ${customers.length === 0 ? `<tr><td colspan="6" class="text-center text-muted" style="padding:24px;">No outstanding customer balances found.</td></tr>` : 
                  customers.map(c => `
                    <tr>
                      <td><strong>${c.name}</strong></td>
                      <td>${c.shopName || '-'}</td>
                      <td>${c.phone || '-'}</td>
                      <td>${c.creditLimit ? fmt.currency(c.creditLimit) : 'No Limit'}</td>
                      <td><strong style="color:var(--danger);font-size:15px;">${fmt.currency(c.balance)}</strong></td>
                      <td class="no-print">
                        <button class="btn btn-outline btn-sm" onclick="App.navigate('customers/${c.id}')">View Ledger</button>
                        <button class="btn btn-primary btn-sm" onclick="PaymentsPage.openCustomerPaymentModal('${c.id}')">Receive Payment</button>
                      </td>
                    </tr>
                  `).join('')
                }
              </tbody>
            </table>
          </div>
        </div>
      </div>
    `;
  },

renderPayablesReport(container) {
    const suppliers = DB.getSuppliers().map(s => ({
      ...s,
      balance: DB.getSupplierBalance(s.id)
    })).filter(s => s.balance > 0);

const totalPayables = suppliers.reduce((sum, s) => sum + s.balance, 0);

container.innerHTML = `
      <div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
          <div>
            <h3 class="card-title">Supplier Balances & Payables</h3>
            <div style="font-size:13px;color:var(--gray-600);">Total pending debt shop owes to suppliers: <strong style="color:var(--danger);">${fmt.currency(totalPayables)}</strong></div>
          </div>
        </div>
        <div class="card-body">
          <div class="table-container">
            <table class="table">
              <thead>
                <tr>
                  <th>Supplier Name</th>
                  <th>Company</th>
                  <th>Phone Number</th>
                  <th>Outstanding Debt</th>
                  <th class="no-print">Action</th>
                </tr>
              </thead>
              <tbody>
                ${suppliers.length === 0 ? `<tr><td colspan="5" class="text-center text-muted" style="padding:24px;">No outstanding supplier debts found.</td></tr>` : 
                  suppliers.map(s => `
                    <tr>
                      <td><strong>${s.name}</strong></td>
                      <td>${s.company || '-'}</td>
                      <td>${s.phone || '-'}</td>
                      <td><strong style="color:var(--danger);font-size:15px;">${fmt.currency(s.balance)}</strong></td>
                      <td class="no-print">
                        <button class="btn btn-outline btn-sm" onclick="App.navigate('suppliers/${s.id}')">View Ledger</button>
                        <button class="btn btn-primary btn-sm" onclick="PaymentsPage.openSupplierPaymentModal('${s.id}')">Make Payment</button>
                      </td>
                    </tr>
                  `).join('')
                }
              </tbody>
            </table>
          </div>
        </div>
      </div>
    `;
  },

renderProfitReport(container) {
    const today = fmt.today();
    const firstDay = today.substring(0, 8) + '01';

const calcProfit = () => {
      const from = document.getElementById('pnl-from').value;
      const to = document.getElementById('pnl-to').value;
      const pnl = DB.getProfitReport(from, to);

<div style="display:flex;justify-content:space-between;padding:12px 0;font-size:16px;font-weight:600;color:var(--primary);">
            <span>Gross Profit</span>
            <span>${fmt.currency(pnl.grossProfit)}</span>
          </div>

<div style="display:flex;justify-content:space-between;padding:10px 0;font-size:15px;color:var(--gray-600);border-bottom:1px dashed var(--gray-300);">
            <span>Operating Expenses</span>
            <span>- ${fmt.currency(pnl.expenses)}</span>
          </div>

<div style="display:flex;justify-content:space-between;padding:16px 0 0 0;font-size:18px;font-weight:700;color:${pnl.netProfit >= 0 ? 'var(--success)' : 'var(--danger)'};">
            <span>Net Profit / (Loss)</span>
            <span>${fmt.currency(pnl.netProfit)}</span>
          </div>
        </div>
      `;
    };

document.getElementById('pnl-filter-btn').addEventListener('click', calcProfit);
    calcProfit();
  },

renderCashReport(container) {
    const today = fmt.today();

container.innerHTML = `
      <div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
          <h3 class="card-title">Cash Register & In-Hand Summary</h3>
          <div class="no-print" style="display:flex;gap:8px;align-items:center;">
            <input type="date" id="cash-date" class="form-control" style="width:160px;" value="${today}">
          </div>
        </div>
        <div class="card-body" id="cash-content"></div>
      </div>
    `;

const loadCash = () => {
      const d = document.getElementById('cash-date').value || today;
      const c = DB.getCashSummary(d);

<div style="display:flex;justify-content:space-between;padding:16px 0 0 0;font-size:18px;font-weight:700;color:var(--primary);">
            <span>Net Cash Movement for Day</span>
            <span>${fmt.currency(c.closing)}</span>
          </div>
        </div>
      `;
    };

document.getElementById('cash-date').addEventListener('change', loadCash);
    loadCash();
  }
};

// ---- Settings Page ----
const SettingsPage = {
  currentTab: 'shop',

render(container, sub) {
    if (sub) this.currentTab = sub;

container.innerHTML = `
      <div class="settings-container">
        
        <div class="report-nav" style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;border-bottom:1px solid var(--gray-200);padding-bottom:12px;">
          <button class="btn btn-sm ${this.currentTab === 'shop' ? 'btn-primary' : 'btn-outline'}" onclick="SettingsPage.switchTab('shop')">Shop Profile</button>
          <button class="btn btn-sm ${this.currentTab === 'attributes' ? 'btn-primary' : 'btn-outline'}" onclick="SettingsPage.switchTab('attributes')">Categories, Brands & Models</button>
          <button class="btn btn-sm ${this.currentTab === 'users' ? 'btn-primary' : 'btn-outline'}" onclick="SettingsPage.switchTab('users')">User Management</button>
          <button class="btn btn-sm ${this.currentTab === 'backup' ? 'btn-primary' : 'btn-outline'}" onclick="SettingsPage.switchTab('backup')">Backup & Restore</button>
        </div>

<div id="settings-view"></div>
      </div>
    `;

this.loadTabContent();
  },

switchTab(tab) {
    this.currentTab = tab;
    this.render(document.getElementById('page-content'));
  },

loadTabContent() {
    const view = document.getElementById('settings-view');
    if (!view) return;

switch (this.currentTab) {
      case 'shop': this.renderShopSettings(view); break;
      case 'attributes': this.renderAttributeSettings(view); break;
      case 'users': this.renderUsersSettings(view); break;
      case 'backup': this.renderBackupSettings(view); break;
      default: this.renderShopSettings(view);
    }
  },

renderShopSettings(container) {
    const s = DB.getSettings();

container.innerHTML = `
      <div class="card" style="max-width:700px;">
        <div class="card-header">
          <h3 class="card-title">Shop Information & Invoice Preferences</h3>
        </div>
        <div class="card-body">
          <form id="shop-settings-form">
            <div class="form-group">
              <label class="form-label">Shop Name</label>
              <input type="text" id="set-shopname" class="form-control" value="${s.shopName || ''}" required>
            </div>
            <div class="form-group">
              <label class="form-label">Shop Address</label>
              <input type="text" id="set-address" class="form-control" value="${s.address || ''}">
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
              <div class="form-group">
                <label class="form-label">Phone Number</label>
                <input type="text" id="set-phone" class="form-control" value="${s.phone || ''}">
              </div>
              <div class="form-group">
                <label class="form-label">WhatsApp Number</label>
                <input type="text" id="set-whatsapp" class="form-control" value="${s.whatsapp || ''}">
              </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
              <div class="form-group">
                <label class="form-label">Currency Symbol</label>
                <input type="text" id="set-currency" class="form-control" value="${s.currency || 'Rs.'}">
              </div>
              <div class="form-group">
                <label class="form-label">Low Stock Default Threshold</label>
                <input type="number" id="set-lowstock" class="form-control" value="${s.lowStockAlert || 5}">
              </div>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;">
              <div class="form-group">
                <label class="form-label">Default Invoice Prefix</label>
                <input type="text" id="set-invprefix" class="form-control" value="${s.invoicePrefix || 'INV'}">
              </div>
              <div class="form-group">
                <label class="form-label">Invoice Print Format</label>
                <select id="set-invformat" class="form-control">
                  <option value="thermal" ${s.invoiceFormat === 'thermal' ? 'selected' : ''}>Thermal Slip (80mm)</option>
                  <option value="A4" ${s.invoiceFormat === 'A4' ? 'selected' : ''}>Standard A4 Invoice</option>
                </select>
              </div>
            </div>
            <div class="form-group" style="margin-top:16px;">
              <button type="submit" class="btn btn-primary">Save Shop Settings</button>
            </div>
          </form>
        </div>
      </div>
    `;

document.getElementById('shop-settings-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const updated = {
        ...s,
        shopName: document.getElementById('set-shopname').value.trim(),
        address: document.getElementById('set-address').value.trim(),
        phone: document.getElementById('set-phone').value.trim(),
        whatsapp: document.getElementById('set-whatsapp').value.trim(),
        currency: document.getElementById('set-currency').value.trim(),
        lowStockAlert: Number(document.getElementById('set-lowstock').value) || 5,
        invoicePrefix: document.getElementById('set-invprefix').value.trim(),
        invoiceFormat: document.getElementById('set-invformat').value,
      };
      DB.saveSettings(updated);
      Toast.success('Settings updated successfully!');
      const logoText = document.querySelector('.logo-text');
      if (logoText) logoText.textContent = updated.shopName;
    });
  },

renderAttributeSettings(container) {
    const cats = DB.getCategories();
    const brands = DB.getBrands();
    const models = DB.getBikeModels();
    const expCats = DB.getExpenseCategories();

container.innerHTML = `
      <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:20px;">
        
        <div class="card">
          <div class="card-header"><h3 class="card-title">Part Categories</h3></div>
          <div class="card-body">
            <div style="display:flex;gap:8px;margin-bottom:12px;">
              <input type="text" id="new-cat-input" class="form-control" placeholder="New category name...">
              <button id="add-cat-btn" class="btn btn-primary btn-sm">${Icons.plus} Add</button>
            </div>
            <div class="table-container" style="max-height:260px;overflow-y:auto;">
              <table class="table table-sm">
                <tbody>
                  ${cats.map(c => `
                    <tr>
                      <td>${c.name}</td>
                      <td style="text-align:right;">
                        <button class="btn btn-ghost btn-sm" onclick="SettingsPage.deleteCategory('${c.id}')" style="color:var(--danger);">${Icons.trash}</button>
                      </td>
                    </tr>
                  `).join('')}
                </tbody>
              </table>
            </div>
          </div>
        </div>

<div class="card">
          <div class="card-header"><h3 class="card-title">Brands</h3></div>
          <div class="card-body">
            <div style="display:flex;gap:8px;margin-bottom:12px;">
              <input type="text" id="new-brand-input" class="form-control" placeholder="New brand name...">
              <button id="add-brand-btn" class="btn btn-primary btn-sm">${Icons.plus} Add</button>
            </div>
            <div class="table-container" style="max-height:260px;overflow-y:auto;">
              <table class="table table-sm">
                <tbody>
                  ${brands.map(b => `
                    <tr>
                      <td>${b.name}</td>
                      <td style="text-align:right;">
                        <button class="btn btn-ghost btn-sm" onclick="SettingsPage.deleteBrand('${b.id}')" style="color:var(--danger);">${Icons.trash}</button>
                      </td>
                    </tr>
                  `).join('')}
                </tbody>
              </table>
            </div>
          </div>
        </div>

<div class="card">
          <div class="card-header"><h3 class="card-title">Bike Models</h3></div>
          <div class="card-body">
            <div style="display:flex;gap:8px;margin-bottom:12px;">
              <input type="text" id="new-model-input" class="form-control" placeholder="e.g. Honda CD70...">
              <button id="add-model-btn" class="btn btn-primary btn-sm">${Icons.plus} Add</button>
            </div>
            <div class="table-container" style="max-height:260px;overflow-y:auto;">
              <table class="table table-sm">
                <tbody>
                  ${models.map(m => `
                    <tr>
                      <td>${m.name}</td>
                      <td style="text-align:right;">
                        <button class="btn btn-ghost btn-sm" onclick="SettingsPage.deleteModel('${m.id}')" style="color:var(--danger);">${Icons.trash}</button>
                      </td>
                    </tr>
                  `).join('')}
                </tbody>
              </table>
            </div>
          </div>
        </div>

<div class="card">
          <div class="card-header"><h3 class="card-title">Expense Categories</h3></div>
          <div class="card-body">
            <div style="display:flex;gap:8px;margin-bottom:12px;">
              <input type="text" id="new-expcat-input" class="form-control" placeholder="e.g. Shop Rent...">
              <button id="add-expcat-btn" class="btn btn-primary btn-sm">${Icons.plus} Add</button>
            </div>
            <div class="table-container" style="max-height:260px;overflow-y:auto;">
              <table class="table table-sm">
                <tbody>
                  ${expCats.map(c => `
                    <tr>
                      <td>${c.name}</td>
                      <td style="text-align:right;">
                        <button class="btn btn-ghost btn-sm" onclick="SettingsPage.deleteExpCategory('${c.id}')" style="color:var(--danger);">${Icons.trash}</button>
                      </td>
                    </tr>
                  `).join('')}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    `;

document.getElementById('add-cat-btn').addEventListener('click', () => {
      const name = document.getElementById('new-cat-input').value.trim();
      if (!name) return;
      DB.saveCategory({ id: DB.genId(), name });
      Toast.success('Category added');
      this.renderAttributeSettings(document.getElementById('settings-view'));
    });

document.getElementById('add-brand-btn').addEventListener('click', () => {
      const name = document.getElementById('new-brand-input').value.trim();
      if (!name) return;
      DB.saveBrand({ id: DB.genId(), name });
      Toast.success('Brand added');
      this.renderAttributeSettings(document.getElementById('settings-view'));
    });

document.getElementById('add-model-btn').addEventListener('click', () => {
      const name = document.getElementById('new-model-input').value.trim();
      if (!name) return;
      DB.saveBikeModel({ id: DB.genId(), name });
      Toast.success('Bike model added');
      this.renderAttributeSettings(document.getElementById('settings-view'));
    });

document.getElementById('add-expcat-btn').addEventListener('click', () => {
      const name = document.getElementById('new-expcat-input').value.trim();
      if (!name) return;
      DB.saveExpenseCategory({ id: DB.genId(), name });
      Toast.success('Expense category added');
      this.renderAttributeSettings(document.getElementById('settings-view'));
    });
  },

deleteCategory(id) {
    DB.deleteCategory(id);
    Toast.info('Category deleted');
    this.renderAttributeSettings(document.getElementById('settings-view'));
  },
  deleteBrand(id) {
    DB.deleteBrand(id);
    Toast.info('Brand deleted');
    this.renderAttributeSettings(document.getElementById('settings-view'));
  },
  deleteModel(id) {
    DB.deleteBikeModel(id);
    Toast.info('Bike model deleted');
    this.renderAttributeSettings(document.getElementById('settings-view'));
  },
  deleteExpCategory(id) {
    DB.deleteExpenseCategory(id);
    Toast.info('Expense category deleted');
    this.renderAttributeSettings(document.getElementById('settings-view'));
  },

renderUsersSettings(container) {
    const users = DB.getUsers();

container.innerHTML = `
      <div class="card" style="max-width:800px;">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
          <h3 class="card-title">User Accounts & Roles</h3>
          <button class="btn btn-primary btn-sm" onclick="SettingsPage.openUserModal()">
            ${Icons.plus} Add New User
          </button>
        </div>
        <div class="card-body">
          <div class="table-container">
            <table class="table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Username</th>
                  <th>Role</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                ${users.map(u => `
                  <tr>
                    <td><strong>${u.name}</strong></td>
                    <td><code>${u.username}</code></td>
                    <td><span class="badge ${u.role === 'admin' ? 'badge-primary' : 'badge-secondary'}">${u.role.toUpperCase()}</span></td>
                    <td><span class="badge ${u.active !== false ? 'badge-success' : 'badge-danger'}">${u.active !== false ? 'Active' : 'Inactive'}</span></td>
                    <td>
                      <button class="btn btn-outline btn-sm" onclick="SettingsPage.openUserModal('${u.id}')">${Icons.edit}</button>
                      ${u.username !== 'admin' ? `
                        <button class="btn btn-ghost btn-sm" onclick="SettingsPage.deleteUser('${u.id}')" style="color:var(--danger);">${Icons.trash}</button>
                      ` : ''}
                    </td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    `;
  },

openUserModal(id) {
    const user = id ? DB.getUser(id) : { name: '', username: '', password: '', role: 'cashier', active: true };

Modal.open(`
      <div class="modal modal-md">
        <div class="modal-header">
          <span class="modal-title">${id ? 'Edit User' : 'Add New User'}</span>
          <button class="btn-close" onclick="Modal.close()">✕</button>
        </div>
        <div class="modal-body">
          <form id="user-form">
            <div class="form-group">
              <label class="form-label">Full Name</label>
              <input type="text" id="usr-name" class="form-control" value="${user.name || ''}" required>
            </div>
            <div class="form-group">
              <label class="form-label">Username</label>
              <input type="text" id="usr-uname" class="form-control" value="${user.username || ''}" required ${id ? 'readonly' : ''}>
            </div>
            <div class="form-group">
              <label class="form-label">Password</label>
              <input type="password" id="usr-pwd" class="form-control" value="${user.password || ''}" required>
            </div>
            <div class="form-group">
              <label class="form-label">Role</label>
              <select id="usr-role" class="form-control">
                <option value="admin" ${user.role === 'admin' ? 'selected' : ''}>Admin (Full Access)</option>
                <option value="manager" ${user.role === 'manager' ? 'selected' : ''}>Manager (Sales, Purchases, Inventory, Reports)</option>
                <option value="cashier" ${user.role === 'cashier' ? 'selected' : ''}>Cashier (POS & Sales Only)</option>
              </select>
            </div>
            <div class="form-group">
              <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                <input type="checkbox" id="usr-active" ${user.active !== false ? 'checked' : ''}>
                <span>Account Active</span>
              </label>
            </div>
            <div class="modal-footer" style="padding:16px 0 0;margin:0;">
              <button type="button" class="btn btn-outline" onclick="Modal.close()">Cancel</button>
              <button type="submit" class="btn btn-primary">Save User</button>
            </div>
          </form>
        </div>
      </div>
    `);

document.getElementById('user-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const updated = {
        id: id || DB.genId(),
        name: document.getElementById('usr-name').value.trim(),
        username: document.getElementById('usr-uname').value.trim(),
        password: document.getElementById('usr-pwd').value,
        role: document.getElementById('usr-role').value,
        active: document.getElementById('usr-active').checked,
      };
      DB.saveUser(updated);
      Modal.close();
      Toast.success('User account saved');
      this.renderUsersSettings(document.getElementById('settings-view'));
    });
  },

deleteUser(id) {
    confirmDialog('Are you sure you want to delete this user?', () => {
      DB.deleteUser(id);
      Toast.info('User removed');
      this.renderUsersSettings(document.getElementById('settings-view'));
    });
  },

renderBackupSettings(container) {
    const st = API.status;
    container.innerHTML = `
      <div style="display:flex;flex-direction:column;gap:20px;max-width:800px;">

<div class="card">
          <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
            <h3 class="card-title" style="display:flex;align-items:center;gap:8px;">
              ${Icons.dashboard || ''} MySQL Database Connection
            </h3>
            <span id="db-status-pill" style="padding:4px 12px;border-radius:20px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;${st.connected ? 'background:#e8f5e9;color:#2e7d32;border:1px solid #c8e6c9;' : 'background:#fff3e0;color:#e65100;border:1px solid #ffe0b2;'}">
              <span style="width:8px;height:8px;border-radius:50%;background:currentColor;"></span>
              ${st.connected ? 'Connected to MySQL' : 'Operating in Local Offline Cache Mode'}
            </span>
          </div>
          <div class="card-body">
            <div style="font-size:13px;color:var(--gray-700);line-height:1.6;margin-bottom:14px;">
              ${st.connected 
                ? `<strong>Active Live Connection:</strong> Database <code>${st.database || 'bike_parts_db'}</code> on <code>${st.host || 'localhost'}</code>. All products, sales, purchases, and payments are automatically written to MySQL.`
                : `<strong>Database Status Note:</strong> MySQL database is currently disconnected or offline. The application is running in <strong>Local Offline Cache Mode</strong> so all your operations remain safe in your local browser storage. To connect to MySQL, ensure MySQL server (e.g., XAMPP, Docker, or MySQL Windows Service) is running, and verify credentials in <code>.env</code>.`}
            </div>
            ${st.error ? `
              <div style="background:#fff3f3;color:#c53030;padding:10px 14px;border-radius:6px;font-size:12px;margin-bottom:14px;border:1px solid #feb2b2;">
                <strong>Connection Error:</strong> ${st.error} (${st.code || 'Check MySQL Port 3306'})
              </div>
            ` : ''}
            <div style="display:flex;gap:10px;flex-wrap:wrap;">
              <button class="btn btn-outline btn-sm" id="test-db-btn">
                Test Connection & Sync to MySQL
              </button>
            </div>
          </div>
        </div>

<div class="card">
          <div class="card-header">
            <h3 class="card-title">Data Backup & Restore</h3>
          </div>
          <div class="card-body">
            <p style="color:var(--gray-600);font-size:14px;margin-bottom:20px;">
              All system data (inventory, sales, purchases, customers, suppliers, and ledger records) is safely preserved. You can download an offline JSON backup or restore from a previously exported file.
            </p>

<div style="display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px;">
              <button class="btn btn-primary" id="export-backup-btn">
                ${Icons.download} Download Complete Backup
              </button>
              <label class="btn btn-outline" style="cursor:pointer;margin:0;">
                ${Icons.plus} Restore From File
                <input type="file" id="import-backup-input" accept=".json" style="display:none;">
              </label>
            </div>

<div style="background:#fff5f5;border:1px solid #fed7d7;border-radius:8px;padding:20px;margin-bottom:24px;">
              <h4 style="color:#c53030;margin-bottom:6px;display:flex;align-items:center;gap:8px;">
                ${Icons.alert || '⚠️'} Wipe All Data From Database (Keep Admin User)
              </h4>
              <p style="font-size:13px;color:#742a2a;line-height:1.5;margin-bottom:16px;">
                This will permanently delete all sales invoices, purchases, returns, products, stock movements, customers, suppliers, expenses, payments, and non-admin users from the database. <strong>Only the primary Admin user account will be kept.</strong>
              </p>
              <button class="btn btn-danger" id="wipe-db-except-admin-btn" style="background:#dc2626;color:#ffffff;font-weight:600;padding:10px 20px;border-radius:6px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;">
                ${Icons.trash} Remove All Data From Database Except Admin
              </button>
            </div>

<div>
              <h4 style="color:var(--gray-800);margin-bottom:8px;font-size:14px;">Reset to Demo Sample Data</h4>
              <p style="font-size:13px;color:var(--gray-600);margin-bottom:12px;">
                Restore sample demo products, customers, and test records.
              </p>
              <button class="btn btn-outline btn-sm" id="reset-sample-btn" style="color:var(--danger);border-color:var(--danger);">
                Reset to Sample Demo Data
              </button>
            </div>
          </div>
        </div>

</div>
    `;

// Test DB & Sync button
    const testBtn = document.getElementById('test-db-btn');
    if (testBtn) {
      testBtn.addEventListener('click', async () => {
        testBtn.textContent = 'Testing connection...';
        testBtn.disabled = true;
        const status = await DB.syncWithDatabase();
        if (status.connected) {
          Toast.success('Connected to MySQL database and synchronized!');
        } else {
          Toast.warning('MySQL is not responding: ' + (status.error || 'Connection refused'));
        }
        SettingsPage.renderBackupSettings(container);
      });
    }

// Export
    document.getElementById('export-backup-btn').addEventListener('click', () => {
      const keys = ['settings','users','categories','brands','bike_models','products','stock_movements','customers','suppliers','ledger','sales','sale_items','returns','return_items','purchases','purchase_items','payments','expenses','expense_categories'];
      const data = {};
      keys.forEach(k => {
        data[k] = DB.get(k);
      });
      data.settings = DB.getSettings();

const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `bike_parts_backup_${fmt.today()}.json`;
      a.click();
      URL.revokeObjectURL(url);
      Toast.success('Backup file generated and downloaded!');
    });

// Import
    document.getElementById('import-backup-input').addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file) return;

// WIPE ALL EXCEPT ADMIN
    document.getElementById('wipe-db-except-admin-btn').addEventListener('click', () => {
      confirmDialog(
        '⚠️ CRITICAL WARNING:\n\nAre you sure you want to remove ALL data from the database?\n\n• All Sales, Purchases, Returns & Payments will be removed\n• All Products, Customers, Suppliers & Expenses will be removed\n• All non-admin users will be removed\n\nONLY THE ADMIN USER WILL REMAIN.\n\nProceed with removing all data?',
        async () => {
          const wipeBtn = document.getElementById('wipe-db-except-admin-btn');
          if (wipeBtn) {
            wipeBtn.disabled = true;
            wipeBtn.textContent = 'Removing all data from database...';
          }
          try {
            const res = await DB.wipeAllExceptAdmin();
            if (res && res.ok === false && !res.offline) {
              Toast.error('Database wipe error: ' + (res.error || 'Failed'));
              if (wipeBtn) {
                wipeBtn.disabled = false;
                wipeBtn.textContent = 'Remove All Data From Database Except Admin';
              }
            } else {
              Toast.success('All data removed from database! Admin user preserved.');
              setTimeout(() => {
                window.location.reload();
              }, 1200);
            }
          } catch (err) {
            Toast.error('Error during wipe: ' + err.message);
            if (wipeBtn) {
              wipeBtn.disabled = false;
              wipeBtn.textContent = 'Remove All Data From Database Except Admin';
            }
          }
        },
        'Yes, Remove All Data',
        'danger'
      );
    });

// Reset to demo
    document.getElementById('reset-sample-btn').addEventListener('click', () => {
      confirmDialog('This will clear your current local data and re-seed with sample demo data. Proceed?', () => {
        localStorage.clear();
        DB.seed();
        Toast.success('Database reset to sample demo data!');
        setTimeout(() => window.location.reload(), 1000);
      });
    });
  }
};

0xn0l - 0011000001111000011011100011000001101100