22

✏️ Editing: marketing.php

<?php $view='dashboard/marketing.php'; ?>
<?php require __DIR__ . '/_shared.php'; ?>
<?php $k = $data['kpis'] ?? []; ?>

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <h4 class="mb-0">Marketing Dashboard</h4>
  <?php dash_range_select($config, $range); ?>
</div>

<div class="row g-2">
  <div class="col-6 col-lg-3"><div class="p-3 bg-light rounded">Leads<br><strong><?= (int)($k['leads_total'] ?? 0) ?></strong></div></div>
  <div class="col-6 col-lg-3"><div class="p-3 bg-light rounded">Qualified<br><strong><?= (int)($k['leads_qualified'] ?? 0) ?></strong></div></div>
  <div class="col-6 col-lg-3"><div class="p-3 bg-light rounded">Qualification %<br><strong><?= e($k['qualification_rate'] ?? 0) ?>%</strong></div></div>
  <div class="col-6 col-lg-3"><div class="p-3 bg-light rounded">Opportunities<br><strong><?= (int)($k['opp_total'] ?? 0) ?></strong></div></div>

<div class="col-6 col-lg-3"><div class="p-3 bg-light rounded">Won<br><strong><?= (int)($k['opp_won'] ?? 0) ?></strong></div></div>
  <div class="col-6 col-lg-3"><div class="p-3 bg-light rounded">Lost<br><strong><?= (int)($k['opp_lost'] ?? 0) ?></strong></div></div>
  <div class="col-6 col-lg-3"><div class="p-3 bg-light rounded">Win %<br><strong><?= e($k['win_rate'] ?? 0) ?>%</strong></div></div>
  <div class="col-6 col-lg-3"><div class="p-3 bg-light rounded">Disqualified<br><strong><?= (int)($k['leads_disqualified'] ?? 0) ?></strong></div></div>
</div>

<div class="row g-3 mt-1">
  
  <div class="col-12 col-lg-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h6>Funnel</h6>
        <div style="height:280px;"><canvas id="cFunnel"></canvas></div>
      </div>
    </div>
  </div>

<div class="col-12 col-lg-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h6>Leads by Source</h6>
        <div style="height:280px;"><canvas id="cSource"></canvas></div>
      </div>
    </div>
  </div>

<div class="col-12 col-lg-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h6>Salary Range</h6>
        <div style="height:280px;"><canvas id="cSalary"></canvas></div>
      </div>
    </div>
  </div>

<div class="col-12 col-lg-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h6>Preferred Time</h6>
        <div style="height:280px;"><canvas id="cPrefTime"></canvas></div>
      </div>
    </div>
  </div>

<div class="col-12 col-lg-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h6>Purchase Time</h6>
        <div style="height:280px;"><canvas id="cPurchaseTime"></canvas></div>
      </div>
    </div>
  </div>

<div class="col-12 col-lg-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h6>Obligation</h6>
        <div style="height:280px;"><canvas id="cObligation"></canvas></div>
      </div>
    </div>
  </div>
</div>

<div class="row g-3 mt-1">
  <div class="col-12 col-lg-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h6 class="mb-2">Qualification Rate by Source + Won Leads by Source</h6>
        <div class="table-responsive">
          <table class="table table-sm align-middle">
            <thead>
              <tr>
                <th>Source</th>
                <th class="text-end">Leads</th>
                <th class="text-end">Qualified</th>
                <th class="text-end">Q%</th>
                <th class="text-end">Won</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach (($data['table_source_perf'] ?? []) as $r): ?>
                <tr>
                  <td><?= e($r['source']) ?></td>
                  <td class="text-end"><?= (int)$r['leads'] ?></td>
                  <td class="text-end"><?= (int)$r['qualified'] ?></td>
                  <td class="text-end"><?= e($r['q_rate']) ?>%</td>
                  <td class="text-end"><?= (int)$r['won_opps'] ?></td>
                </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

<div class="col-12 col-lg-6">
    <div class="card shadow-sm">
      <div class="card-body">
        <h6 class="mb-2">Qualification Rate by Vehicle of Interest</h6>
        <div class="table-responsive">
          <table class="table table-sm align-middle">
            <thead>
              <tr>
                <th>Vehicle</th>
                <th class="text-end">Leads</th>
                <th class="text-end">Qualified</th>
                <th class="text-end">Q%</th>
              </tr>
            </thead>
            <tbody>
              <?php foreach (($data['table_vehicle_perf'] ?? []) as $r): ?>
                <tr>
                  <td><?= e($r['vehicle']) ?></td>
                  <td class="text-end"><?= (int)$r['leads'] ?></td>
                  <td class="text-end"><?= (int)$r['qualified'] ?></td>
                  <td class="text-end"><?= e($r['q_rate']) ?>%</td>
                </tr>
              <?php endforeach; ?>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
(function(){
  // Funnel chart (horizontal bar acts like funnel)
  const funnel = <?= json_encode($data['chart_funnel'] ?? [], JSON_UNESCAPED_UNICODE) ?> || [];
  const ctxF = document.getElementById('cFunnel');
  if (ctxF && typeof Chart !== 'undefined') {
    new Chart(ctxF, {
      type: 'bar',
      data: {
        labels: funnel.map(x=>x.label),
        datasets: [{ label: 'Count', data: funnel.map(x=>Number(x.val||0)) }]
      },
      options: {
        responsive:true,
        maintainAspectRatio:false,
        indexAxis: 'y',
        scales: { x: { beginAtZero:true } },
        plugins: { legend: { display:false } }
      }
    });
  }

// Pie charts
  function pie(canvasId, rows){
    const c = document.getElementById(canvasId);
    if(!c || typeof Chart === 'undefined') return;
    new Chart(c, {
      type:'pie',
      data:{
        labels: rows.map(x=>x.label),
        datasets:[{ data: rows.map(x=>Number(x.val||0)) }]
      },
      options:{ responsive:true, maintainAspectRatio:false }
    });
  }

pie('cSource', <?= json_encode($data['chart_source'] ?? [], JSON_UNESCAPED_UNICODE) ?> || []);
  pie('cSalary', <?= json_encode($data['chart_salary_range'] ?? [], JSON_UNESCAPED_UNICODE) ?> || []);
  pie('cPrefTime', <?= json_encode($data['chart_pref_time'] ?? [], JSON_UNESCAPED_UNICODE) ?> || []);
  pie('cPurchaseTime', <?= json_encode($data['chart_purchase_time'] ?? [], JSON_UNESCAPED_UNICODE) ?> || []);
  pie('cObligation', <?= json_encode($data['chart_obligation'] ?? [], JSON_UNESCAPED_UNICODE) ?> || []);
})();
</script>

MR SKB