Ticketsystem/public/admin.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Dashboard - Ticket System</title>
  <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
  <link rel="stylesheet" href="user.css" />
  <link rel="stylesheet" href="admin.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <h1><i class="fas fa-ticket-alt"></i> Admin Dashboard</h1>
      <div class="header-right">
        <button id="update-pfp-btn" class="btn-update-pfp small-btn">
          <i class="fas fa-camera"></i> Update Picture
        </button>
        <span>Welcome, Admin!</span>
        <img class="avatar" src="/assets/admin.jpg" alt="Admin Avatar">
        <a href="/">User View</a>
      </div>
    </header>

    <!-- Admin Profile Picture Modal -->
    <div id="update-pfp-modal" class="modal" style="display:none;">
      <div class="modal-content small-modal">
        <h2><i class="fas fa-camera"></i> Update Admin Picture</h2>
        <div id="drop-zone">
          <p>Drag & Drop your picture here<br>or click to select</p>
          <input type="file" id="pfp-file-input" accept="image/*" hidden>
        </div>
        <button id="upload-pfp-btn" class="btn-update-pfp" style="margin-top: 12px;">
          <i class="fas fa-upload"></i> Upload
        </button>
      </div>
    </div>

    <main class="main-content">
      <section class="admin-stats">
        <div class="stat-card">
          <div class="stat-value" id="total-tickets">0</div>
          <div class="stat-label">Total Tickets</div>
        </div>
        <div class="stat-card">
          <div class="stat-value" id="open-tickets">0</div>
          <div class="stat-label">Open Tickets</div>
        </div>
        <div class="stat-card">
          <div class="stat-value" id="in-progress-tickets">0</div>
          <div class="stat-label">In Progress</div>
        </div>
        <div class="stat-card">
          <div class="stat-value" id="closed-tickets">0</div>
          <div class="stat-label">Closed Tickets</div>
        </div>
        <div class="stat-card">
          <div class="stat-value" id="time-tickets">0</div>
          <div class="stat-label">Total Time</div>
        </div>
      </section>

      <section class="tickets-section">
        <div class="section-header">
          <h2><i class="fas fa-tasks"></i> All Tickets</h2>
          <div class="admin-filters">
            <input type="text" id="search-tickets" placeholder="Search tickets...">
            <select id="status-filter">
              <option value="all">All Statuses</option>
              <option value="Open">Open</option>
              <option value="In Progress">In Progress</option>
              <option value="On Hold">On Hold</option>
              <option value="Closed">Closed</option>
            </select>
            <select id="priority-filter">
              <option value="all">All Priorities</option>
              <option value="Low">Low</option>
              <option value="Medium">Medium</option>
              <option value="High">High</option>
              <option value="Urgent">Urgent</option>
            </select>
            <select id="category-filter">
              <option value="all">All Categories</option>
            </select>
          </div>
        </div>
        <div class="admin-tickets-list">
          <table id="tickets-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Category</th>
                <th>Status</th>
                <th>Priority</th>
                <th>Created</th>
                <th>Total Time</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody id="tickets-body"></tbody>
          </table>
        </div>
      </section>
    </main>

    <!-- Closed Tickets Accordion -->
    <section class="closed-tickets-section">
      <div class="accordion-section">
        <button class="accordion-toggle" id="closed-toggle">
          <i class="fas fa-archive"></i>
          Closed Tickets
          <span class="accordion-count" id="closed-count">0</span>
          <i class="fas fa-chevron-down accordion-arrow"></i>
        </button>
        <div class="accordion-body" id="closed-accordion" style="display: none;">
          <div class="admin-tickets-list">
            <table id="closed-tickets-table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Title</th>
                  <th>Category</th>
                  <th>Status</th>
                  <th>Priority</th>
                  <th>Created</th>
                  <th>Total Time</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody id="closed-tickets-body"></tbody>
            </table>
          </div>
        </div>
      </div>
    </section>

    <footer class="footer">
      <p class="app-footer-text">Ticket System by Honey</p>
    </footer>
  </div>

  <script src="admin-script.js"></script>
  <script src="version.js"></script>
</body>
</html>