BetterDesk/web-nodejs/views/tickets.ejs

<%- include('layouts/main', {
    title: _('tickets.title'),
    pageStyles: ['tickets'],
    pageScripts: ['tickets'],
    currentPage: 'tickets',
    breadcrumb: [{ label: _('tickets.title') }],
    body: `
        <div class="tickets-page">
            <!-- Header -->
            <div class="page-header">
                <div class="page-title">
                    <h1>${_('tickets.title')}</h1>
                </div>
                <p class="page-subtitle">${_('tickets.subtitle')}</p>
            </div>

            <!-- Stats -->
            <div class="tickets-stats" id="tickets-stats">
                <div class="stat-card stat-total">
                    <span class="stat-value" id="stat-total">0</span>
                    <span class="stat-label">${_('tickets.stats_total')}</span>
                </div>
                <div class="stat-card stat-open">
                    <span class="stat-value" id="stat-open">0</span>
                    <span class="stat-label">${_('tickets.stats_open')}</span>
                </div>
                <div class="stat-card stat-progress">
                    <span class="stat-value" id="stat-progress">0</span>
                    <span class="stat-label">${_('tickets.stats_in_progress')}</span>
                </div>
                <div class="stat-card stat-resolved">
                    <span class="stat-value" id="stat-resolved">0</span>
                    <span class="stat-label">${_('tickets.stats_resolved')}</span>
                </div>
            </div>

            <!-- Filters -->
            <div class="page-filters">
                <div class="search-wrapper">
                    <span class="material-icons">search</span>
                    <input type="text" class="form-input" id="search-input"
                        placeholder="${_('tickets.search_placeholder')}">
                </div>
                <div class="filter-buttons">
                    <button class="btn filter-btn active" data-status="">${_('tickets.filter_all')}</button>
                    <button class="btn filter-btn" data-status="open">${_('tickets.status_open')}</button>
                    <button class="btn filter-btn" data-status="in_progress">${_('tickets.status_in_progress')}</button>
                    <button class="btn filter-btn" data-status="resolved">${_('tickets.status_resolved')}</button>
                    <button class="btn filter-btn" data-status="closed">${_('tickets.status_closed')}</button>
                </div>
                <button class="btn btn-primary" id="create-ticket-btn">
                    <span class="material-icons">add</span>
                    <span>${_('tickets.create')}</span>
                </button>
            </div>

            <!-- Tickets Table -->
            <div class="table-wrapper">
                <table class="data-table" id="tickets-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>${_('tickets.ticket_title')}</th>
                            <th>${_('tickets.status')}</th>
                            <th>${_('tickets.priority')}</th>
                            <th>${_('tickets.category')}</th>
                            <th>${_('tickets.assigned_to')}</th>
                            <th>${_('tickets.device')}</th>
                            <th>${_('tickets.created_at')}</th>
                            <th>${_('common.actions')}</th>
                        </tr>
                    </thead>
                    <tbody id="tickets-body">
                        <tr class="empty-row">
                            <td colspan="9">
                                <div class="empty-state">
                                    <span class="material-icons">confirmation_number</span>
                                    <p>${_('tickets.no_tickets')}</p>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Create/Edit Modal -->
            <div class="modal-overlay" id="ticket-modal" style="display: none;">
                <div class="modal modal-lg">
                    <div class="modal-header">
                        <h3 id="ticket-modal-title">${_('tickets.create')}</h3>
                        <button class="btn-icon modal-close" data-modal="ticket-modal">
                            <span class="material-icons">close</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="ticket-form">
                            <input type="hidden" id="ticket-id">
                            <div class="form-group">
                                <label for="ticket-title">${_('tickets.ticket_title')} *</label>
                                <input type="text" class="form-input" id="ticket-title" required maxlength="200">
                            </div>
                            <div class="form-group">
                                <label for="ticket-desc">${_('tickets.description')}</label>
                                <textarea class="form-input" id="ticket-desc" rows="4" maxlength="5000"></textarea>
                            </div>
                            <div class="form-row">
                                <div class="form-group">
                                    <label for="ticket-priority">${_('tickets.priority')}</label>
                                    <select class="form-input" id="ticket-priority">
                                        <option value="low">${_('tickets.priority_low')}</option>
                                        <option value="medium" selected>${_('tickets.priority_medium')}</option>
                                        <option value="high">${_('tickets.priority_high')}</option>
                                        <option value="critical">${_('tickets.priority_critical')}</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="ticket-category">${_('tickets.category')}</label>
                                    <select class="form-input" id="ticket-category">
                                        <option value="general">${_('tickets.category_general')}</option>
                                        <option value="hardware">${_('tickets.category_hardware')}</option>
                                        <option value="software">${_('tickets.category_software')}</option>
                                        <option value="network">${_('tickets.category_network')}</option>
                                        <option value="access">${_('tickets.category_access')}</option>
                                        <option value="other">${_('tickets.category_other')}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="ticket-device">${_('tickets.device')}</label>
                                <input type="text" class="form-input" id="ticket-device" placeholder="Device ID (optional)">
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary modal-close" data-modal="ticket-modal">${_('common.cancel')}</button>
                        <button class="btn btn-primary" id="ticket-save-btn">${_('common.save')}</button>
                    </div>
                </div>
            </div>

            <!-- Detail Modal -->
            <div class="modal-overlay" id="detail-modal" style="display: none;">
                <div class="modal modal-lg">
                    <div class="modal-header">
                        <h3 id="detail-title">${_('tickets.detail')}</h3>
                        <button class="btn-icon modal-close" data-modal="detail-modal">
                            <span class="material-icons">close</span>
                        </button>
                    </div>
                    <div class="modal-body" id="detail-body"></div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary modal-close" data-modal="detail-modal">${_('actions.close')}</button>
                    </div>
                </div>
            </div>
        </div>
    `
}) %>