wms-app/app/revenue/quotation.php

<?php
  session_start();
  require '../config.php';
  require '../include_header.php';
?>

<body>
  <?php require '../include_topbar.php'; ?>
  <?php require '../include_sidebar_ac.php'; ?>

  <main id="content" class="content py-15">
    <div class="container-fluid">

      <!-- Page header -->
      <div class="row">
        <div class="col-12">
          <div class="mb-6 d-flex justify-content-between align-items-center">
            <div>
              <h1 class="fs-3 mb-1">Quotations</h1>
              <p class="mb-0 text-muted">Sales quotations sent to customers</p>
            </div>
            <a href="<?php echo $server_url?>revenue/manage_quotation.php" class="btn btn-primary">
              <i class="ti ti-plus me-1"></i>New Quotation
            </a>
          </div>
        </div>
      </div>

      <!-- Stat cards -->
      <div class="row g-5 mb-5">
        <div class="col-lg-3 col-sm-6 col-12">
          <div class="card p-4">
            <div class="d-flex align-items-center gap-3">
              <div class="icon-shape icon-md bg-primary bg-opacity-10 text-primary rounded-2">
                <i class="ti ti-file-description fs-4"></i>
              </div>
              <div>
                <p class="mb-0 text-muted small">Total</p>
                <h3 class="fw-bold mb-0" id="stat_total">—</h3>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-12">
          <div class="card p-4">
            <div class="d-flex align-items-center gap-3">
              <div class="icon-shape icon-md bg-warning bg-opacity-10 text-warning rounded-2">
                <i class="ti ti-pencil fs-4"></i>
              </div>
              <div>
                <p class="mb-0 text-muted small">Draft</p>
                <h3 class="fw-bold mb-0" id="stat_draft">—</h3>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-12">
          <div class="card p-4">
            <div class="d-flex align-items-center gap-3">
              <div class="icon-shape icon-md bg-info bg-opacity-10 text-info rounded-2">
                <i class="ti ti-send fs-4"></i>
              </div>
              <div>
                <p class="mb-0 text-muted small">Sent</p>
                <h3 class="fw-bold mb-0" id="stat_sent">—</h3>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-3 col-sm-6 col-12">
          <div class="card p-4">
            <div class="d-flex align-items-center gap-3">
              <div class="icon-shape icon-md bg-success bg-opacity-10 text-success rounded-2">
                <i class="ti ti-circle-check fs-4"></i>
              </div>
              <div>
                <p class="mb-0 text-muted small">Accepted</p>
                <h3 class="fw-bold mb-0" id="stat_accepted">—</h3>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Filter + Table -->
      <div class="row g-5">

        <div class="col-12">
          <div class="card">
            <div class="card-body p-4">
              <div class="row g-3 align-items-end">
                <div class="col-lg-4">
                  <div class="position-relative">
                    <input type="text" id="search_input" class="form-control ps-9"
                      placeholder="Search quotation number or contact...">
                    <span class="position-absolute top-25 ms-4">
                      <i class="ti ti-search text-muted"></i>
                    </span>
                  </div>
                </div>
                <div class="col-lg-2">
                  <select id="filter_status" class="form-select">
                    <option value="">All Status</option>
                    <option value="0">Draft</option>
                    <option value="1">Sent</option>
                    <option value="2">Accepted</option>
                    <option value="3">Rejected</option>
                    <option value="5">Converted</option>
                    <option value="-1">Cancelled</option>
                  </select>
                </div>
                <div class="col-lg-2">
                  <select id="filter_dept" class="form-select">
                    <option value="">All Departments</option>
                  </select>
                </div>
                <div class="col-lg-2">
                  <button class="btn btn-secondary w-100" onclick="retrieve_quotations()">
                    <i class="ti ti-search me-1"></i>Search
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-12">
          <div class="card">
            <div class="card-body p-5">
              <div class="table-responsive">
                <table class="table table-hover mb-0 table-centered" id="quotation_list">
                  <thead class="table-primary border-light">
                    <tr>
                      <th>Quotation #</th>
                      <th>Date</th>
                      <th>Valid Until</th>
                      <th>Contact</th>
                      <th>Department</th>
                      <th>Items</th>
                      <th>Grand Total</th>
                      <th>Status</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                  <tfoot></tfoot>
                </table>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </main>

  <?php require '../include_ending.php'; ?>

  <script>

  const can_delete = ['admin', 'owner'].includes(user_role);

  var status_badge = {
    '-1': '<span class="badge bg-secondary">Cancelled</span>',
     '0': '<span class="badge bg-warning text-dark">Draft</span>',
     '1': '<span class="badge bg-info text-white">Sent</span>',
     '2': '<span class="badge bg-success">Accepted</span>',
     '3': '<span class="badge bg-danger">Rejected</span>',
     '5': '<span class="badge bg-primary">Converted</span>',
  };

  function retrieve_quotations() {
    return ajax_request({
      url: '<?php echo $server_url?>revenue/api/engine/retrieve_quotation.php',
      autoPrepare: true,
      checkRequired: 0,
      action: 'read',
      onSuccess: function(res) {
        var all = res.output || [];

        var keyword    = $('#search_input').val().toLowerCase();
        var fil_status = $('#filter_status').val();
        var fil_dept   = $('#filter_dept').val();

        var data = all.filter(function(q) {
          var match_kw   = !keyword ||
            (q.quotation_number || '').toLowerCase().includes(keyword) ||
            (q.contact_name     || '').toLowerCase().includes(keyword);
          var match_st   = fil_status === '' || String(q.status)        === fil_status;
          var match_dept = !fil_dept         || String(q.department_id) === fil_dept;
          return match_kw && match_st && match_dept;
        });

        // Stats from full list (unfiltered)
        $('#stat_total').text(all.length);
        $('#stat_draft').text(all.filter(q => String(q.status) === '0').length);
        $('#stat_sent').text(all.filter(q => String(q.status) === '1').length);
        $('#stat_accepted').text(all.filter(q => String(q.status) === '2').length);

        alasql('CREATE TABLE IF NOT EXISTS quotation_list');
        alasql.tables.quotation_list.data = data;
        var page = generate_pagination('quotation_list', data.length);
        $('table#quotation_list tfoot').html(page);
        if (typeof change_page_quotation_list === 'function') change_page_quotation_list(1);
      }
    });
  }

  function change_page_quotation_list(page_num) {
    var offset    = (page_num - 1) * prop_limit;
    var page_data = alasql(`SELECT * FROM quotation_list LIMIT ${prop_limit} OFFSET ${offset}`);
    var body      = '';

    $.each(page_data, function(i, q) {
      var item_count = parseInt(q.item_count) || 0;
      body += `<tr>
        <td class="py-3 fw-semibold">${escape_html(q.quotation_number)}</td>
        <td class="py-3">${format_date(q.quotation_date)}</td>
        <td class="py-3">${q.valid_until ? format_date(q.valid_until) : '<span class="text-muted">—</span>'}</td>
        <td class="py-3">${escape_html(q.contact_name || '—')}</td>
        <td class="py-3">${get_dept_label(q.department_id)}</td>
        <td class="py-3">${item_count} item${item_count !== 1 ? 's' : ''}</td>
        <td class="py-3 fw-semibold">${format_number(q.grand_total, 2)}</td>
        <td class="py-3">${status_badge[String(q.status)] || q.status}</td>
        <td class="py-3">
          <a href="<?php echo $server_url?>revenue/manage_quotation.php?id=${q.id}" title="View">
            <i class="ti ti-eye fs-5"></i>
          </a>
          ${can_delete ? `<a href="javascript:void(0);" class="link-danger ms-2" title="Delete" onclick="delete_quotation(${q.id})"><i class="ti ti-trash fs-5"></i></a>` : ''}
        </td>
      </tr>`;
    });

    $('table#quotation_list tbody').html(body);
  }

  function delete_quotation(id) {
    bootbox.confirm({
      message: 'Delete this quotation? This cannot be undone.',
      buttons: { confirm: { label: 'Delete', className: 'btn-danger' }, cancel: { label: 'Back', className: 'btn-secondary' } },
      callback: function(result) {
        if (!result) return;
        ajax_request({
          url: '<?php echo $server_url?>revenue/api/engine/delete_quotation.php',
          autoPrepare: false,
          checkRequired: 0,
          action: 'delete',
          data: { id: id },
          onSuccess: function() { retrieve_quotations(); }
        });
      }
    });
  }

  $(async function() {
    await load_dept_cache();
    populate_dept_filter('filter_dept');
    retrieve_quotations();
    $('#search_input').on('keyup', function(e) {
      if (e.key === 'Enter') retrieve_quotations();
    });
    $('#filter_status, #filter_dept').on('change', retrieve_quotations);
  });

  </script>

</body>
</html>