0xn0l

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

✎ EDIT: dashboard.js ← BACK

// =============================================
// DASHBOARD PAGE WITH COLORFUL WIDGETS & CHARTS
// =============================================
const DashboardPage = {
  salesChartInstance: null,
  catChartInstance: null,

render(container) {
    const stats = DB.getDashboardStats();
    const s = DB.getSettings();

container.innerHTML = `
      
      <div class="module-stats-grid" style="grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));">
        <div class="widget-card green">
          <div class="widget-content">
            <span class="widget-label">Today's Sales</span>
            <div class="widget-value" style="color:var(--success);">${fmt.currency(stats.todaySales)}</div>
            <span class="widget-sub">${fmt.date(fmt.today())}</span>
          </div>
          <div class="widget-icon">${Icons.sales}</div>
        </div>

<div class="widget-card blue">
          <div class="widget-content">
            <span class="widget-label">Today's Purchases</span>
            <div class="widget-value" style="color:var(--primary);">${fmt.currency(stats.todayPurchases)}</div>
            <span class="widget-sub">Stock Received</span>
          </div>
          <div class="widget-icon">${Icons.purchases}</div>
        </div>

<div class="widget-card amber">
          <div class="widget-content">
            <span class="widget-label">Today's Expenses</span>
            <div class="widget-value" style="color:var(--warning);">${fmt.currency(stats.todayExpenses)}</div>
            <span class="widget-sub">Operating Costs</span>
          </div>
          <div class="widget-icon">${Icons.expenses}</div>
        </div>

<div class="widget-card purple">
          <div class="widget-content">
            <span class="widget-label">Today's Net Profit</span>
            <div class="widget-value" style="color:${stats.netProfit >= 0 ? 'var(--success)' : 'var(--danger)'};">${fmt.currency(stats.netProfit)}</div>
            <span class="widget-sub">After COGS & Expenses</span>
          </div>
          <div class="widget-icon">${Icons.reports}</div>
        </div>

<div class="widget-card rose">
          <div class="widget-content">
            <span class="widget-label">Customer Receivables</span>
            <div class="widget-value" style="color:var(--danger);">${fmt.currency(stats.receivables)}</div>
            <span class="widget-sub">Total Owed by Customers</span>
          </div>
          <div class="widget-icon">${Icons.customers}</div>
        </div>

<div class="widget-card amber">
          <div class="widget-content">
            <span class="widget-label">Supplier Payables</span>
            <div class="widget-value" style="color:var(--warning);">${fmt.currency(stats.payables)}</div>
            <span class="widget-sub">Total Debt to Suppliers</span>
          </div>
          <div class="widget-icon">${Icons.suppliers}</div>
        </div>

<div class="widget-card cyan">
          <div class="widget-content">
            <span class="widget-label">Total Products</span>
            <div class="widget-value" style="color:var(--info);">${stats.totalProducts}</div>
            <span class="widget-sub">Active Catalog Items</span>
          </div>
          <div class="widget-icon">${Icons.products}</div>
        </div>

<div class="widget-card ${stats.lowStock > 0 ? 'rose' : 'green'}">
          <div class="widget-content">
            <span class="widget-label">Low Stock Alert</span>
            <div class="widget-value" style="color:${stats.lowStock > 0 ? 'var(--danger)' : 'var(--success)'};">${stats.lowStock} Items</div>
            <span class="widget-sub">${stats.lowStock > 0 ? 'Needs Urgent Reorder' : 'All Levels Healthy'}</span>
          </div>
          <div class="widget-icon">${Icons.alert}</div>
        </div>
      </div>

<div class="charts-grid">
        <div class="chart-card">
          <div class="chart-header">
            <div>
              <div class="chart-title">7-Day Sales & Purchases Trend</div>
              <div style="font-size:12px;color:var(--gray-500);margin-top:2px;">Comparing daily revenue inflow vs inventory restocking outflow</div>
            </div>
            <div class="chart-legend">
              <div class="legend-item"><span class="legend-dot" style="background:#2563eb;"></span> Sales</div>
              <div class="legend-item"><span class="legend-dot" style="background:#f59e0b;"></span> Purchases</div>
            </div>
          </div>
          <div class="chart-canvas-wrapper" id="sales-chart-container">
            <canvas id="salesTrendsChart"></canvas>
          </div>
        </div>

<div class="chart-card">
          <div class="chart-header">
            <div>
              <div class="chart-title">Sales Channel Breakdown</div>
              <div style="font-size:12px;color:var(--gray-500);margin-top:2px;">Retail (B2C) vs Wholesale (B2B) volume</div>
            </div>
          </div>
          <div class="chart-canvas-wrapper" id="type-chart-container" style="display:flex;align-items:center;justify-content:center;">
            <canvas id="salesTypeChart" style="max-height:190px;"></canvas>
          </div>
        </div>
      </div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
        <div class="card">
          <div class="card-header">
            <span class="card-title">Quick Operational Actions</span>
          </div>
          <div class="card-body">
            <div class="quick-actions">
              <button class="quick-action-btn" onclick="App.navigate('sales','new')">
                ${Icons.plus}<span>New POS Sale</span>
              </button>
              <button class="quick-action-btn" onclick="App.navigate('purchases','new')">
                ${Icons.purchases}<span>New Purchase</span>
              </button>
              <button class="quick-action-btn" onclick="ProductsPage.openAddModal()">
                ${Icons.products}<span>Add Product</span>
              </button>
              <button class="quick-action-btn" onclick="App.navigate('payments')">
                ${Icons.payments}<span>Receive Payment</span>
              </button>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
            <span class="card-title">Low Stock Alert List</span>
            <span class="badge ${stats.lowStock > 0 ? 'badge-danger' : 'badge-success'}">${stats.lowStock} Items</span>
          </div>
          <div class="card-body" style="padding:0">
            ${stats.lowStockProducts.length === 0 ? `<div class="empty-state" style="padding:24px"><p>All products are well stocked</p></div>` : `
            <div class="table-wrapper">
              <table>
                <thead><tr><th>Product</th><th class="text-right">Stock</th><th class="text-right">Min</th></tr></thead>
                <tbody>
                  ${stats.lowStockProducts.map(p => `
                    <tr>
                      <td><span style="font-weight:500">${p.name}</span><br><span style="font-size:11px;color:var(--gray-400)">${p.sku||''}</span></td>
                      <td class="text-right"><span class="badge ${p.stock === 0 ? 'badge-danger' : 'badge-warning'}">${p.stock}</span></td>
                      <td class="text-right" style="color:var(--gray-500)">${p.minStock||0}</td>
                    </tr>
                  `).join('')}
                </tbody>
              </table>
            </div>`}
          </div>
        </div>
      </div>

<div class="card">
        <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
          <span class="card-title">Recent Invoices</span>
          <button class="btn btn-outline btn-sm" onclick="App.navigate('sales')">View All Invoices</button>
        </div>
        <div class="table-wrapper">
          <table>
            <thead><tr><th>Invoice</th><th>Customer</th><th>Type</th><th class="text-right">Amount</th><th class="text-right">Paid</th><th class="text-right">Balance</th><th>Date</th><th>Status</th></tr></thead>
            <tbody>
              ${stats.recentSales.length === 0 ? `<tr><td colspan="8" style="text-align:center;color:var(--gray-400);padding:24px">No sales yet</td></tr>` :
              stats.recentSales.slice(0,10).map(sale => {
                const bal = (sale.total||0) - (sale.paidAmount||0);
                return `<tr>
                  <td><a href="#" onclick="SalesPage.viewSale('${sale.id}');return false" style="color:var(--primary);font-weight:500">${sale.invoiceNo}</a></td>
                  <td>${sale.customerName||'-'}</td>
                  <td><span class="badge ${sale.type==='wholesale'?'badge-warning':'badge-primary'}">${sale.type||'retail'}</span></td>
                  <td class="text-right">${fmt.currency(sale.total)}</td>
                  <td class="text-right" style="color:var(--success)">${fmt.currency(sale.paidAmount)}</td>
                  <td class="text-right" style="color:${bal>0?'var(--danger)':'var(--success)'}">${fmt.currency(bal)}</td>
                  <td>${fmt.date(sale.date)}</td>
                  <td><span class="badge ${sale.status==='void'?'badge-danger':'badge-success'}">${sale.status||'completed'}</span></td>
                </tr>`;
              }).join('')}
            </tbody>
          </table>
        </div>
      </div>
    `;

// Render the Graphs
    this.renderCharts();
  },

renderCharts() {
    // Generate last 7 days dates
    const days = [];
    const salesData = [];
    const purchasesData = [];
    const now = new Date();

const allSales = DB.get('sales').filter(s => s.status !== 'void');
    const allPurchases = DB.get('purchases').filter(p => p.status !== 'void');

for (let i = 6; i >= 0; i--) {
      const d = new Date(now);
      d.setDate(d.getDate() - i);
      const dStr = d.toISOString().split('T')[0];
      const dayLabel = d.toLocaleDateString('en-PK', { weekday: 'short', month: 'short', day: 'numeric' });
      days.push(dayLabel);

const daySales = allSales.filter(s => s.date === dStr).reduce((sum, s) => sum + (s.total || 0), 0);
      const dayPurchases = allPurchases.filter(p => p.date === dStr).reduce((sum, p) => sum + (p.total || 0), 0);

salesData.push(daySales);
      purchasesData.push(dayPurchases);
    }

// Channel Breakdown (Retail vs Wholesale)
    let retailTotal = 0;
    let wholesaleTotal = 0;
    allSales.forEach(s => {
      if (s.type === 'wholesale') wholesaleTotal += (s.total || 0);
      else retailTotal += (s.total || 0);
    });

if (retailTotal === 0 && wholesaleTotal === 0) {
      retailTotal = 1; // dummy placeholder to show nice proportion
    }

// Check if Chart.js is loaded
    if (typeof Chart !== 'undefined') {
      const canvasSales = document.getElementById('salesTrendsChart');
      if (canvasSales) {
        if (this.salesChartInstance) this.salesChartInstance.destroy();
        const ctx = canvasSales.getContext('2d');
        this.salesChartInstance = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: days,
            datasets: [
              {
                label: 'Sales (Rs.)',
                data: salesData,
                backgroundColor: 'rgba(37, 99, 235, 0.85)',
                borderRadius: 4,
                borderSkipped: false,
              },
              {
                label: 'Purchases (Rs.)',
                data: purchasesData,
                backgroundColor: 'rgba(245, 158, 11, 0.85)',
                borderRadius: 4,
                borderSkipped: false,
              }
            ]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: { display: false },
              tooltip: {
                callbacks: {
                  label: (ctx) => ` ${ctx.dataset.label}: ${fmt.currency(ctx.parsed.y)}`
                }
              }
            },
            scales: {
              x: {
                grid: { display: false },
                ticks: { font: { size: 11 } }
              },
              y: {
                beginAtZero: true,
                grid: { color: 'rgba(0,0,0,0.05)' },
                ticks: {
                  font: { size: 11 },
                  callback: (val) => 'Rs.' + (val >= 1000 ? (val/1000).toFixed(0) + 'k' : val)
                }
              }
            }
          }
        });
      }

renderSvgFallback(days, sales, purchases, retail, wholesale) {
    const container = document.getElementById('sales-chart-container');
    if (!container) return;

const maxVal = Math.max(...sales, ...purchases, 1000);
    const svgWidth = 500;
    const svgHeight = 200;
    const padX = 40;
    const padY = 20;
    const barW = 16;
    const gap = (svgWidth - padX * 2) / days.length;

let bars = '';
    days.forEach((day, i) => {
      const x = padX + i * gap;
      const sH = (sales[i] / maxVal) * (svgHeight - padY * 2);
      const pH = (purchases[i] / maxVal) * (svgHeight - padY * 2);
      const sY = svgHeight - padY - sH;
      const pY = svgHeight - padY - pH;

bars += `
        <rect x="${x}" y="${sY}" width="${barW}" height="${sH}" rx="3" fill="#2563eb"><title>${day} Sales: ${fmt.currency(sales[i])}</title></rect>
        <rect x="${x + barW + 2}" y="${pY}" width="${barW}" height="${pH}" rx="3" fill="#f59e0b"><title>${day} Purchases: ${fmt.currency(purchases[i])}</title></rect>
        <text x="${x + barW}" y="${svgHeight - 4}" font-size="9" text-anchor="middle" fill="#6b7280">${day.split(' ')[0]}</text>
      `;
    });

container.innerHTML = `
      <svg viewBox="0 0 ${svgWidth} ${svgHeight}" style="width:100%;height:100%;">
        <line x1="${padX}" y1="${svgHeight - padY}" x2="${svgWidth - 10}" y2="${svgHeight - padY}" stroke="#e5e7eb" stroke-width="1"/>
        ${bars}
      </svg>
    `;

0xn0l - 0011000001111000011011100011000001101100