
­­­­­­­­­­­­­­­­­­
<!DOCTYPE html>
<html>
<?php
function dash_range_select(array $config, string $range): void { ?>
  <form method="get" action="<?= e(base_url($config,'/index.php')) ?>" class="d-flex gap-2 flex-wrap">
    <input type="hidden" name="r" value="dashboard/index">
    <select class="form-select" name="range" style="min-width:200px;">
      <?php foreach (['today'=>'Today','yesterday'=>'Yesterday','this_week'=>'This Week','this_month'=>'This Month','prev_month'=>'Previous Month'] as $v=>$lbl): ?>
        <option value="<?= e($v) ?>" <?= ($range===$v?'selected':'') ?>><?= e($lbl) ?></option>
      <?php endforeach; ?>
    </select>
    <button class="btn btn-outline-primary">Apply</button>
  </form>
<?php }

function chart_js(string $id, string $type, array $rows, string $label = 'Count'): void {
  $json = json_encode($rows, JSON_UNESCAPED_UNICODE);
  ?>
  <script>
  (function(){
    const rows = <?= $json ?> || [];
    const ctx = document.getElementById(<?= json_encode($id) ?>);
    if(!ctx) return;
    new Chart(ctx, {
      type: <?= json_encode($type) ?>,
      data: {
        labels: rows.map(x => x.label),
        datasets: [{ label: <?= json_encode($label) ?>, data: rows.map(x => Number(x.val ?? x.v ?? 0)) }]
      },
      options: { responsive: true, maintainAspectRatio: false }
    });
  })();
  </script>
<?php }
?>
