Jared Vititoe
79706f790d
Major improvements: - Replace table with card-based layout below 1400px width - Cards show ticket ID, title, category, assignee, status, and actions - Priority indicated by left border color - Fully responsive from 1400px down to mobile Mobile improvements (768px and below): - Cards stack vertically with touch-friendly sizing - Action buttons are full-width with 44px touch targets - Meta info displayed in a clean row format - Removed old table-based mobile styles Sidebar collapse improvements: - Collapsed state now truly saves space (0 width, no gap) - Expand button is compact vertical text Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1042 lines
52 KiB
PHP
1042 lines
52 KiB
PHP
<?php
|
|
// This file contains the HTML template for the dashboard
|
|
// It receives $tickets, $totalTickets, $totalPages, $page, $status, $categories, $types variables from the controller
|
|
require_once __DIR__ . '/../middleware/SecurityHeadersMiddleware.php';
|
|
require_once __DIR__ . '/../middleware/CsrfMiddleware.php';
|
|
$nonce = SecurityHeadersMiddleware::getNonce();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Ticket Dashboard</title>
|
|
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
|
|
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260131c">
|
|
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ascii-banner.js"></script>
|
|
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
|
|
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js?v=20260131c"></script>
|
|
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js?v=20260131c"></script>
|
|
<script nonce="<?php echo $nonce; ?>">
|
|
// CSRF Token for AJAX requests
|
|
window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';
|
|
// Timezone configuration (from server)
|
|
window.APP_TIMEZONE = '<?php echo $GLOBALS['config']['TIMEZONE']; ?>';
|
|
window.APP_TIMEZONE_OFFSET = <?php echo $GLOBALS['config']['TIMEZONE_OFFSET']; ?>; // minutes from UTC
|
|
window.APP_TIMEZONE_ABBREV = '<?php echo $GLOBALS['config']['TIMEZONE_ABBREV']; ?>';
|
|
</script>
|
|
</head>
|
|
<body data-categories='<?php echo json_encode($categories); ?>' data-types='<?php echo json_encode($types); ?>'>
|
|
|
|
<!-- Terminal Boot Sequence -->
|
|
<div id="boot-sequence" class="boot-overlay">
|
|
<pre id="boot-text"></pre>
|
|
</div>
|
|
<script nonce="<?php echo $nonce; ?>">
|
|
function showBootSequence() {
|
|
const bootText = document.getElementById('boot-text');
|
|
const bootOverlay = document.getElementById('boot-sequence');
|
|
const messages = [
|
|
'╔═══════════════════════════════════════╗',
|
|
'║ TINKER TICKETS TERMINAL v1.0 ║',
|
|
'║ BOOTING SYSTEM... ║',
|
|
'╚═══════════════════════════════════════╝',
|
|
'',
|
|
'[ OK ] Loading kernel modules...',
|
|
'[ OK ] Initializing ticket database...',
|
|
'[ OK ] Mounting user session...',
|
|
'[ OK ] Starting dashboard services...',
|
|
'[ OK ] Rendering ASCII frames...',
|
|
'',
|
|
'> SYSTEM READY ✓',
|
|
''
|
|
];
|
|
|
|
let i = 0;
|
|
const interval = setInterval(() => {
|
|
if (i < messages.length) {
|
|
bootText.textContent += messages[i] + '\n';
|
|
i++;
|
|
} else {
|
|
setTimeout(() => {
|
|
bootOverlay.style.opacity = '0';
|
|
setTimeout(() => bootOverlay.remove(), 500);
|
|
}, 500);
|
|
clearInterval(interval);
|
|
}
|
|
}, 80);
|
|
}
|
|
|
|
// Run on first visit only (per session)
|
|
if (!sessionStorage.getItem('booted')) {
|
|
showBootSequence();
|
|
sessionStorage.setItem('booted', 'true');
|
|
} else {
|
|
document.getElementById('boot-sequence').remove();
|
|
}
|
|
</script>
|
|
<header class="user-header" role="banner">
|
|
<div class="user-header-left">
|
|
<a href="/" class="app-title">🎫 Tinker Tickets</a>
|
|
</div>
|
|
<div class="user-header-right">
|
|
<?php if (isset($GLOBALS['currentUser'])): ?>
|
|
<span class="user-name">👤 <?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username']); ?></span>
|
|
<?php if ($GLOBALS['currentUser']['is_admin']): ?>
|
|
<div class="admin-dropdown">
|
|
<button class="admin-badge" data-action="toggle-admin-menu">Admin ▼</button>
|
|
<div class="admin-dropdown-content" id="adminDropdown">
|
|
<a href="/admin/templates">📋 Templates</a>
|
|
<a href="/admin/workflow">🔄 Workflow</a>
|
|
<a href="/admin/recurring-tickets">🔁 Recurring Tickets</a>
|
|
<a href="/admin/custom-fields">📝 Custom Fields</a>
|
|
<a href="/admin/user-activity">👥 User Activity</a>
|
|
<a href="/admin/audit-log">📜 Audit Log</a>
|
|
<a href="/admin/api-keys">🔑 API Keys</a>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
<button class="settings-icon" title="Settings (Alt+S)" data-action="open-settings" aria-label="Settings">⚙</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Collapsible ASCII Banner -->
|
|
<div class="ascii-banner-wrapper collapsed">
|
|
<button class="banner-toggle" data-action="toggle-banner">
|
|
<span class="toggle-icon">▼</span> ASCII Banner
|
|
</button>
|
|
<div id="ascii-banner-container" class="banner-content"></div>
|
|
</div>
|
|
<script nonce="<?php echo $nonce; ?>">
|
|
function toggleBanner() {
|
|
const wrapper = document.querySelector('.ascii-banner-wrapper');
|
|
const icon = document.querySelector('.toggle-icon');
|
|
wrapper.classList.toggle('collapsed');
|
|
icon.textContent = wrapper.classList.contains('collapsed') ? '▼' : '▲';
|
|
|
|
// Render banner on first expand (no animation for instant display)
|
|
if (!wrapper.classList.contains('collapsed') && !wrapper.dataset.rendered) {
|
|
renderResponsiveBanner('#ascii-banner-container', 0); // Speed 0 = no animation
|
|
wrapper.dataset.rendered = 'true';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Dashboard Layout with Sidebar -->
|
|
<div class="dashboard-layout" id="dashboardLayout">
|
|
<!-- Left Sidebar with Filters -->
|
|
<aside class="dashboard-sidebar" id="dashboardSidebar" role="complementary" aria-label="Filter options">
|
|
<button class="sidebar-collapse-btn" data-action="toggle-sidebar" title="Collapse Sidebar" aria-expanded="true" aria-controls="dashboardSidebar">◀ Hide</button>
|
|
<div class="sidebar-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="ascii-subsection-header">Filters</div>
|
|
|
|
<!-- Status Filter -->
|
|
<div class="filter-group">
|
|
<h4>Status</h4>
|
|
<?php
|
|
$currentStatus = isset($_GET['status']) ? explode(',', $_GET['status']) : ['Open', 'Pending', 'In Progress'];
|
|
$allStatuses = ['Open', 'Pending', 'In Progress', 'Closed'];
|
|
foreach ($allStatuses as $status):
|
|
?>
|
|
<label>
|
|
<input type="checkbox"
|
|
name="status"
|
|
value="<?php echo $status; ?>"
|
|
<?php echo in_array($status, $currentStatus) ? 'checked' : ''; ?>>
|
|
<?php echo $status; ?>
|
|
</label>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<!-- Category Filter -->
|
|
<div class="filter-group">
|
|
<h4>Category</h4>
|
|
<?php
|
|
$currentCategories = isset($_GET['category']) ? explode(',', $_GET['category']) : [];
|
|
foreach ($categories as $cat):
|
|
?>
|
|
<label>
|
|
<input type="checkbox"
|
|
name="category"
|
|
value="<?php echo $cat; ?>"
|
|
<?php echo in_array($cat, $currentCategories) ? 'checked' : ''; ?>>
|
|
<?php echo htmlspecialchars($cat); ?>
|
|
</label>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<!-- Type Filter -->
|
|
<div class="filter-group">
|
|
<h4>Type</h4>
|
|
<?php
|
|
$currentTypes = isset($_GET['type']) ? explode(',', $_GET['type']) : [];
|
|
foreach ($types as $type):
|
|
?>
|
|
<label>
|
|
<input type="checkbox"
|
|
name="type"
|
|
value="<?php echo $type; ?>"
|
|
<?php echo in_array($type, $currentTypes) ? 'checked' : ''; ?>>
|
|
<?php echo htmlspecialchars($type); ?>
|
|
</label>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<button id="apply-filters-btn" class="btn">Apply Filters</button>
|
|
<button id="clear-filters-btn" class="btn btn-secondary">Clear All</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Expand button shown when sidebar is collapsed -->
|
|
<button class="sidebar-expand-btn" id="sidebarExpandBtn" data-action="toggle-sidebar" title="Show Filters" aria-expanded="false" aria-controls="dashboardSidebar">▶ Filters</button>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="dashboard-main">
|
|
|
|
<!-- Dashboard Stats Widgets -->
|
|
<?php if (isset($stats)): ?>
|
|
<div class="stats-widgets">
|
|
<div class="stats-row">
|
|
<div class="stat-card stat-open">
|
|
<div class="stat-icon">📂</div>
|
|
<div class="stat-content">
|
|
<div class="stat-value"><?php echo $stats['open_tickets']; ?></div>
|
|
<div class="stat-label">Open Tickets</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card stat-critical">
|
|
<div class="stat-icon">🔥</div>
|
|
<div class="stat-content">
|
|
<div class="stat-value"><?php echo $stats['critical']; ?></div>
|
|
<div class="stat-label">Critical (P1)</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card stat-unassigned">
|
|
<div class="stat-icon">👤</div>
|
|
<div class="stat-content">
|
|
<div class="stat-value"><?php echo $stats['unassigned']; ?></div>
|
|
<div class="stat-label">Unassigned</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card stat-today">
|
|
<div class="stat-icon">📅</div>
|
|
<div class="stat-content">
|
|
<div class="stat-value"><?php echo $stats['created_today']; ?></div>
|
|
<div class="stat-label">Created Today</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card stat-resolved">
|
|
<div class="stat-icon">✓</div>
|
|
<div class="stat-content">
|
|
<div class="stat-value"><?php echo $stats['closed_today']; ?></div>
|
|
<div class="stat-label">Closed Today</div>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card stat-time">
|
|
<div class="stat-icon">⏱</div>
|
|
<div class="stat-content">
|
|
<div class="stat-value"><?php echo $stats['avg_resolution_hours']; ?>h</div>
|
|
<div class="stat-label">Avg Resolution</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- CONDENSED TOOLBAR: Combined Header, Search, Actions, Pagination -->
|
|
<div class="dashboard-toolbar">
|
|
<!-- Left: Title + Search -->
|
|
<div class="toolbar-left">
|
|
<h1 class="dashboard-title">🎫 Tickets</h1>
|
|
<form method="GET" action="" class="toolbar-search">
|
|
<!-- Preserve existing parameters -->
|
|
<?php if (isset($_GET['status'])): ?>
|
|
<input type="hidden" name="status" value="<?php echo htmlspecialchars($_GET['status']); ?>">
|
|
<?php endif; ?>
|
|
<?php if (isset($_GET['category'])): ?>
|
|
<input type="hidden" name="category" value="<?php echo htmlspecialchars($_GET['category']); ?>">
|
|
<?php endif; ?>
|
|
<?php if (isset($_GET['type'])): ?>
|
|
<input type="hidden" name="type" value="<?php echo htmlspecialchars($_GET['type']); ?>">
|
|
<?php endif; ?>
|
|
<?php if (isset($_GET['sort'])): ?>
|
|
<input type="hidden" name="sort" value="<?php echo htmlspecialchars($_GET['sort']); ?>">
|
|
<?php endif; ?>
|
|
<?php if (isset($_GET['dir'])): ?>
|
|
<input type="hidden" name="dir" value="<?php echo htmlspecialchars($_GET['dir']); ?>">
|
|
<?php endif; ?>
|
|
|
|
<input type="text"
|
|
name="search"
|
|
placeholder="🔍 Search tickets..."
|
|
class="search-box"
|
|
value="<?php echo isset($_GET['search']) ? htmlspecialchars($_GET['search']) : ''; ?>">
|
|
<button type="submit" class="btn search-btn">Search</button>
|
|
<button type="button" class="btn btn-secondary" data-action="open-advanced-search" title="Advanced Search">⚙ Advanced</button>
|
|
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
|
<a href="?" class="clear-search-btn">✗</a>
|
|
<?php endif; ?>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Center: Actions + Count -->
|
|
<div class="toolbar-center">
|
|
<div class="view-toggle">
|
|
<button id="tableViewBtn" class="view-btn active" data-action="set-view-mode" data-mode="table" title="Table View" aria-label="Table view" aria-pressed="true">≡</button>
|
|
<button id="cardViewBtn" class="view-btn" data-action="set-view-mode" data-mode="card" title="Kanban View" aria-label="Kanban view" aria-pressed="false">▦</button>
|
|
</div>
|
|
<button data-action="navigate" data-url="<?php echo $GLOBALS['config']['BASE_URL']; ?>/ticket/create" class="btn create-ticket">+ New Ticket</button>
|
|
<div class="export-dropdown" id="exportDropdown" style="display: none;">
|
|
<button class="btn" data-action="toggle-export-menu">↓ Export Selected (<span id="exportCount">0</span>)</button>
|
|
<div class="export-dropdown-content" id="exportDropdownContent">
|
|
<a href="#" data-action="export-tickets" data-format="csv">CSV</a>
|
|
<a href="#" data-action="export-tickets" data-format="json">JSON</a>
|
|
</div>
|
|
</div>
|
|
<span class="ticket-count">Total: <?php echo $totalTickets; ?></span>
|
|
</div>
|
|
|
|
<!-- Right: Pagination -->
|
|
<div class="toolbar-right">
|
|
<div class="pagination">
|
|
<?php
|
|
$currentParams = $_GET;
|
|
|
|
// Previous page button
|
|
if ($page > 1) {
|
|
$currentParams['page'] = $page - 1;
|
|
$prevUrl = '?' . http_build_query($currentParams);
|
|
echo "<button data-action='navigate' data-url='$prevUrl'>«</button>";
|
|
}
|
|
|
|
// Page number buttons
|
|
for ($i = 1; $i <= $totalPages; $i++) {
|
|
$activeClass = ($i === $page) ? 'active' : '';
|
|
$currentParams['page'] = $i;
|
|
$pageUrl = '?' . http_build_query($currentParams);
|
|
echo "<button class='$activeClass' data-action='navigate' data-url='$pageUrl'>$i</button>";
|
|
}
|
|
|
|
// Next page button
|
|
if ($page < $totalPages) {
|
|
$currentParams['page'] = $page + 1;
|
|
$nextUrl = '?' . http_build_query($currentParams);
|
|
echo "<button data-action='navigate' data-url='$nextUrl'>»</button>";
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
|
|
<div class="search-results-info">
|
|
Showing results for: "<strong><?php echo htmlspecialchars($_GET['search']); ?></strong>"
|
|
(<?php echo $totalTickets; ?> ticket<?php echo $totalTickets != 1 ? 's' : ''; ?> found)
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- TICKET TABLE WITH INLINE BULK ACTIONS -->
|
|
<section class="ascii-frame-outer" aria-label="Ticket list">
|
|
<span class="bottom-left-corner">╚</span>
|
|
<span class="bottom-right-corner">╝</span>
|
|
|
|
<div class="ascii-section-header">Ticket List</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<!-- Inline Bulk Actions (appears above table when items selected) -->
|
|
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
|
<div class="bulk-actions-inline" style="display: none;">
|
|
<span id="selected-count">0</span> tickets selected
|
|
<button data-action="bulk-status" class="btn btn-bulk">Change Status</button>
|
|
<button data-action="bulk-assign" class="btn btn-bulk">Assign</button>
|
|
<button data-action="bulk-priority" class="btn btn-bulk">Priority</button>
|
|
<button data-action="clear-selection" class="btn btn-secondary">Clear</button>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- Active Filters Display -->
|
|
<?php
|
|
$activeFilters = [];
|
|
if (!empty($_GET['status'])) {
|
|
$statuses = explode(',', $_GET['status']);
|
|
foreach ($statuses as $s) {
|
|
$activeFilters[] = ['type' => 'status', 'value' => trim($s), 'label' => 'Status: ' . trim($s)];
|
|
}
|
|
}
|
|
if (!empty($_GET['priority'])) {
|
|
$priorities = is_array($_GET['priority']) ? $_GET['priority'] : explode(',', $_GET['priority']);
|
|
foreach ($priorities as $p) {
|
|
$activeFilters[] = ['type' => 'priority', 'value' => trim($p), 'label' => 'Priority: P' . trim($p)];
|
|
}
|
|
}
|
|
if (!empty($_GET['category'])) {
|
|
$activeFilters[] = ['type' => 'category', 'value' => $_GET['category'], 'label' => 'Category: ' . $_GET['category']];
|
|
}
|
|
if (!empty($_GET['type'])) {
|
|
$activeFilters[] = ['type' => 'type', 'value' => $_GET['type'], 'label' => 'Type: ' . $_GET['type']];
|
|
}
|
|
if (!empty($_GET['assigned_to'])) {
|
|
$activeFilters[] = ['type' => 'assigned_to', 'value' => $_GET['assigned_to'], 'label' => 'Assigned To: ' . ($_GET['assigned_to'] === 'unassigned' ? 'Unassigned' : 'User #' . $_GET['assigned_to'])];
|
|
}
|
|
if (!empty($_GET['search'])) {
|
|
$activeFilters[] = ['type' => 'search', 'value' => $_GET['search'], 'label' => 'Search: "' . htmlspecialchars(substr($_GET['search'], 0, 20)) . (strlen($_GET['search']) > 20 ? '...' : '') . '"'];
|
|
}
|
|
?>
|
|
<?php if (!empty($activeFilters)): ?>
|
|
<div class="active-filters-bar">
|
|
<span class="active-filters-label">Active Filters:</span>
|
|
<div class="active-filters-list">
|
|
<?php foreach ($activeFilters as $filter): ?>
|
|
<span class="filter-badge" data-filter-type="<?php echo htmlspecialchars($filter['type']); ?>" data-filter-value="<?php echo htmlspecialchars($filter['value']); ?>">
|
|
<?php echo htmlspecialchars($filter['label']); ?>
|
|
<button type="button" class="filter-remove" data-action="remove-filter" data-filter-type="<?php echo htmlspecialchars($filter['type']); ?>" data-filter-value="<?php echo htmlspecialchars($filter['value']); ?>" title="Remove filter">×</button>
|
|
</span>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<button type="button" class="btn btn-secondary btn-sm" data-action="clear-all-filters">Clear All</button>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- Table -->
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
|
<th style="width: 40px;"><input type="checkbox" id="selectAllCheckbox" data-action="toggle-select-all"></th>
|
|
<?php endif; ?>
|
|
<?php
|
|
$currentSort = isset($_GET['sort']) ? $_GET['sort'] : 'ticket_id';
|
|
$currentDir = isset($_GET['dir']) ? $_GET['dir'] : 'desc';
|
|
|
|
$columns = [
|
|
'ticket_id' => 'Ticket ID',
|
|
'priority' => 'Priority',
|
|
'title' => 'Title',
|
|
'category' => 'Category',
|
|
'type' => 'Type',
|
|
'status' => 'Status',
|
|
'created_by' => 'Created By',
|
|
'assigned_to' => 'Assigned To',
|
|
'created_at' => 'Created',
|
|
'updated_at' => 'Updated',
|
|
'_actions' => 'Actions'
|
|
];
|
|
|
|
foreach($columns as $col => $label) {
|
|
if ($col === '_actions') {
|
|
echo "<th style='width: 100px; text-align: center;'>$label</th>";
|
|
} else {
|
|
$newDir = ($currentSort === $col && $currentDir === 'asc') ? 'desc' : 'asc';
|
|
$sortClass = ($currentSort === $col) ? "sort-$currentDir" : '';
|
|
$sortParams = array_merge($_GET, ['sort' => $col, 'dir' => $newDir]);
|
|
$sortUrl = '?' . http_build_query($sortParams);
|
|
echo "<th class='$sortClass' data-action='navigate' data-url='$sortUrl'>$label</th>";
|
|
}
|
|
}
|
|
?>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php
|
|
if (count($tickets) > 0) {
|
|
foreach($tickets as $row) {
|
|
$creator = $row['creator_display_name'] ?? $row['creator_username'] ?? 'System';
|
|
$assignedTo = $row['assigned_display_name'] ?? $row['assigned_username'] ?? 'Unassigned';
|
|
echo "<tr class='priority-{$row['priority']}'>";
|
|
|
|
// Add checkbox column for admins
|
|
if ($GLOBALS['currentUser']['is_admin'] ?? false) {
|
|
echo "<td data-action='toggle-row-checkbox' class='checkbox-cell'><input type='checkbox' class='ticket-checkbox' value='{$row['ticket_id']}' data-action='update-selection'></td>";
|
|
}
|
|
|
|
echo "<td><a href='/ticket/{$row['ticket_id']}' class='ticket-link'>{$row['ticket_id']}</a></td>";
|
|
echo "<td><span>{$row['priority']}</span></td>";
|
|
echo "<td>" . htmlspecialchars($row['title']) . "</td>";
|
|
echo "<td>{$row['category']}</td>";
|
|
echo "<td>{$row['type']}</td>";
|
|
echo "<td><span class='status-" . str_replace(' ', '-', $row['status']) . "'>{$row['status']}</span></td>";
|
|
echo "<td>" . htmlspecialchars($creator) . "</td>";
|
|
echo "<td>" . htmlspecialchars($assignedTo) . "</td>";
|
|
echo "<td>" . date('Y-m-d H:i', strtotime($row['created_at'])) . "</td>";
|
|
echo "<td>" . date('Y-m-d H:i', strtotime($row['updated_at'])) . "</td>";
|
|
// Quick actions column
|
|
echo "<td class='quick-actions-cell'>";
|
|
echo "<div class='quick-actions'>";
|
|
echo "<button data-action='view-ticket' data-ticket-id='{$row['ticket_id']}' class='quick-action-btn' title='View'>👁</button>";
|
|
echo "<button data-action='quick-status' data-ticket-id='{$row['ticket_id']}' data-status='{$row['status']}' class='quick-action-btn' title='Change Status'>🔄</button>";
|
|
echo "<button data-action='quick-assign' data-ticket-id='{$row['ticket_id']}' class='quick-action-btn' title='Assign'>👤</button>";
|
|
echo "</div>";
|
|
echo "</td>";
|
|
echo "</tr>";
|
|
}
|
|
} else {
|
|
$colspan = ($GLOBALS['currentUser']['is_admin'] ?? false) ? '12' : '11';
|
|
echo "<tr><td colspan='$colspan' style='text-align: center; padding: 3rem;'>";
|
|
echo "<pre style='color: var(--terminal-green); text-shadow: var(--glow-green); font-size: 0.8rem; line-height: 1.2;'>";
|
|
echo "╔════════════════════════════════════════╗\n";
|
|
echo "║ ║\n";
|
|
echo "║ NO TICKETS FOUND ║\n";
|
|
echo "║ ║\n";
|
|
echo "║ [ ] Empty queue - all clear! ║\n";
|
|
echo "║ ║\n";
|
|
echo "╚════════════════════════════════════════╝";
|
|
echo "</pre>";
|
|
echo "</td></tr>";
|
|
}
|
|
?>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Responsive Card View (shown on smaller screens via CSS) -->
|
|
<div class="ticket-cards">
|
|
<?php
|
|
if (count($tickets) > 0) {
|
|
foreach($tickets as $row) {
|
|
$creator = $row['creator_display_name'] ?? $row['creator_username'] ?? 'System';
|
|
$assignedTo = $row['assigned_display_name'] ?? $row['assigned_username'] ?? 'Unassigned';
|
|
$statusClass = 'status-' . str_replace(' ', '-', $row['status']);
|
|
?>
|
|
<div class="ticket-card-row priority-<?php echo $row['priority']; ?>">
|
|
<div class="ticket-card-id">
|
|
<a href="/ticket/<?php echo $row['ticket_id']; ?>">#<?php echo $row['ticket_id']; ?></a>
|
|
</div>
|
|
<div class="ticket-card-main">
|
|
<div class="ticket-card-title"><?php echo htmlspecialchars($row['title']); ?></div>
|
|
<div class="ticket-card-meta">
|
|
<span>📁 <?php echo htmlspecialchars($row['category']); ?></span>
|
|
<span>👤 <?php echo htmlspecialchars($assignedTo); ?></span>
|
|
<span>📅 <?php echo date('M j', strtotime($row['updated_at'])); ?></span>
|
|
</div>
|
|
</div>
|
|
<div class="ticket-card-status <?php echo $statusClass; ?>">
|
|
<?php echo $row['status']; ?>
|
|
</div>
|
|
<div class="ticket-card-actions">
|
|
<button data-action="view-ticket" data-ticket-id="<?php echo $row['ticket_id']; ?>" title="View">👁</button>
|
|
<button data-action="quick-status" data-ticket-id="<?php echo $row['ticket_id']; ?>" data-status="<?php echo $row['status']; ?>" title="Status">🔄</button>
|
|
</div>
|
|
</div>
|
|
<?php
|
|
}
|
|
} else {
|
|
?>
|
|
<div class="ticket-card-empty">
|
|
<span>No tickets found</span>
|
|
</div>
|
|
<?php
|
|
}
|
|
?>
|
|
</div>
|
|
|
|
</div><!-- End table-wrapper -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- END OUTER FRAME -->
|
|
|
|
<!-- Kanban Card View -->
|
|
<section id="cardView" class="card-view-container" style="display: none;" aria-label="Kanban board view">
|
|
<div class="kanban-board">
|
|
<div class="kanban-column" data-status="Open">
|
|
<div class="kanban-column-header status-Open">
|
|
<span class="column-title">Open</span>
|
|
<span class="column-count">0</span>
|
|
</div>
|
|
<div class="kanban-cards"></div>
|
|
</div>
|
|
<div class="kanban-column" data-status="Pending">
|
|
<div class="kanban-column-header status-Pending">
|
|
<span class="column-title">Pending</span>
|
|
<span class="column-count">0</span>
|
|
</div>
|
|
<div class="kanban-cards"></div>
|
|
</div>
|
|
<div class="kanban-column" data-status="In Progress">
|
|
<div class="kanban-column-header status-In-Progress">
|
|
<span class="column-title">In Progress</span>
|
|
<span class="column-count">0</span>
|
|
</div>
|
|
<div class="kanban-cards"></div>
|
|
</div>
|
|
<div class="kanban-column" data-status="Closed">
|
|
<div class="kanban-column-header status-Closed">
|
|
<span class="column-title">Closed</span>
|
|
<span class="column-count">0</span>
|
|
</div>
|
|
<div class="kanban-cards"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Settings Modal -->
|
|
<div class="settings-modal" id="settingsModal" style="display: none;" data-action="close-settings-backdrop" role="dialog" aria-modal="true" aria-labelledby="settingsModalTitle">
|
|
<div class="settings-content">
|
|
<span class="bottom-left-corner">╚</span>
|
|
<span class="bottom-right-corner">╝</span>
|
|
|
|
<div class="settings-header">
|
|
<h3 id="settingsModalTitle">⚙ System Preferences</h3>
|
|
<button class="close-settings" data-action="close-settings" aria-label="Close settings">✗</button>
|
|
</div>
|
|
|
|
<div class="settings-body">
|
|
<!-- Display Preferences -->
|
|
<div class="settings-section">
|
|
<h4>╔══ Display Preferences ══╗</h4>
|
|
|
|
<div class="setting-row">
|
|
<label for="rowsPerPage">Rows per page:</label>
|
|
<select id="rowsPerPage" class="setting-select">
|
|
<option value="15">15</option>
|
|
<option value="25">25</option>
|
|
<option value="50">50</option>
|
|
<option value="100">100</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label for="defaultFilters">Default status filters:</label>
|
|
<div class="checkbox-group">
|
|
<label><input type="checkbox" name="defaultFilters" value="Open" checked> Open</label>
|
|
<label><input type="checkbox" name="defaultFilters" value="Pending" checked> Pending</label>
|
|
<label><input type="checkbox" name="defaultFilters" value="In Progress" checked> In Progress</label>
|
|
<label><input type="checkbox" name="defaultFilters" value="Closed"> Closed</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label for="tableDensity">Table density:</label>
|
|
<select id="tableDensity" class="setting-select">
|
|
<option value="compact">Compact</option>
|
|
<option value="normal" selected>Normal</option>
|
|
<option value="comfortable">Comfortable</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label for="userTimezone">Timezone:</label>
|
|
<select id="userTimezone" class="setting-select">
|
|
<option value="America/New_York">Eastern (EST/EDT)</option>
|
|
<option value="America/Chicago">Central (CST/CDT)</option>
|
|
<option value="America/Denver">Mountain (MST/MDT)</option>
|
|
<option value="America/Los_Angeles">Pacific (PST/PDT)</option>
|
|
<option value="America/Anchorage">Alaska (AKST/AKDT)</option>
|
|
<option value="Pacific/Honolulu">Hawaii (HST)</option>
|
|
<option value="UTC">UTC</option>
|
|
<option value="Europe/London">London (GMT/BST)</option>
|
|
<option value="Europe/Paris">Paris (CET/CEST)</option>
|
|
<option value="Europe/Berlin">Berlin (CET/CEST)</option>
|
|
<option value="Asia/Tokyo">Tokyo (JST)</option>
|
|
<option value="Asia/Shanghai">Shanghai (CST)</option>
|
|
<option value="Asia/Kolkata">India (IST)</option>
|
|
<option value="Australia/Sydney">Sydney (AEST/AEDT)</option>
|
|
</select>
|
|
<small class="text-muted mt-sm display-block">
|
|
Current: <?php echo $GLOBALS['config']['TIMEZONE_ABBREV']; ?> (<?php echo $GLOBALS['config']['TIMEZONE']; ?>)
|
|
</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notifications -->
|
|
<div class="settings-section">
|
|
<h4>╔══ Notifications ══╗</h4>
|
|
|
|
<div class="setting-row">
|
|
<label>
|
|
<input type="checkbox" id="notificationsEnabled" checked>
|
|
Enable browser notifications
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label>
|
|
<input type="checkbox" id="soundEffects" checked>
|
|
Sound effects
|
|
</label>
|
|
</div>
|
|
|
|
<div class="setting-row">
|
|
<label for="toastDuration">Toast duration:</label>
|
|
<select id="toastDuration" class="setting-select">
|
|
<option value="3000" selected>3 seconds</option>
|
|
<option value="5000">5 seconds</option>
|
|
<option value="10000">10 seconds</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Keyboard Shortcuts -->
|
|
<div class="settings-section">
|
|
<h4>╔══ Keyboard Shortcuts ══╗</h4>
|
|
<div class="shortcuts-list">
|
|
<div class="shortcut-item">
|
|
<kbd>Ctrl/Cmd + K</kbd> <span>Focus search</span>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<kbd>Alt + S</kbd> <span>Open settings</span>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<kbd>ESC</kbd> <span>Close modal</span>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<kbd>?</kbd> <span>Show shortcuts</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Info (Read-only) -->
|
|
<div class="settings-section">
|
|
<h4>╔══ User Information ══╗</h4>
|
|
<div class="user-info-grid">
|
|
<div><strong>Display Name:</strong></div>
|
|
<div><?php echo htmlspecialchars($GLOBALS['currentUser']['display_name'] ?? 'N/A'); ?></div>
|
|
|
|
<div><strong>Username:</strong></div>
|
|
<div><?php echo htmlspecialchars($GLOBALS['currentUser']['username']); ?></div>
|
|
|
|
<div><strong>Email:</strong></div>
|
|
<div><?php echo htmlspecialchars($GLOBALS['currentUser']['email'] ?? 'N/A'); ?></div>
|
|
|
|
<div><strong>Role:</strong></div>
|
|
<div><?php echo $GLOBALS['currentUser']['is_admin'] ? 'Administrator' : 'User'; ?></div>
|
|
|
|
<div><strong>Groups:</strong></div>
|
|
<div class="user-groups-list">
|
|
<?php
|
|
$groups = explode(',', $GLOBALS['currentUser']['groups'] ?? '');
|
|
foreach ($groups as $g):
|
|
if (trim($g)):
|
|
?>
|
|
<span class="group-badge"><?php echo htmlspecialchars(trim($g)); ?></span>
|
|
<?php
|
|
endif;
|
|
endforeach;
|
|
if (empty(trim($GLOBALS['currentUser']['groups'] ?? ''))):
|
|
?>
|
|
<span class="text-muted">No groups assigned</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-footer">
|
|
<button class="btn btn-primary" data-action="save-settings">Save Preferences</button>
|
|
<button class="btn btn-secondary" data-action="close-settings">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced Search Modal -->
|
|
<div class="settings-modal" id="advancedSearchModal" style="display: none;" data-action="close-advanced-search-backdrop" role="dialog" aria-modal="true" aria-labelledby="advancedSearchModalTitle">
|
|
<div class="settings-content">
|
|
<div class="settings-header">
|
|
<h3 id="advancedSearchModalTitle">🔍 Advanced Search</h3>
|
|
<button class="close-settings" data-action="close-advanced-search" aria-label="Close advanced search">✗</button>
|
|
</div>
|
|
|
|
<form id="advancedSearchForm">
|
|
<div class="settings-body">
|
|
<!-- Saved Filters -->
|
|
<div class="settings-section">
|
|
<h4>╔══ Saved Filters ══╗</h4>
|
|
<div class="setting-row">
|
|
<label for="saved-filters-select">Load Filter:</label>
|
|
<select id="saved-filters-select" class="setting-select setting-select-wide" data-action="load-saved-filter">
|
|
<option value="">-- Select a saved filter --</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-row setting-row-right">
|
|
<button type="button" class="btn btn-secondary btn-setting" data-action="save-filter">💾 Save Current</button>
|
|
<button type="button" class="btn btn-secondary btn-setting" data-action="delete-filter">🗑 Delete Selected</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Text -->
|
|
<div class="settings-section">
|
|
<h4>╔══ Search Criteria ══╗</h4>
|
|
<div class="setting-row">
|
|
<label for="adv-search-text">Search Text:</label>
|
|
<input type="text" id="adv-search-text" class="setting-select setting-select-full" placeholder="Search in title, description...">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Date Ranges -->
|
|
<div class="settings-section">
|
|
<h4>╔══ Date Range ══╗</h4>
|
|
<div class="setting-row">
|
|
<label for="adv-created-from">Created From:</label>
|
|
<input type="date" id="adv-created-from" class="setting-select">
|
|
</div>
|
|
<div class="setting-row">
|
|
<label for="adv-created-to">Created To:</label>
|
|
<input type="date" id="adv-created-to" class="setting-select">
|
|
</div>
|
|
<div class="setting-row">
|
|
<label for="adv-updated-from">Updated From:</label>
|
|
<input type="date" id="adv-updated-from" class="setting-select">
|
|
</div>
|
|
<div class="setting-row">
|
|
<label for="adv-updated-to">Updated To:</label>
|
|
<input type="date" id="adv-updated-to" class="setting-select">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status/Priority/Category/Type -->
|
|
<div class="settings-section">
|
|
<h4>╔══ Filters ══╗</h4>
|
|
<div class="setting-row">
|
|
<label for="adv-status">Status:</label>
|
|
<select id="adv-status" class="setting-select" multiple size="4">
|
|
<option value="Open">Open</option>
|
|
<option value="Pending">Pending</option>
|
|
<option value="In Progress">In Progress</option>
|
|
<option value="Closed">Closed</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-row">
|
|
<label for="adv-priority-min">Priority Range:</label>
|
|
<select id="adv-priority-min" class="setting-select setting-select-narrow">
|
|
<option value="">Any</option>
|
|
<option value="1">P1</option>
|
|
<option value="2">P2</option>
|
|
<option value="3">P3</option>
|
|
<option value="4">P4</option>
|
|
<option value="5">P5</option>
|
|
</select>
|
|
<span class="separator-text">to</span>
|
|
<select id="adv-priority-max" class="setting-select setting-select-narrow">
|
|
<option value="">Any</option>
|
|
<option value="1">P1</option>
|
|
<option value="2">P2</option>
|
|
<option value="3">P3</option>
|
|
<option value="4">P4</option>
|
|
<option value="5">P5</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Filters -->
|
|
<div class="settings-section">
|
|
<h4>╔══ Users ══╗</h4>
|
|
<div class="setting-row">
|
|
<label for="adv-created-by">Created By:</label>
|
|
<select id="adv-created-by" class="setting-select">
|
|
<option value="">Any User</option>
|
|
<!-- Will be populated by JavaScript -->
|
|
</select>
|
|
</div>
|
|
<div class="setting-row">
|
|
<label for="adv-assigned-to">Assigned To:</label>
|
|
<select id="adv-assigned-to" class="setting-select">
|
|
<option value="">Any User</option>
|
|
<option value="unassigned">Unassigned</option>
|
|
<!-- Will be populated by JavaScript -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-footer">
|
|
<button type="submit" class="btn btn-primary">Search</button>
|
|
<button type="button" class="btn btn-secondary" data-action="reset-advanced-search">Reset</button>
|
|
<button type="button" class="btn btn-secondary" data-action="close-advanced-search">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/settings.js"></script>
|
|
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/keyboard-shortcuts.js"></script>
|
|
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/advanced-search.js"></script>
|
|
<script nonce="<?php echo $nonce; ?>">
|
|
// Event delegation for all data-action handlers
|
|
document.addEventListener('click', function(event) {
|
|
const target = event.target.closest('[data-action]');
|
|
if (!target) {
|
|
// Close admin dropdown when clicking outside
|
|
const dropdown = document.getElementById('adminDropdown');
|
|
if (dropdown && !event.target.closest('.admin-dropdown')) {
|
|
dropdown.classList.remove('show');
|
|
}
|
|
return;
|
|
}
|
|
|
|
const action = target.dataset.action;
|
|
|
|
switch (action) {
|
|
case 'toggle-admin-menu':
|
|
event.stopPropagation();
|
|
document.getElementById('adminDropdown').classList.toggle('show');
|
|
break;
|
|
|
|
case 'open-settings':
|
|
openSettingsModal();
|
|
break;
|
|
|
|
case 'close-settings':
|
|
closeSettingsModal();
|
|
break;
|
|
|
|
case 'close-settings-backdrop':
|
|
if (event.target === target) closeSettingsModal();
|
|
break;
|
|
|
|
case 'save-settings':
|
|
saveSettings();
|
|
break;
|
|
|
|
case 'toggle-banner':
|
|
toggleBanner();
|
|
break;
|
|
|
|
case 'toggle-sidebar':
|
|
toggleSidebar();
|
|
break;
|
|
|
|
case 'open-advanced-search':
|
|
openAdvancedSearch();
|
|
break;
|
|
|
|
case 'close-advanced-search':
|
|
closeAdvancedSearch();
|
|
break;
|
|
|
|
case 'close-advanced-search-backdrop':
|
|
if (event.target === target) closeAdvancedSearch();
|
|
break;
|
|
|
|
case 'reset-advanced-search':
|
|
resetAdvancedSearch();
|
|
break;
|
|
|
|
case 'set-view-mode':
|
|
setViewMode(target.dataset.mode);
|
|
break;
|
|
|
|
case 'navigate':
|
|
window.location.href = target.dataset.url;
|
|
break;
|
|
|
|
case 'toggle-export-menu':
|
|
event.stopPropagation();
|
|
toggleExportMenu(event);
|
|
break;
|
|
|
|
case 'export-tickets':
|
|
event.preventDefault();
|
|
exportSelectedTickets(target.dataset.format);
|
|
break;
|
|
|
|
case 'bulk-status':
|
|
showBulkStatusModal();
|
|
break;
|
|
|
|
case 'bulk-assign':
|
|
showBulkAssignModal();
|
|
break;
|
|
|
|
case 'bulk-priority':
|
|
showBulkPriorityModal();
|
|
break;
|
|
|
|
case 'clear-selection':
|
|
clearSelection();
|
|
break;
|
|
|
|
case 'toggle-select-all':
|
|
toggleSelectAll();
|
|
break;
|
|
|
|
case 'toggle-row-checkbox':
|
|
toggleRowCheckbox(event, target);
|
|
break;
|
|
|
|
case 'view-ticket':
|
|
event.stopPropagation();
|
|
window.location.href = '/ticket/' + target.dataset.ticketId;
|
|
break;
|
|
|
|
case 'quick-status':
|
|
event.stopPropagation();
|
|
quickStatusChange(target.dataset.ticketId, target.dataset.status);
|
|
break;
|
|
|
|
case 'quick-assign':
|
|
event.stopPropagation();
|
|
quickAssign(target.dataset.ticketId);
|
|
break;
|
|
|
|
case 'save-filter':
|
|
saveCurrentFilter();
|
|
break;
|
|
|
|
case 'delete-filter':
|
|
deleteSavedFilter();
|
|
break;
|
|
}
|
|
});
|
|
|
|
// Handle change events separately
|
|
document.addEventListener('change', function(event) {
|
|
const target = event.target.closest('[data-action]');
|
|
if (!target) return;
|
|
|
|
const action = target.dataset.action;
|
|
|
|
switch (action) {
|
|
case 'update-selection':
|
|
updateSelectionCount();
|
|
break;
|
|
|
|
case 'load-saved-filter':
|
|
loadSavedFilter();
|
|
break;
|
|
}
|
|
});
|
|
|
|
// Handle form submit for advanced search
|
|
document.getElementById('advancedSearchForm').addEventListener('submit', function(event) {
|
|
performAdvancedSearch(event);
|
|
});
|
|
|
|
// Helper function to get date in server timezone
|
|
function getServerDate() {
|
|
const now = new Date();
|
|
const serverTime = new Date(now.getTime() + (window.APP_TIMEZONE_OFFSET * 60000) + (now.getTimezoneOffset() * 60000));
|
|
return serverTime.getFullYear() + '-' +
|
|
String(serverTime.getMonth() + 1).padStart(2, '0') + '-' +
|
|
String(serverTime.getDate()).padStart(2, '0');
|
|
}
|
|
|
|
// Stat card click handlers for filtering
|
|
document.querySelectorAll('.stat-card').forEach(card => {
|
|
card.style.cursor = 'pointer';
|
|
card.addEventListener('click', function() {
|
|
const classList = this.classList;
|
|
let url = '/?';
|
|
const today = getServerDate();
|
|
|
|
if (classList.contains('stat-open')) {
|
|
url += 'status=Open';
|
|
} else if (classList.contains('stat-critical')) {
|
|
url += 'status=Open,Pending,In+Progress&priority_max=1';
|
|
} else if (classList.contains('stat-unassigned')) {
|
|
url += 'status=Open,Pending,In+Progress&assigned_to=unassigned';
|
|
} else if (classList.contains('stat-today')) {
|
|
url += 'status=Open,Pending,In+Progress&created_from=' + today + '&created_to=' + today;
|
|
} else if (classList.contains('stat-resolved')) {
|
|
url += 'status=Closed&updated_from=' + today + '&updated_to=' + today;
|
|
}
|
|
|
|
if (url !== '/?') {
|
|
window.location.href = url;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|