cms.techvanguard.vn/views/admin/submissions/index.ejs

<div class="container my-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="h3 mb-0" style="color: var(--primary-dark)"><%= title %></h1>
      <p class="text-muted mb-0"><%= subtitle %></p>
    </div>
  </div>

  <div class="card border-0 shadow-sm">
    <div class="card-header bg-white border-bottom">
      <ul class="nav nav-tabs card-header-tabs" role="tablist">
        <% sources.forEach((source) => { %>
          <li class="nav-item" role="presentation">
            <button
              class="nav-link <%= activeSource === source ? 'active' : '' %>"
              type="button"
              role="tab"
              data-submission-tab="<%= source %>"
            >
              <%= sourceLabels[source] %>
              <small class="text-muted">(<%= sourceUrls[source] %>)</small>
            </button>
          </li>
        <% }) %>
      </ul>
    </div>

    <div class="card-body">
      <div class="row g-3 align-items-end mb-4">
        <div class="col-md-3">
          <label class="form-label small text-muted">Search</label>
          <input type="search" class="form-control" id="submissionSearch" placeholder="Name, email, phone">
        </div>
        <div class="col-md-2">
          <label class="form-label small text-muted">Status</label>
          <select class="form-select" id="submissionStatus">
            <option value="">All statuses</option>
            <% statuses.forEach((status) => { %>
              <option value="<%= status %>"><%= status.replace("_", " ") %></option>
            <% }) %>
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label small text-muted">Start Date</label>
          <input type="date" class="form-control" id="submissionStartDate">
        </div>
        <div class="col-md-2">
          <label class="form-label small text-muted">End Date</label>
          <input type="date" class="form-control" id="submissionEndDate">
        </div>
        <div class="col-md-1">
          <label class="form-label small text-muted">Show</label>
          <select class="form-select" id="submissionPageSize">
            <option value="10">10</option>
            <option value="20" selected>20</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
        </div>
        <div class="col-md-2 d-flex gap-2">
          <button type="button" class="btn btn-primary flex-fill" id="submissionApplyFilters">
            <i class="fas fa-filter me-1"></i>Filter
          </button>
          <button type="button" class="btn btn-outline-secondary" id="submissionClearFilters">
            Clear
          </button>
        </div>
      </div>

      <div class="table-responsive">
        <table class="table table-hover align-middle">
          <thead class="table-light">
            <tr>
              <th>Date</th>
              <th data-submission-name-column>Name</th>
              <th data-submission-email-column>Email</th>
              <th data-submission-phone-column>Phone</th>
              <th>Status</th>
              <th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody id="submissionRows">
            <tr>
              <td colspan="6" class="text-center text-muted py-5">Loading submissions...</td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="d-flex justify-content-between align-items-center mt-3">
        <small class="text-muted" id="submissionPaginationSummary"></small>
        <div class="btn-group">
          <button type="button" class="btn btn-outline-secondary btn-sm" id="submissionPrevPage">Previous</button>
          <button type="button" class="btn btn-outline-secondary btn-sm" id="submissionNextPage">Next</button>
        </div>
      </div>
    </div>
  </div>
</div>

<%- include("partials/submission-modal", { statuses }) %>

<script type="application/json" id="submissionManagerConfigJson"><%- JSON.stringify({
  sources,
  statuses,
  statusesBySource: {
    newsletter: newsletterStatuses,
  },
  initialSource: activeSource,
  urlTabParam: true,
  hiddenFieldsBySource: {
    partnership: {
      email: true,
      phone: true,
    },
    newsletter: {
      name: true,
      phone: true,
    },
  },
  apiBySource: {
    newsletter: {
      list: "/admin/newsletter-subscriptions/data",
      detail: "/admin/newsletter-subscriptions",
      update: "/admin/newsletter-subscriptions",
    },
  },
  itemLabelBySource: {
    newsletter: "subscriptions",
  },
}) %></script>
<script>
  window.submissionManagerConfig = JSON.parse(
    document.getElementById("submissionManagerConfigJson").textContent || "{}",
  );
</script>
<%- include("partials/submission-manager-script") %>