Jared Vititoe
8b4ef2a7f5
- Add TIMEZONE config option (default: America/New_York) - Set PHP default timezone from config - Add timezone offset and abbreviation for JavaScript - Update stat card filters to use server timezone - Add timezone config to Dashboard and Ticket views Timezone can be changed via TIMEZONE env variable. All dates now consistent with server timezone (EST by default). Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
739 lines
37 KiB
PHP
739 lines
37 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
|
|
?>
|
|
<!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">
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/ascii-banner.js"></script>
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/toast.js"></script>
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/markdown.js"></script>
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/dashboard.js"></script>
|
|
<script>
|
|
// CSRF Token for AJAX requests
|
|
window.CSRF_TOKEN = '<?php
|
|
require_once __DIR__ . '/../middleware/CsrfMiddleware.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>
|
|
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>
|
|
<div class="user-header">
|
|
<div class="user-header-left">
|
|
<span class="app-title">🎫 Tinker Tickets</span>
|
|
</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" onclick="toggleAdminMenu(event)">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>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
<button class="settings-icon" title="Settings (Alt+S)" onclick="openSettingsModal()">⚙</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Collapsible ASCII Banner -->
|
|
<div class="ascii-banner-wrapper collapsed">
|
|
<button class="banner-toggle" onclick="toggleBanner()">
|
|
<span class="toggle-icon">▼</span> ASCII Banner
|
|
</button>
|
|
<div id="ascii-banner-container" class="banner-content"></div>
|
|
</div>
|
|
<script>
|
|
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">
|
|
<!-- Left Sidebar with Filters -->
|
|
<aside class="dashboard-sidebar">
|
|
<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>
|
|
</aside>
|
|
|
|
<!-- 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" onclick="openAdvancedSearch()" 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">
|
|
<button onclick="window.location.href='<?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" onclick="toggleExportMenu(event)">↓ Export Selected (<span id="exportCount">0</span>)</button>
|
|
<div class="export-dropdown-content" id="exportDropdownContent">
|
|
<a href="#" onclick="exportSelectedTickets('csv'); return false;">CSV</a>
|
|
<a href="#" onclick="exportSelectedTickets('json'); return false;">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 onclick='window.location.href=\"$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' onclick='window.location.href=\"$pageUrl\"'>$i</button>";
|
|
}
|
|
|
|
// Next page button
|
|
if ($page < $totalPages) {
|
|
$currentParams['page'] = $page + 1;
|
|
$nextUrl = '?' . http_build_query($currentParams);
|
|
echo "<button onclick='window.location.href=\"$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 -->
|
|
<div class="ascii-frame-outer">
|
|
<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 onclick="showBulkStatusModal()" class="btn btn-bulk">Change Status</button>
|
|
<button onclick="showBulkAssignModal()" class="btn btn-bulk">Assign</button>
|
|
<button onclick="showBulkPriorityModal()" class="btn btn-bulk">Priority</button>
|
|
<button onclick="clearSelection()" class="btn btn-secondary">Clear</button>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<!-- Table -->
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<?php if ($GLOBALS['currentUser']['is_admin'] ?? false): ?>
|
|
<th style="width: 40px;"><input type="checkbox" id="selectAllCheckbox" onclick="toggleSelectAll()"></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' onclick='window.location.href=\"$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><input type='checkbox' class='ticket-checkbox' value='{$row['ticket_id']}' onchange='updateSelectionCount()'></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 onclick=\"event.stopPropagation(); window.location.href='/ticket/{$row['ticket_id']}'\" class='quick-action-btn' title='View'>👁</button>";
|
|
echo "<button onclick=\"event.stopPropagation(); quickStatusChange('{$row['ticket_id']}', '{$row['status']}')\" class='quick-action-btn' title='Change Status'>🔄</button>";
|
|
echo "<button onclick=\"event.stopPropagation(); quickAssign('{$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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- END OUTER FRAME -->
|
|
|
|
<!-- Settings Modal -->
|
|
<div class="settings-modal" id="settingsModal" style="display: none;" onclick="closeOnBackdropClick(event)">
|
|
<div class="settings-content">
|
|
<span class="bottom-left-corner">╚</span>
|
|
<span class="bottom-right-corner">╝</span>
|
|
|
|
<div class="settings-header">
|
|
<h3>⚙ System Preferences</h3>
|
|
<button class="close-settings" onclick="closeSettingsModal()">✗</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>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-footer">
|
|
<button class="btn btn-primary" onclick="saveSettings()">Save Preferences</button>
|
|
<button class="btn btn-secondary" onclick="closeSettingsModal()">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Advanced Search Modal -->
|
|
<div class="settings-modal" id="advancedSearchModal" style="display: none;" onclick="closeOnAdvancedSearchBackdropClick(event)">
|
|
<div class="settings-content">
|
|
<div class="settings-header">
|
|
<h3>🔍 Advanced Search</h3>
|
|
<button class="close-settings" onclick="closeAdvancedSearch()">✗</button>
|
|
</div>
|
|
|
|
<form id="advancedSearchForm" onsubmit="performAdvancedSearch(event)">
|
|
<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" style="max-width: 70%;" onchange="loadSavedFilter()">
|
|
<option value="">-- Select a saved filter --</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-row" style="justify-content: flex-end; gap: 0.5rem;">
|
|
<button type="button" class="btn btn-secondary" onclick="saveCurrentFilter()" style="padding: 0.5rem 1rem;">💾 Save Current</button>
|
|
<button type="button" class="btn btn-secondary" onclick="deleteSavedFilter()" style="padding: 0.5rem 1rem;">🗑 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" style="max-width: 100%;" 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" style="max-width: 90px;">
|
|
<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 style="color: var(--terminal-green);">to</span>
|
|
<select id="adv-priority-max" class="setting-select" style="max-width: 90px;">
|
|
<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" onclick="resetAdvancedSearch()">Reset</button>
|
|
<button type="button" class="btn btn-secondary" onclick="closeAdvancedSearch()">Cancel</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/settings.js"></script>
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/keyboard-shortcuts.js"></script>
|
|
<script src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/advanced-search.js"></script>
|
|
<script>
|
|
// Admin dropdown toggle
|
|
function toggleAdminMenu(event) {
|
|
event.stopPropagation();
|
|
const dropdown = document.getElementById('adminDropdown');
|
|
dropdown.classList.toggle('show');
|
|
}
|
|
|
|
// Close admin dropdown when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
const dropdown = document.getElementById('adminDropdown');
|
|
if (dropdown && !event.target.closest('.admin-dropdown')) {
|
|
dropdown.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Helper function to get date in server timezone
|
|
function getServerDate() {
|
|
// Get current UTC time
|
|
const now = new Date();
|
|
// Apply server timezone offset (APP_TIMEZONE_OFFSET is in minutes)
|
|
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 = '/?';
|
|
// Use server timezone date (default: EST)
|
|
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>
|