wms-app/app/accounting/periods.php

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

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

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

      <!-- Page header -->
      <div class="row">
        <div class="col-12">
          <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
            <div>
              <h1 class="fs-3 mb-1">Accounting Periods</h1>
              <p class="mb-0">Open, close, and lock monthly accounting periods</p>
            </div>
            <div class="d-flex gap-2">
              <button class="btn btn-outline-primary" onclick="show_create_year_modal();">
                <i class="ti ti-calendar-plus me-1"></i>Generate Year
              </button>
              <button class="btn btn-primary" onclick="show_create_modal();">
                <i class="ti ti-plus me-1"></i>Add Period
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Stats -->
      <div class="row g-5 mb-5">
        <div class="col-xl-3 col-md-6 col-12">
          <div class="card">
            <div class="card-body p-6">
              <div class="d-flex align-items-start gap-3">
                <div class="icon-shape icon-lg bg-primary bg-opacity-10 text-primary rounded-2">
                  <i class="ti ti-calendar fs-4"></i>
                </div>
                <div><span>Total</span><h2 class="fw-bold mb-0" id="stat_total">—</h2></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-6 col-12">
          <div class="card">
            <div class="card-body p-6">
              <div class="d-flex align-items-start gap-3">
                <div class="icon-shape icon-lg bg-success bg-opacity-10 text-success rounded-2">
                  <i class="ti ti-lock-open fs-4"></i>
                </div>
                <div><span>Open</span><h2 class="fw-bold mb-0" id="stat_open">—</h2></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-6 col-12">
          <div class="card">
            <div class="card-body p-6">
              <div class="d-flex align-items-start gap-3">
                <div class="icon-shape icon-lg bg-warning bg-opacity-10 text-warning rounded-2">
                  <i class="ti ti-lock fs-4"></i>
                </div>
                <div><span>Closed</span><h2 class="fw-bold mb-0" id="stat_closed">—</h2></div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xl-3 col-md-6 col-12">
          <div class="card">
            <div class="card-body p-6">
              <div class="d-flex align-items-start gap-3">
                <div class="icon-shape icon-lg bg-danger bg-opacity-10 text-danger rounded-2">
                  <i class="ti ti-lock-filled fs-4"></i>
                </div>
                <div><span>Locked</span><h2 class="fw-bold mb-0" id="stat_locked">—</h2></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Table -->
      <div class="row">
        <div class="col-12">
          <div class="card overflow-hidden">
            <div class="card-body p-6">
              <div class="table-responsive">
                <table class="table mb-0 text-nowrap table-hover table-centered" id="period_table">
                  <thead class="table-primary border-light">
                    <tr>
                      <th>Period</th>
                      <th>Status</th>
                      <th>Closed At</th>
                      <th>Locked At</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </main>

  <!-- Add Single Period Modal -->
  <div class="modal fade" id="createPeriodModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:340px;">
      <div class="modal-content">
        <div class="modal-header">
          <h6 class="modal-title">Add Period</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <label class="form-label">Period (YYYY-MM)</label>
          <input type="month" class="form-control" id="new_period">
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" onclick="create_single();">Create</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Generate Year Modal -->
  <div class="modal fade" id="createYearModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" style="max-width:340px;">
      <div class="modal-content">
        <div class="modal-header">
          <h6 class="modal-title">Generate Year Periods</h6>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <label class="form-label">Year</label>
          <input type="number" class="form-control" id="new_year" value="<?php echo date('Y'); ?>" min="2000" max="2100">
          <div class="form-text">Creates all 12 months for the selected year (skips existing ones).</div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button class="btn btn-primary" onclick="create_year();">Generate</button>
        </div>
      </div>
    </div>
  </div>

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

  <script>
  var status_badge = {
    open:   '<span class="badge bg-success">Open</span>',
    closed: '<span class="badge bg-warning text-dark">Closed</span>',
    locked: '<span class="badge bg-danger">Locked</span>',
  };

  function retrieve_periods() {
    return ajax_request({
      url: '<?php echo $server_url?>accounting/api/engine/period.php',
      autoPrepare: true,
      checkRequired: 0,
      action: 'read',
      onSuccess: function(res) {
        var rows = res.output || [];
        if (rows.length === 0) {
          $('table#period_table tbody').html('<tr><td colspan="5" class="text-center py-5 text-muted">No periods yet. Use Generate Year to create them.</td></tr>');
          return;
        }
        var body = '';
        $.each(rows, function(i, item) {
          var actions = '';
          if (item.status === 'open') {
            actions = `<button class="btn btn-sm btn-outline-warning" onclick="do_action('close', ${item.id})">Close</button>`;
          } else if (item.status === 'closed') {
            actions = `<button class="btn btn-sm btn-outline-success me-1" onclick="do_action('open', ${item.id})">Reopen</button>
                       <button class="btn btn-sm btn-outline-danger" onclick="do_action('lock', ${item.id})">Lock</button>`;
          } else {
            actions = '<span class="text-muted small">Permanent</span>';
          }
          body += `<tr>
            <td class="py-3 fw-semibold">${escape_html(item.period)}</td>
            <td class="py-3">${status_badge[item.status] || item.status}</td>
            <td class="py-3 text-muted small">${item.closed_at || '—'}</td>
            <td class="py-3 text-muted small">${item.locked_at || '—'}</td>
            <td class="py-3">${actions}</td>
          </tr>`;
        });
        $('table#period_table tbody').html(body);
      }
    });
  }

  function do_action(action_type, id) {
    return ajax_request({
      url: '<?php echo $server_url?>accounting/api/engine/manage_period.php',
      autoPrepare: true,
      checkRequired: 0,
      action: 'manage',
      data: { action_type: action_type, id: id },
      onSuccess: function() {
        retrieve_periods();
        retrieve_stats();
      }
    });
  }

  function create_single() {
    var period = $('#new_period').val();
    if (!period) return;
    ajax_request({
      url: '<?php echo $server_url?>accounting/api/engine/manage_period.php',
      autoPrepare: true,
      checkRequired: 0,
      action: 'manage',
      data: { action_type: 'create_single', period: period },
      onSuccess: function() {
        $('#createPeriodModal').modal('hide');
        retrieve_periods();
        retrieve_stats();
      }
    });
  }

  function create_year() {
    var year = $('#new_year').val();
    if (!year) return;
    ajax_request({
      url: '<?php echo $server_url?>accounting/api/engine/manage_period.php',
      autoPrepare: true,
      checkRequired: 0,
      action: 'manage',
      data: { action_type: 'create_year', year: year },
      onSuccess: function() {
        $('#createYearModal').modal('hide');
        retrieve_periods();
        retrieve_stats();
      }
    });
  }

  function retrieve_stats() {
    return ajax_request({
      url: '<?php echo $server_url?>accounting/api/engine/period_stats.php',
      autoPrepare: true,
      checkRequired: 0,
      action: 'read',
      onSuccess: function(res) {
        $('#stat_total').text(res.total || 0);
        $('#stat_open').text(res.open_count || 0);
        $('#stat_closed').text(res.closed_count || 0);
        $('#stat_locked').text(res.locked_count || 0);
      }
    });
  }

  function show_create_modal()      { $('#new_period').val(''); $('#createPeriodModal').modal('show'); }
  function show_create_year_modal() { $('#createYearModal').modal('show'); }

  $(async function() {
    try {
      await retrieve_stats();
      await retrieve_periods();
    } catch(e) { console.log(e); }
  });
  </script>

</body>
</html>