| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Manage Tickets</title> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> |
| <style> |
| .sidebar { |
| min-height: 100vh; |
| background-color: |
| color: white; |
| } |
| .sidebar-link { |
| color: rgba(255, 255, 255, 0.75); |
| text-decoration: none; |
| display: block; |
| padding: 10px 15px; |
| border-radius: 5px; |
| margin-bottom: 5px; |
| } |
| .sidebar-link:hover, .sidebar-link.active { |
| color: white; |
| background-color: |
| } |
| .ticket-table th { |
| background-color: |
| } |
| .search-box { |
| max-width: 300px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container-fluid"> |
| <div class="row"> |
| <!-- Sidebar --> |
| <div class="col-md-3 col-lg-2 d-md-block sidebar collapse bg-dark"> |
| <div class="position-sticky pt-3"> |
| <div class="text-center mb-4"> |
| <h4>SupportHub Admin</h4> |
| <p class="text-muted">Welcome, <?php echo htmlspecialchars($_SESSION['username']); ?></p> |
| </div> |
| |
| <ul class="nav flex-column"> |
| <li> |
| <a href="dashboard.php" class="sidebar-link"> |
| <i class="bi bi-speedometer2 me-2"></i> Dashboard |
| </a> |
| </li> |
| <li> |
| <a href="tickets.php" class="sidebar-link active"> |
| <i class="bi bi-ticket-detailed me-2"></i> Tickets |
| </a> |
| </li> |
| <li> |
| <a href="staff.php" class="sidebar-link"> |
| <i class="bi bi-people me-2"></i> Staff |
| </a> |
| </li> |
| <li> |
| <a href="reports.php" class="sidebar-link"> |
| <i class="bi bi-graph-up me-2"></i> Reports |
| </a> |
| </li> |
| <li> |
| <a href="settings.php" class="sidebar-link"> |
| <i class="bi bi-gear me-2"></i> Settings |
| </a> |
| </li> |
| <li class="mt-4"> |
| <a href="../logout.php" class="sidebar-link text-danger"> |
| <i class="bi bi-box-arrow-right me-2"></i> Logout |
| </a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <!-- Main Content --> |
| <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4"> |
| <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> |
| <h1 class="h2">Manage Tickets</h1> |
| <div class="btn-toolbar mb-2 mb-md-0"> |
| <div class="input-group search-box"> |
| <input type="text" class="form-control" placeholder="Search tickets..."> |
| <button class="btn btn-outline-secondary" type="button"> |
| <i class="bi bi-search"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Filter Options --> |
| <div class="row mb-4"> |
| <div class="col-md-3"> |
| <select class="form-select"> |
| <option selected>All Status</option> |
| <option>Open</option> |
| <option>In Progress</option> |
| <option>Resolved</option> |
| <option>Closed</option> |
| </select> |
| </div> |
| <div class="col-md-3"> |
| <select class="form-select"> |
| <option selected>All Priority</option> |
| <option>Low</option> |
| <option>Medium</option> |
| <option>High</option> |
| <option>Critical</option> |
| </select> |
| </div> |
| <div class="col-md-3"> |
| <select class="form-select"> |
| <option selected>Sort by Date</option> |
| <option>Newest First</option> |
| <option>Oldest First</option> |
| </select> |
| </div> |
| <div class="col-md-3"> |
| <button class="btn btn-primary w-100"> |
| <i class="bi bi-funnel"></i> Apply Filters |
| </button> |
| </div> |
| </div> |
| |
| <!-- Tickets Table --> |
| <div class="card"> |
| <div class="card-body"> |
| <div class="table-responsive"> |
| <table class="table table-hover ticket-table"> |
| <thead> |
| <tr> |
| <th>Ticket ID</th> |
| <th>Subject</th> |
| <th>Customer</th> |
| <th>Status</th> |
| <th>Priority</th> |
| <th>Created</th> |
| <th>Actions</th> |
| </tr> |
| </thead> |
| <tbody> |
| <?php while ($ticket = mysqli_fetch_assoc($tickets)): ?> |
| <tr> |
| <td><?php echo htmlspecialchars($ticket['ticket_id']); ?></td> |
| <td><?php echo htmlspecialchars($ticket['subject']); ?></td> |
| <td><?php echo htmlspecialchars($ticket['name']); ?></td> |
| <td> |
| <span class="badge |
| <?php |
| switch ($ticket['status']) { |
| case 'Open': echo 'bg-danger'; break; |
| case 'In Progress': echo 'bg-warning text-dark'; break; |
| case 'Resolved': echo 'bg-success'; break; |
| case 'Closed': echo 'bg-secondary'; break; |
| } |
| ?>"> |
| <?php echo htmlspecialchars($ticket['status']); ?> |
| </span> |
| </td> |
| <td><?php echo htmlspecialchars($ticket['priority']); ?></td> |
| <td><?php echo date('M d, Y', strtotime($ticket['created_at'])); ?></td> |
| <td> |
| <div class="btn-group"> |
| <a href="view-ticket.php?id=<?php echo $ticket['id']; ?>" class="btn btn-sm btn-outline-primary"> |
| <i class="bi bi-eye"></i> |
| </a> |
| <a href="edit-ticket.php?id=<?php echo $ticket['id']; ?>" class="btn btn-sm btn-outline-secondary"> |
| <i class="bi bi-pencil"></i> |
| </a> |
| <a href="delete-ticket.php?id=<?php echo $ticket['id']; ?>" class="btn btn-sm btn-outline-danger"> |
| <i class="bi bi-trash"></i> |
| </a> |
| </div> |
| </td> |
| </tr> |
| <?php endwhile; ?> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Pagination --> |
| <nav aria-label="Page navigation" class="mt-4"> |
| <ul class="pagination justify-content-center"> |
| <li class="page-item disabled"> |
| <a class="page-link" href=" |
| </li> |
| <li class="page-item active"><a class="page-link" href="#">1</a></li> |
| <li class="page-item"><a class="page-link" href="#">2</a></li> |
| <li class="page-item"><a class="page-link" href="#">3</a></li> |
| <li class="page-item"> |
| <a class="page-link" href="#">Next</a> |
| </li> |
| </ul> |
| </nav> |
| </main> |
| </div> |
| </div> |
| |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> |
| </body> |
| </html> |
| |
