Spaces:
Build error
Build error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Ticket Management System</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="dashboard"> | |
| <div class="sidebar"> | |
| <div class="logo"> | |
| <i class="fas fa-ticket-alt"></i> | |
| <span>TicketSys Pro</span> | |
| </div> | |
| <ul class="menu"> | |
| <li class="active"><a href="#"><i class="fas fa-home"></i> Dashboard</a></li> | |
| <li><a href="#"><i class="fas fa-chart-bar"></i> Analytics</a></li> | |
| <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li> | |
| </ul> | |
| </div> | |
| <div class="main-content"> | |
| <header> | |
| <h1>Ticket Management Dashboard</h1> | |
| <div class="user-actions"> | |
| <button id="downloadBtn" class="btn btn-success"> | |
| <i class="fas fa-file-excel"></i> Export to Excel | |
| </button> | |
| <div class="user-profile"> | |
| <img src="https://via.placeholder.com/40" alt="User"> | |
| <span>Admin</span> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="stats-cards"> | |
| <div class="card stat-card"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Total Tickets</h5> | |
| <h2 class="stat-value">{{ tickets|length }}</h2> | |
| <p class="stat-change"><i class="fas fa-arrow-up"></i> 12% from last week</p> | |
| </div> | |
| </div> | |
| <div class="card stat-card"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Today's Tickets</h5> | |
| <h2 class="stat-value">24</h2> | |
| <p class="stat-change"><i class="fas fa-arrow-down"></i> 5% from yesterday</p> | |
| </div> | |
| </div> | |
| <div class="card stat-card"> | |
| <div class="card-body"> | |
| <h5 class="card-title">Top Region</h5> | |
| <h2 class="stat-value">Punjab</h2> | |
| <p class="stat-change">35% of total tickets</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-table-container"> | |
| <div class="table-header"> | |
| <h3>Recent Tickets</h3> | |
| <div class="table-actions"> | |
| <div class="search-box"> | |
| <input type="text" placeholder="Search..."> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <button class="btn btn-primary refresh-btn"> | |
| <i class="fas fa-sync-alt"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <div class="table-responsive"> | |
| <table class="table table-striped table-hover"> | |
| <thead> | |
| <tr> | |
| <th>Ticket #</th> | |
| <th>Name</th> | |
| <th>Email</th> | |
| <th>Phone</th> | |
| <th>Country</th> | |
| <th>Region</th> | |
| <th>Qty</th> | |
| <th>Date</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for ticket in tickets %} | |
| <tr> | |
| <td>{{ ticket.ticket_number }}</td> | |
| <td>{{ ticket.name }}</td> | |
| <td>{{ ticket.email }}</td> | |
| <td>{{ ticket.phone }}</td> | |
| <td>{{ ticket.country }}</td> | |
| <td>{{ ticket.region }}</td> | |
| <td>{{ ticket.ticket_count }}</td> | |
| <td>{{ ticket.timestamp.strftime('%Y-%m-%d %H:%M') }}</td> | |
| <td> | |
| <button class="btn btn-sm btn-info view-btn" data-id="{{ ticket.id }}"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="btn btn-sm btn-danger delete-btn" data-id="{{ ticket.id }}"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| <nav aria-label="Page navigation"> | |
| <ul class="pagination justify-content-center"> | |
| <li class="page-item disabled"> | |
| <a class="page-link" href="#" tabindex="-1">Previous</a> | |
| </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> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- View Ticket Modal --> | |
| <div class="modal fade" id="viewTicketModal" tabindex="-1" aria-hidden="true"> | |
| <div class="modal-dialog"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Ticket Details</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="ticket-details"> | |
| <div class="detail-row"> | |
| <span class="detail-label">Ticket Number:</span> | |
| <span class="detail-value" id="modal-ticket-number">T-283598</span> | |
| </div> | |
| <div class="detail-row"> | |
| <span class="detail-label">Name:</span> | |
| <span class="detail-value" id="modal-name">Abdullah Ali</span> | |
| </div> | |
| <div class="detail-row"> | |
| <span class="detail-label">Email:</span> | |
| <span class="detail-value" id="modal-email">[email protected]</span> | |
| </div> | |
| <div class="detail-row"> | |
| <span class="detail-label">Phone:</span> | |
| <span class="detail-value" id="modal-phone">03037191639</span> | |
| </div> | |
| <div class="detail-row"> | |
| <span class="detail-label">Quantity:</span> | |
| <span class="detail-value" id="modal-quantity">3</span> | |
| </div> | |
| <div class="detail-row"> | |
| <span class="detail-label">Location:</span> | |
| <span class="detail-value" id="modal-location">Punjab, Pakistan</span> | |
| </div> | |
| <div class="detail-row"> | |
| <span class="detail-label">Purchase Date:</span> | |
| <span class="detail-value" id="modal-date">2023-06-15 14:30</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | |
| <button type="button" class="btn btn-primary">Print Ticket</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |